:root { --ease: cubic-bezier(.2,.8,.2,1); }
.mascot { --gx: 0px; --gy: 0px; display: inline-block; }
.mascot svg { width: 100%; height: 100%; overflow: visible; }
.mascot svg * { transform-box: fill-box; }
.mascot .m-body, .mascot .m-arm { transform-box: view-box; }
.m-enter, .m-float, .m-shadow { transform-origin: center; }
.m-float { animation: m-float 4.2s ease-in-out infinite; }
.m-body { transform-origin: 76px 98px; animation: m-breathe 5s ease-in-out infinite; }
.m-shadow { fill: rgba(0, 0, 0, .35); animation: m-shadow 4.2s ease-in-out infinite; }
.m-glow { fill: #8b9bff; opacity: .28; }
.m-cheek { fill: #fda4c0; opacity: .55; }
.m-cloud { filter: drop-shadow(0 2px 3px rgba(80, 90, 200, .25)); }
.m-pupil { fill: #1e1b4b; }
.m-spark { fill: #fff; }
.m-eyes { transform-origin: center; animation: m-blink 5.2s infinite; transition: opacity .2s; }
.m-eye { transform: translate(var(--gx), var(--gy)); transition: transform .45s var(--ease); }
.m-ring, .m-dots, .m-sparks, .m-zzz, .m-happy, .m-sleepeye, .m-brows { opacity: 0; transition: opacity .25s; }
.m-ring { stroke: #7dd3fc; stroke-width: 1.6; }
.m-dots circle { fill: #c4b5fd; }
.m-sparks path { fill: #fde68a; }
.m-zzz text { fill: #a5b4fc; font: 700 10px sans-serif; }
.m-zzz text.s2 { font-size: 13px; }
.m-zzz text.s3 { font-size: 16px; }
.m-happy path, .m-sleepeye path, .m-brows path { fill: none; stroke: #1e1b4b; stroke-width: 3; stroke-linecap: round; }
.m-mouth { fill: none; stroke: #1e1b4b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; d: path("M69 84 Q76 89 83 84"); transition: d .3s var(--ease), fill .3s; }
.m-arm { transition: transform .5s var(--ease), opacity .3s; }
.m-arm.l { transform-origin: 33px 86px; }
.m-arm.r { transform-origin: 119px 86px; }
.m-arm-line { fill: none; stroke: #dfe6ff; stroke-width: 7; stroke-linecap: round; }
.m-hand { fill: #eef2ff; }
.mascot:where(:not([data-state="sleeping"], [data-state="success"], [data-state="excited"], [data-state="speaking"], [data-state="phone"])) .m-arm.l { animation: m-sway-l 4.6s ease-in-out infinite; }
.mascot:where(:not([data-state="sleeping"], [data-state="success"], [data-state="excited"], [data-state="speaking"], [data-state="phone"])) .m-arm.r { animation: m-sway-r 4.6s ease-in-out infinite .6s; }
.mascot[data-state="listening"] .m-ring { opacity: 1; animation: m-ripple 1.8s ease-out infinite; transform-origin: center; }
.mascot[data-state="listening"] .m-pupil { transform: scale(1.14); }
.mascot[data-state="listening"] .m-body { transform: translateY(1px) rotate(-2deg); animation: none; }
.mascot[data-state="listening"] .m-mouth { d: path("M71 85 Q76 87 81 85"); }
.mascot[data-state="listening"] .m-arm.r { transform: rotate(-22deg); animation: none; }
.mascot[data-state="thinking"] .m-dots { opacity: 1; }
.mascot[data-state="thinking"] .m-dots circle { animation: m-dot 1.3s ease-in-out infinite; }
.mascot[data-state="thinking"] .m-dots circle:nth-child(2) { animation-delay: .18s; }
.mascot[data-state="thinking"] .m-dots circle:nth-child(3) { animation-delay: .36s; }
.mascot[data-state="thinking"] .m-body { animation: m-wobble 3.2s ease-in-out infinite; }
.mascot[data-state="thinking"] .m-mouth { d: path("M71 86 Q76 85 81 86"); }
.mascot[data-state="thinking"] .m-arm.r { animation: m-think-hand 2.6s ease-in-out infinite; }
.mascot[data-state="speaking"] .m-mouth { fill: #4c1d95; animation: m-talk .36s ease-in-out infinite alternate; }
.mascot[data-state="speaking"] .m-body { animation: m-talkbody .6s ease-in-out infinite alternate; }
.mascot[data-state="speaking"] .m-arm.l { animation: m-gesture .9s ease-in-out infinite alternate; }
.mascot[data-state="speaking"] .m-arm.r { animation: m-gesture .9s ease-in-out infinite alternate-reverse; }
.mascot[data-state="success"] .m-eyes { opacity: 0; }
.mascot[data-state="success"] .m-happy { opacity: 1; }
.mascot[data-state="success"] .m-sparks { opacity: 1; animation: pulse 1s ease-in-out 2; }
.mascot[data-state="success"] .m-float { animation: m-bounce .6s var(--ease) 2; }
.mascot[data-state="success"] .m-mouth { d: path("M65 82 Q76 95 87 82"); }
.mascot[data-state="success"] .m-arm.l { animation: m-cheer-l .5s ease-in-out infinite alternate; }
.mascot[data-state="success"] .m-arm.r { animation: m-cheer-r .5s ease-in-out infinite alternate; }
.mascot[data-state="error"] .m-brows { opacity: 1; }
.mascot[data-state="error"] .m-float { animation: m-droop 2.4s ease-in-out 1; }
.mascot[data-state="error"] .m-mouth { d: path("M70 88 Q76 83 82 88"); }
.mascot[data-state="error"] .m-glow { fill: #fda4af; }
.mascot[data-state="sleeping"] .m-eyes { opacity: 0; }
.mascot[data-state="sleeping"] .m-sleepeye, .mascot[data-state="sleeping"] .m-zzz { opacity: 1; }
.mascot[data-state="sleeping"] .m-zzz text { animation: m-zzz-rise 3.6s ease-in-out infinite; }
.mascot[data-state="sleeping"] .m-zzz text:nth-child(2) { animation-delay: 1.2s; }
.mascot[data-state="sleeping"] .m-zzz text:nth-child(3) { animation-delay: 2.4s; }
.mascot[data-state="sleeping"] .m-enter { transform: rotate(-4deg) translateY(3px); }
.mascot[data-state="sleeping"] .m-float { animation-duration: 7s; }
.mascot[data-state="sleeping"] .m-body { animation-duration: 7s; }
.mascot[data-state="sleeping"] svg { filter: saturate(.7) brightness(.85); }
.mascot[data-state="sleeping"] .m-mouth { d: path("M72 85 Q76 87 80 85"); }
.mascot[data-state="excited"] .m-float { animation: m-bounce .5s var(--ease) 3; }
.mascot[data-state="excited"] .m-pupil { transform: scale(1.18); }
.mascot[data-state="excited"] .m-sparks { opacity: 1; animation: pulse .7s infinite 3; }
.mascot[data-state="excited"] .m-mouth { fill: #4c1d95; d: path("M66 82 Q76 99 86 82 Z"); }
.mascot[data-state="excited"] .m-arm.l { transform: rotate(105deg); animation: none; }
.mascot[data-state="excited"] .m-arm.r { transform: rotate(-105deg); animation: none; }
.mascot[data-wave][data-state] .m-arm.r { animation: m-wave 1.8s ease-in-out both; }
.mascot[data-intro] .m-enter { animation: m-appear .8s var(--ease) both; }
.mascot[data-intro] .m-eyes { animation: m-eyes-in .45s ease-out .8s both; }
.mascot[data-intro] .m-eye { transition: none; }
.mascot[data-intro] .m-mouth { animation: m-smile-in .5s ease-out 2.1s both; }
.mascot.paused *, .mascot.paused { animation-play-state: paused !important; }
.mascot[role="button"] { cursor: pointer; border-radius: 18px; }
.mascot[role="button"]:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 3px; }
.m-enter { transition: transform .8s var(--ease); }
.m-phone { opacity: 0; pointer-events: none; transform: translateY(12px) scale(.9); transform-origin: 76px 112px; transition: opacity .35s ease, transform .5s var(--ease); }
.mascot .m-phone { transform-box: view-box; }
.m-phone-body { fill: #1f2937; stroke: #a5b4fc; stroke-width: 1.2; }
.m-parm { fill: none; stroke: #eef2ff; stroke-width: 6.5; stroke-linecap: round; }
.m-parm-shadow { fill: none; stroke: #9fb0f5; stroke-width: 9; stroke-linecap: round; opacity: .4; }
.m-thumb { fill: #fff; }
.m-screenglow { fill: #7dd3fc; opacity: 0; }
.mascot[data-state="phone"] .m-phone { opacity: 1; transform: none; }
.mascot[data-state="phone"] .m-arm { opacity: 0; }
.mascot[data-state="phone"] .m-eye { transform: translate(0, 2.5px); }
.mascot[data-state="phone"] .m-eyes .m-eye:last-child { animation: m-wink 4.8s ease-in-out infinite; }
.mascot[data-state="phone"] .m-mouth { d: path("M70 86 Q76 89 82 85"); }
.mascot[data-state="phone"] .m-lines { animation: m-scroll 2s linear infinite; }
.mascot[data-state="phone"] .m-thumb.l { animation: m-tap .42s ease-in-out infinite alternate; }
.mascot[data-state="phone"] .m-thumb.r { animation: m-tap .42s ease-in-out infinite alternate-reverse; }
.mascot[data-state="phone"] .m-screenglow { animation: m-glowpulse 2.4s ease-in-out infinite; }
.mascot[data-bounce] .m-enter { transform-origin: 50% 92%; animation: m-bounce-click .7s var(--ease) both; }
@keyframes m-float { 50% { transform: translateY(-4px); } }
@keyframes m-breathe { 50% { transform: scale(1.025); } }
@keyframes m-shadow { 50% { transform: scale(.88); opacity: .6; } }
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes m-ripple { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.12); opacity: 0; } }
@keyframes m-wobble { 50% { transform: rotate(-2.5deg) translateY(-2px); } }
@keyframes m-dot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes m-talk { from { d: path("M69 84 Q76 86 83 84 Z"); } to { d: path("M69 83 Q76 96 83 83 Z"); } }
@keyframes m-talkbody { to { transform: scale(1.03); } }
@keyframes m-gesture { from { transform: rotate(-4deg); } to { transform: rotate(14deg); } }
@keyframes m-sway-l { 50% { transform: rotate(-5deg); } }
@keyframes m-sway-r { 50% { transform: rotate(5deg); } }
@keyframes m-think-hand { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-26deg); } }
@keyframes m-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } }
@keyframes m-cheer-l { from { transform: rotate(100deg); } to { transform: rotate(118deg); } }
@keyframes m-cheer-r { from { transform: rotate(-100deg); } to { transform: rotate(-118deg); } }
@keyframes m-droop { 0%, 100% { transform: translateY(0) rotate(0); } 30%, 70% { transform: translateY(2px) rotate(-3deg); } }
@keyframes m-zzz-rise { 0% { opacity: 0; transform: translate(0, 6px) scale(.7); } 25%, 75% { opacity: 1; } 100% { opacity: 0; transform: translate(5px, -12px) scale(1.1); } }
@keyframes m-wink { 0%, 90%, 100% { transform: translate(0, 2.5px) scaleY(1); } 94% { transform: translate(0, 2.5px) scaleY(.08); } }
@keyframes m-scroll { to { transform: translateY(-12px); } }
@keyframes m-tap { from { transform: translateY(0); } to { transform: translateY(-2.2px); } }
@keyframes m-glowpulse { 0%, 100% { opacity: .1; } 50% { opacity: .26; } }
@keyframes m-bounce-click { 0% { transform: translateY(0) scale(1, 1); } 18% { transform: translateY(2px) scale(1.08, .9); } 42% { transform: translateY(-16px) scale(.94, 1.08); } 66% { transform: translateY(0) scale(1.06, .94); } 82% { transform: translateY(-5px) scale(.98, 1.02); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes m-wave { 0% { transform: rotate(0); } 12% { transform: rotate(-105deg); } 28% { transform: rotate(-80deg); } 44% { transform: rotate(-112deg); } 60% { transform: rotate(-82deg); } 76% { transform: rotate(-108deg); } 100% { transform: rotate(0); } }
@keyframes m-appear { from { opacity: 0; transform: translateY(14px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes m-eyes-in { from { opacity: 0; transform: scaleY(.1); } to { opacity: 1; transform: scaleY(1); } }
@keyframes m-smile-in { from { d: path("M71 85 Q76 85 81 85"); } to { d: path("M69 84 Q76 89 83 84"); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .m-float, .m-body, .m-shadow, .m-eyes, .m-arm, .m-eyes, .m-dots circle, .m-ring { animation: none !important; }
  .hero.intro .hero-copy { animation: none !important; }
  .m-thumb, .m-lines, .m-screenglow, .m-zzz text, .m-eye, .mascot[data-bounce] .m-enter, .bubble-line.swap-in { animation: none !important; }
  .cloud-bubble[class*="fx-"], .tool-tile, .tool-chip, .message.enter, .message.enter .bubble, .agent-step, .agent-step .as-ico { animation: none !important; }
}