/* Motion layer. Everything here is progressive: without JS (no .js class) or with reduced motion, content shows normally. */

/* headline line reveals (masked slide-up, Lunchline hero) */
.split-lines .ln{display:block;overflow:hidden;padding-bottom:.06em}
.js .split-lines .ln > span{display:inline-block;transform:translateY(108%);transition:transform 1.15s cubic-bezier(.2,.75,.1,1)}
.js .split-lines .ln:nth-child(2) > span{transition-delay:.12s}
.js .split-lines .ln:nth-child(3) > span{transition-delay:.24s}
.js.loaded .split-lines .ln > span{transform:none}

/* hero intro */
.js .hero-label,.js .hero-row,.js .hero-bar{opacity:0;transform:translateY(18px);transition:opacity .9s ease .45s,transform .9s cubic-bezier(.2,.75,.1,1) .45s}
.js .hero-bar{transition-delay:.7s}
.js.loaded .hero-label,.js.loaded .hero-row,.js.loaded .hero-bar{opacity:1;transform:none}
.slide{transition:opacity .6s ease}
.slide[hidden]{display:block;visibility:hidden;opacity:0;position:absolute;inset:0 auto auto 0}
.hero-bar button[aria-selected=true] .prog{animation:kh-prog var(--dur,7s) linear forwards}
.hero.paused .hero-bar button[aria-selected=true] .prog{animation-play-state:paused}
@keyframes kh-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* scroll reveals (DVO: 0.8s rise + fade) */
.js [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.75,.1,1)}
.js [data-reveal].in{opacity:1;transform:none}

/* chalkboard writes itself, line by line */
.js .chalk .write{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.45,.05,.3,1)}
.js .chalk.in .write{clip-path:inset(0 0 0 0)}

/* parallax + zoom hooks (values set by JS) */
[data-parallax]{transform:translate3d(0,var(--py,0px),0) rotate(1.5deg)}
.bio-grid [data-parallax]{transform:translate3d(0,var(--py,0px),0) rotate(-1deg)}

/* bio card slide-in */
.biocard{animation:kh-card .5s cubic-bezier(.2,.75,.1,1)}
@keyframes kh-card{from{opacity:0;margin-top:24px}to{opacity:1;margin-top:0}}

/* page wipe (DVO) */
.wipe{position:fixed;inset:0;z-index:200;background:var(--ink);transform:translateY(101%);pointer-events:none;visibility:hidden}
.wipe.go,.wipe-arrive .wipe{visibility:visible}
.wipe.done{visibility:hidden!important}
.wipe.go{transform:translateY(0);transition:transform .55s cubic-bezier(.7,0,.3,1)}
.wipe-arrive .wipe{transform:translateY(0)}
.wipe-arrive.loaded .wipe{transform:translateY(-101%);transition:transform .7s cubic-bezier(.7,0,.3,1) .05s}

/* mobile: tag sits over the bottom of the photo, card below */
@media (max-width:760px){
  .meet .tag{position:relative;order:2;left:auto;top:auto;bottom:auto;margin:-70px 0 26px var(--g);align-self:flex-start}
  .meet .biocard{order:3}
}

@media (prefers-reduced-motion:reduce){
  .js .split-lines .ln > span,.js .hero-label,.js .hero-row,.js .hero-bar,.js [data-reveal]{transform:none!important;opacity:1!important;transition:none!important}
  .js .chalk .write{clip-path:none;transition:none}
  .hero-media img{transition:opacity .01s!important;transform:none!important}
  .wipe{display:none}
  [data-parallax]{transform:rotate(1.5deg)}
  .hero-bar .prog{display:none}
}