/* The Magic robot: animation and speech bubble. Scoped to .mg* so it is safe to load on a customer's page (widget). */
.mg { overflow:visible; display:block; }
.mg-body { transform-origin:80px 150px; animation:mg-float 3.4s ease-in-out infinite; }
.mg .mg-e { fill:var(--mge, #8fd8ff); } .mg .mg-arc { stroke:#8fd8ff; stroke-width:4.2; fill:none; stroke-linecap:round; stroke-linejoin:round; } .mg .mg-mouth { stroke:#8fd8ff; stroke-width:3.2; fill:none; stroke-linecap:round; }
.mg-eyes { transform-origin:80px 76px; animation:mg-blink 5.2s infinite; } .mg-look { transition:transform .08s linear; }
.mg-ring { animation:mg-ring 3.4s ease-in-out infinite; transform-origin:80px 159px; }
.mg-ball { animation:mg-ball 2.2s ease-in-out infinite; transform-origin:80px 12px; } .mg-antenna { transform-origin:80px 32px; animation:mg-ant 3.4s ease-in-out infinite; }
.mg-arm-wave { transform-origin:118px 118px; animation:mg-wave .7s ease-in-out infinite alternate; }
.mg-sparks path { transform-box:fill-box; transform-origin:center; animation:mg-twinkle 2.6s ease-in-out infinite; } .mg-sparks .s2 { animation-delay:.8s } .mg-sparks .s3 { animation-delay:1.5s }
.mg .mg-q { font:800 26px Poppins, Inter, sans-serif; fill:#f59e0b; animation:mg-pop 1.4s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.mg .mg-dots circle { fill:#9aa8d8; animation:mg-dot 1.2s infinite; } .mg .mg-dots circle:nth-child(2) { animation-delay:.2s } .mg .mg-dots circle:nth-child(3) { animation-delay:.4s }
.mg .mg-hearts path { animation:mg-heart 2.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; } .mg .mg-hearts .h2 { animation-delay:.9s }
.mg .mg-burst { animation:mg-pop 1s ease-in-out infinite; transform-origin:80px 70px; transform-box:fill-box; }
.mg-happy .mg-body, .mg-wow .mg-body, .mg-love .mg-body { animation:mg-hop 1s ease-in-out infinite; }
.mg-think .mg-body { animation:mg-float 2.2s ease-in-out infinite; }
.mg-live { position:relative; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; border-radius:50%; }
.mg-live:focus-visible { outline:3px solid #4f6bff; outline-offset:4px; }
.mg-live.mg-hover .mg-antenna { animation:mg-ant-fast .5s ease-in-out infinite; }
.mg-live.mg-asleep .mg-eyes { animation:none; transform:scaleY(.12); } .mg-live.mg-asleep .mg-body { animation-duration:6s; }
.mg-bubble { position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:6px; background:#fff; color:#0f172a; border:1px solid #e4e8f5; border-radius:16px; padding:8px 14px; font:600 14px/1.25 Inter, system-ui, sans-serif; white-space:nowrap; box-shadow:0 10px 30px rgba(79,107,255,.18); animation:mg-pop-in .22s ease-out; z-index:5; pointer-events:none; }
.mg-bubble::after { content:""; position:absolute; left:50%; top:100%; width:10px; height:10px; background:#fff; border-right:1px solid #e4e8f5; border-bottom:1px solid #e4e8f5; transform:translate(-50%,-6px) rotate(45deg); }
.mg-bubble.out { opacity:0; transition:opacity .3s; }
.bub-right .mg-bubble { left:100%; bottom:50%; transform:translateY(50%); margin:0 0 0 8px; } .bub-right .mg-bubble::after { display:none; }
.mg.react-hop .mg-body { animation:mg-hop .55s ease-out 1 !important; } .mg.react-wiggle { animation:mg-wiggle .7s ease-in-out 1; transform-origin:50% 90%; }
.mg.react-spin { animation:mg-spin3d .8s cubic-bezier(.3,.7,.3,1) 1; } .mg.react-puff .mg-body { animation:mg-puff .6s ease-out 1 !important; }
@keyframes mg-float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } }
@keyframes mg-ring { 0%,100% { transform:scale(1); opacity:.9 } 50% { transform:scale(.86); opacity:.6 } }
@keyframes mg-ball { 0%,100% { transform:scale(1) } 50% { transform:scale(1.25) } }
@keyframes mg-ant { 0%,100% { transform:rotate(-4deg) } 50% { transform:rotate(5deg) } } @keyframes mg-ant-fast { 0%,100% { transform:rotate(-9deg) } 50% { transform:rotate(10deg) } }
@keyframes mg-wave { from { transform:rotate(-12deg) } to { transform:rotate(26deg) } }
@keyframes mg-blink { 0%,93%,100% { transform:scaleY(1) } 96% { transform:scaleY(.08) } }
@keyframes mg-hop { 0%,100% { transform:translateY(0) scale(1,1) } 40% { transform:translateY(-16px) scale(.97,1.04) } 60% { transform:translateY(-16px) } 92% { transform:translateY(0) scale(1.05,.93) } }
@keyframes mg-twinkle { 0%,100% { transform:scale(.4); opacity:.35 } 50% { transform:scale(1.1); opacity:1 } }
@keyframes mg-pop { 0%,100% { transform:scale(1) } 50% { transform:scale(1.2) } } @keyframes mg-dot { 0%,100% { opacity:.3 } 50% { opacity:1 } }
@keyframes mg-heart { 0%,100% { transform:translateY(0) scale(.9); opacity:.7 } 50% { transform:translateY(-6px) scale(1.15); opacity:1 } }
@keyframes mg-wiggle { 0%,100% { transform:rotate(0) } 20% { transform:rotate(-9deg) } 45% { transform:rotate(8deg) } 70% { transform:rotate(-5deg) } }
@keyframes mg-spin3d { from { transform:rotateY(0) } to { transform:rotateY(360deg) } }
@keyframes mg-puff { 0% { transform:scale(1) } 35% { transform:scale(1.14,.9) } 65% { transform:scale(.94,1.08) } 100% { transform:scale(1) } }
@keyframes mg-pop-in { from { transform:translateX(-50%) translateY(8px) scale(.96); opacity:0 } to { transform:translateX(-50%); opacity:1 } }
.bub-right .mg-bubble { animation-name:mg-pop-in-r; } @keyframes mg-pop-in-r { from { transform:translateY(50%) scale(.96); opacity:0 } to { transform:translateY(50%); opacity:1 } }
@media (prefers-reduced-motion: reduce) { .mg *, .mg { animation:none !important; } }