/* Shared motion system — strong curves from the animation standards, not the weak CSS defaults. */
:root{
  --e-out:cubic-bezier(.23,1,.32,1);
  --e-inout:cubic-bezier(.77,0,.175,1);
  --e-drawer:cubic-bezier(.32,.72,0,1);
}
/* reveal */
.rv{opacity:0;transform:translate3d(0,18px,0);transition:opacity .62s var(--e-out),transform .62s var(--e-out)}
.rv.in{opacity:1;transform:none}
/* headline words */
.wd{display:inline-block;opacity:0;transform:translate3d(0,.42em,0);filter:blur(7px);
    transition:opacity .68s var(--e-out),transform .68s var(--e-out),filter .68s var(--e-out)}
.wd.in{opacity:1;transform:none;filter:blur(0)}
/* press feedback — 160ms, per the duration table */
.btn,.navcta,.rail-item{transition:transform .16s var(--e-out),background .18s var(--e-out),color .18s var(--e-out),border-color .18s var(--e-out),box-shadow .22s var(--e-out)}
.btn:active,.navcta:active{transform:scale(.97)}
.magnetic{transition:transform .34s var(--e-out),background .18s var(--e-out)}
/* nav condense */
nav{transition:height .28s var(--e-out),background .28s var(--e-out),box-shadow .28s var(--e-out)}
nav .navin{transition:height .28s var(--e-out)}
nav.shrunk .navin{height:58px}
/* marquee — constant motion is the one place linear is correct */
.marq{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq-track{display:flex;gap:60px;width:max-content;animation:marq 42s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translate3d(-50%,0,0)}}
/* rail panel swap — blur bridges the crossfade (kept under 20px) */
.rail-panel{opacity:0;visibility:hidden;position:absolute;inset:0;transform:translate3d(0,10px,0) scale(.995);filter:blur(6px);
  transition:opacity .42s var(--e-out),transform .42s var(--e-out),filter .42s var(--e-out),visibility 0s linear .42s}
.rail-panel.on{opacity:1;visibility:visible;transform:none;filter:blur(0);transition-delay:0s}
/* the bar's travel is spring-integrated per frame; a CSS transition on
   transform would fight every write. Height/colour still transition. */
.rail-bar{transition:height .34s var(--e-out),background .34s var(--e-out)}
@media (prefers-reduced-motion:reduce){
  .rv,.wd{opacity:1!important;transform:none!important;filter:none!important;transition:opacity .2s ease}
  .marq-track{animation:none}
  .rail-panel{transition:opacity .2s ease,visibility 0s linear .2s;transform:none;filter:none}
  .btn:active,.navcta:active{transform:none}
  .magnetic{transition:none}
}

/* ---- the physics layer owns these transforms while the pointer is on them ----
   The tilt carries its own perspective() inside the transform, so no parent
   perspective and no preserve-3d: both would stack a second projection and
   promote a paint layer the page does not need. */
.vert:hover,.prod:hover{transform:none}          /* JS drives the lift now, with mass */
@media (prefers-reduced-motion:reduce){
  .vert,.prod,.aic{transform:none!important}
}