/* OIAS motion layer — opt-in per element; content stays visible if JS never runs.
   Animates transform + opacity only. Collapses under prefers-reduced-motion. */
:root{--m-ease:cubic-bezier(.16,1,.3,1);--m-dur:.9s}

/* Cross-page transitions (Chrome/Edge/Safari 18+; others just navigate) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:m-vt-out .28s var(--m-ease) both}
::view-transition-new(root){animation:m-vt-in .5s var(--m-ease) both}
@keyframes m-vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes m-vt-in{from{opacity:0;transform:translateY(18px)}}

/* Scroll reveal */
html.m-on [data-reveal],html.m-on .m-auto{opacity:0;transform:translateY(28px);transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease);transition-delay:var(--m-delay,0s)}
html.m-on [data-reveal].m-in,html.m-on .m-auto.m-in{opacity:1;transform:none}

/* Split headline: words rise from a mask */
.m-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.m-w>span{display:inline-block}
html.m-on .m-split .m-w>span{transform:translateY(105%);transition:transform 1s var(--m-ease);transition-delay:calc(var(--i,0) * 55ms + .1s)}
html.m-on .m-split.m-in .m-w>span{transform:none}

/* Flow line draws itself */
html.m-on [data-line]{--line:0}
html.m-on [data-line].m-in{--line:1}

/* Pointer spotlight on cards */
.wk-card,.wk-tile,.cmethod{position:relative;isolation:isolate}
.wk-card::after,.wk-tile::after,.cmethod::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(224,129,74,.14),transparent 60%)}
.wk-card:hover::after,.wk-tile:hover::after,.cmethod:hover::after{opacity:1}

/* Magnetic buttons (transform set by JS) */
[data-magnetic],.btn,.nav__cta{transition:transform .35s var(--m-ease),background-color .25s,color .25s,border-color .25s;will-change:transform}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html.m-on [data-reveal],html.m-on .m-auto{opacity:1;transform:none;transition:none}
  html.m-on .m-split .m-w>span{transform:none;transition:none}
  html.m-on [data-line]{--line:1}
  [data-magnetic],.btn,.nav__cta{transition:none;transform:none!important}
}
