/* ==========================================================================
   Motion and micro-interactions, tokens only. Motion explains: a touch answers, a state change
   eases, an AI action shows it is working. UI motion stays at 600 ms or less (ambient loops excepted).
   Only transform, translate, scale, opacity and clip-path animate.
   ONE gate for the landing, the docs and the portal: every animation hangs off
   html:not([data-motion="reduced"]):not(.static). The kill switch at the end stops every animation and
   transition under html[data-motion="reduced"], ?static=1, while booting and under prefers-reduced-motion,
   so each of them renders the exact static design. site.js adds html.site-anim only when this gate is open.
   ========================================================================== */
html:not([data-motion="reduced"]):not(.static){
  --mo-out:cubic-bezier(.16,1,.3,1); --mo-spring:cubic-bezier(.34,1.56,.64,1);
}

/* Reveal: a block rises in once when the page loads */
html:not([data-motion="reduced"]):not(.static):not(.booting) .reveal{animation:mo-rise .5s var(--mo-out) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes mo-rise{from{opacity:0;translate:0 12px}}

/* Presses: a quick press, a springy release */
html:not([data-motion="reduced"]):not(.static) :is(.btn,.chip,.magic,.mic,.seg button,.copy,.icon-btn):active{transform:scale(.96);transition:transform .08s}
html:not([data-motion="reduced"]):not(.static) :is(.btn,.chip,.magic,.mic,.copy,.icon-btn){transition:transform .42s var(--mo-spring),background-color var(--dur),border-color var(--dur),color var(--dur)}
html:not([data-motion="reduced"]):not(.static) :is(a.card,.card.lift){transition:translate .3s var(--mo-out),border-color var(--dur),box-shadow var(--dur)}
html:not([data-motion="reduced"]):not(.static) :is(a.card,.card.lift):hover{translate:0 -2px}

/* Focus: the ring eases in */
html:not([data-motion="reduced"]):not(.static) :focus-visible{transition:outline-offset .15s var(--ease)}

/* Loading: skeleton shimmer (.skel and .skeleton are one component in components.css) */
html:not([data-motion="reduced"]):not(.static) :is(.skel,.skeleton){animation:mo-shimmer 1.4s linear infinite}
@keyframes mo-shimmer{to{background-position:-200% 0}}

/* The cursor: running status, the live dot, the mark's cursor and the landing caret blink the same way */
html:not([data-motion="reduced"]):not(.static) :is(.live,.mark-live .cur,.mk.live .cur,.blink){animation:mo-blink 1.1s steps(1) infinite}
html:not([data-motion="reduced"]):not(.static) .st[data-v="running"]::before{animation:mo-blink 1.1s steps(1) infinite}
@keyframes mo-blink{50%{opacity:0}}
/* The header mark on every public page blinks four times, then rests on, so it never pulls the eye while reading */
html:not([data-motion="reduced"]):not(.static) .site-head .brand .cur.blink{animation-iteration-count:4}
/* Sign-in loading: the chevron draws, then the cursor blinks three times */
html:not([data-motion="reduced"]):not(.static) .mark-draw .chev{animation:mo-chev .52s var(--ease) both}
html:not([data-motion="reduced"]):not(.static) .mark-draw .cur{animation:mo-blink .7s steps(1) .52s 3}
@keyframes mo-chev{from{stroke-dashoffset:40}}
/* Usage meter fills once */
html:not([data-motion="reduced"]):not(.static) .meter-lg > i{animation:mo-grow .9s var(--ease) .2s both}
@keyframes mo-grow{from{transform:scaleX(0)}}

/* Overlays: the scrim fades, dialogs and panels pop, toasts rise */
html:not([data-motion="reduced"]):not(.static) .modal-bg.open{animation:mo-fade .2s var(--ease)}
html:not([data-motion="reduced"]):not(.static) :is(.modal,.appearance.open,.palette){animation:mo-pop .3s var(--mo-spring)}
html:not([data-motion="reduced"]):not(.static) .toast{animation:mo-rise .3s var(--mo-out) both}
html:not([data-motion="reduced"]):not(.static) .drawer{transition:transform .35s var(--ease)}
@keyframes mo-fade{from{opacity:0}}
@keyframes mo-pop{from{opacity:0;scale:.98;translate:0 6px}}

/* AI states: listening pulses, thinking breathes, a suggestion settles in */
html:not([data-motion="reduced"]):not(.static) .mic[aria-pressed="true"]{animation:mo-pulse 1.2s ease-out infinite}
@keyframes mo-pulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45)}100%{box-shadow:0 0 0 14px rgba(var(--accent-rgb),0)}}
html:not([data-motion="reduced"]):not(.static) [data-ai-state="thinking"]{animation:mo-breathe 1.6s ease-in-out infinite}
@keyframes mo-breathe{50%{opacity:.55}}
html:not([data-motion="reduced"]):not(.static) .suggest{animation:mo-rise .35s var(--mo-out) both}

/* Docs: index cards lift on hover (the same lift as a.card) */
html:not([data-motion="reduced"]):not(.static) a.d-card:hover{translate:0 -1px}

/* Ask MainSDK orb: the swirl turns, the core breathes, a soft ring pulses; it speeds up on hover */
html:not([data-motion="reduced"]):not(.static) .orb-swirl{animation:mo-orb-spin 7s linear infinite}
html:not([data-motion="reduced"]):not(.static) .orb:hover .orb-swirl{animation-duration:2.4s}
html:not([data-motion="reduced"]):not(.static) .orb-core{animation:mo-orb-breathe 3.6s ease-in-out infinite}
html:not([data-motion="reduced"]):not(.static) .orb::after{animation:mo-orb-ring 3.6s var(--ease) infinite}
@keyframes mo-orb-spin{to{rotate:360deg}}
@keyframes mo-orb-breathe{50%{scale:.94}}
@keyframes mo-orb-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent}}

/* Chat window: rises from the orb; the thinking dots bounce in turn */
html:not([data-motion="reduced"]):not(.static) .chatw:not([hidden]){animation:mo-chat-in .28s var(--mo-out) both}
@keyframes mo-chat-in{from{opacity:0;scale:.92;translate:0 12px}}
html:not([data-motion="reduced"]):not(.static) .msg{animation:mo-rise .3s var(--mo-out) both}
html:not([data-motion="reduced"]):not(.static) .dots i{animation:mo-dot 1s ease-in-out infinite}
html:not([data-motion="reduced"]):not(.static) .dots i:nth-child(2){animation-delay:.15s}
html:not([data-motion="reduced"]):not(.static) .dots i:nth-child(3){animation-delay:.3s}
@keyframes mo-dot{0%,60%,100%{translate:0 0;opacity:.5}30%{translate:0 -4px;opacity:1}}

/* Design controls modal eases in */
html:not([data-motion="reduced"]):not(.static) .dv-bg:not([hidden]) .devbar{animation:mo-chat-in .24s var(--mo-out) both}

/* Kill switch: one place stops every animation and transition on all three surfaces */
html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,html[data-motion="reduced"] *::after,
html.static *,html.static *::before,html.static *::after,
html.booting *,html.booting *::before,html.booting *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}