/* motion layer (2026 refresh): smooth scroll, rising headings, hero parallax, reveals.
   Uses the site's own fonts and black/white brand. Everything here is skipped for reduced motion. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* hero: copy drifts up and fades as you scroll away; the photo eases in */
.mo .hero__copy{will-change:transform,opacity}
.mo .hero__bg{will-change:transform}

/* section headings rise word by word */
.rise .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.rise .w>span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--i)*60ms)}
.rise.in .w>span{transform:none}

/* blocks fade up as they arrive */
.mo .up{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .9s cubic-bezier(.23,1,.32,1);transition-delay:var(--d,0ms)}
.mo .up.in{opacity:1;transform:none}

/* what we build: window and text slide in from their own side */
.mo .build__row .build__win{transition:transform 1.1s cubic-bezier(.23,1,.32,1),opacity .8s ease}
.mo .build__row:not(.in) .build__win{opacity:0;transform:translateX(-60px)}
.mo .build__row:nth-child(even):not(.in) .build__win{transform:translateX(60px)}
/* phones: rise from below instead of the side, so nothing sticks out past the screen */
@media (max-width:760px){.mo .build__row:not(.in) .build__win,.mo .build__row:nth-child(even):not(.in) .build__win{transform:translateY(40px)}}

/* what we build: cards stack on wide screens (motion.js adds .stack) */
.stack .build__row{position:sticky;top:calc(96px + var(--i,0) * 22px);will-change:transform}
.stack .build{gap:clamp(48px,8vh,96px)}
.mo .samples .track{will-change:transform}

@media(prefers-reduced-motion:reduce){.rise .w>span{transform:none;transition:none}}