/* MARSA motion layer (2026-10-13). Built on the design-engineering rules we follow:
   strong ease-out on entrances, UI under 300ms, no scale-from-zero, no ease-in, reduced motion and hover gating
   ship with the animation. Loaded after _anim.css on pages that use it and overrides its slower values. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--mo-press:140ms;--mo-ui:200ms;--mo-reveal:420ms}
/* scroll reveal: a short rise, once */
html.anim-ready body .reveal{opacity:0;transform:translateY(12px);transition:opacity var(--mo-reveal) var(--ease-out),transform var(--mo-reveal) var(--ease-out);will-change:auto}
html.anim-ready body .reveal.in{opacity:1;transform:none}
html.anim-ready body .reveal[data-d="1"]{transition-delay:40ms}
html.anim-ready body .reveal[data-d="2"]{transition-delay:80ms}
html.anim-ready body .reveal[data-d="3"]{transition-delay:120ms}
html.anim-ready body .reveal[data-d="4"]{transition-delay:160ms}
html.anim-ready body .reveal[data-d="5"]{transition-delay:200ms}
html.anim-ready body .reveal[data-d="6"]{transition-delay:240ms}
/* hero: staged entrance, 40ms apart */
.hero-stage>*{animation:moRise .48s var(--ease-out) both}
.hero-stage>*:nth-child(1){animation-delay:0ms}
.hero-stage>*:nth-child(2){animation-delay:40ms}
.hero-stage>*:nth-child(3){animation-delay:80ms}
.hero-stage>*:nth-child(4){animation-delay:120ms}
.hero-stage>*:nth-child(5){animation-delay:160ms}
.hero-stage>*:nth-child(6){animation-delay:200ms}
.hero-stage>*:nth-child(7){animation-delay:240ms}
@keyframes moRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* press feedback on anything that looks like a button */
.btn,.hm-cta,.hd-cta,.scta,.cta-main,.cta,.as-b,.st,button.btn{transition:transform var(--mo-press) var(--ease-out),background-color var(--mo-ui) var(--ease-out),border-color var(--mo-ui) var(--ease-out),color var(--mo-ui) var(--ease-out)}
.btn:active,.hm-cta:active,.hd-cta:active,.scta:active,.cta-main:active,.cta:active,.as-b:active,.st:active,button.btn:active{transform:scale(.97)}
/* cards: hover only where hover exists */
@media(hover:hover){.mcard,.xcard,.layer,.bcard2,.c,.card2{transition:border-color var(--mo-ui) var(--ease-out),transform var(--mo-ui) var(--ease-out)}}
/* FAQ: the answer fades in instead of popping */
details[open]>*:not(summary){animation:moFade var(--mo-ui) var(--ease-out) both}
@keyframes moFade{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
details>summary{transition:color var(--mo-ui) var(--ease-out)}
/* images never pop in */
img.mo-img{opacity:0;transition:opacity 300ms var(--ease-out)}img.mo-img.in{opacity:1}
@media(prefers-reduced-motion:reduce){
  html.anim-ready body .reveal{opacity:1;transform:none;transition:none}
  .hero-stage>*{animation:none}
  .btn,.hm-cta,.hd-cta,.scta,.cta-main,.cta,.as-b,.st,button.btn{transition:none}
  details[open]>*:not(summary){animation:none}
  img.mo-img{opacity:1;transition:none}
}