/* KSF motion layer — GSAP + ScrollTrigger + Lenis on top of the existing homepage.
   Everything is scoped to html.ksf-motion, which the <head> snippet only adds when
   motion is allowed; if GSAP fails to load, the class is removed and the page falls
   back to its original CSS reveals. */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* GSAP drives the hero intro instead of the CSS fadeUp keyframes */
.ksf-motion .hero-l > *,
.ksf-motion .hero-r { animation: none; }
.ksf-motion:not(.ksf-motion-ready) .hero-l > *,
.ksf-motion:not(.ksf-motion-ready) .hero-r { visibility: hidden; }
.ksf-motion .hero-r picture { position: absolute; inset: 0; display: block; will-change: transform; }

/* .rv elements wait for GSAP; their own transitions come back once revealed (.on) */
.ksf-motion .rv:not(.on) { transition: none; }

/* split-text masks: room for descenders (y, g, comma) */
.ksf-motion .km-mask { padding-bottom: .14em; margin-bottom: -.14em; }

/* experience timeline line draws in */
.ksf-motion .exp-grid::before { transform: scaleX(var(--km-line, 1)); transform-origin: 0 50%; }

/* reading progress */
.km-progress { position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--ink, #0A0908); transform-origin: 0 50%; transform: scaleX(0); z-index: 10001; pointer-events: none; }