/* =========================================================================
   LG Studio homepage · Scroll motion (pairs with js/motion.js)
   Curves borrowed from The Reframe:
     --mo-expo  ≈ outExpo   (hero headline lines)
     --mo-out   ≈ outCubic  (body, CTA, footer fade-ins)
     --mo-io    ≈ inOutCubic (construction guides)
   ========================================================================= */
:root{
  --mo-expo:cubic-bezier(.16,1,.3,1);
  --mo-out:cubic-bezier(.33,1,.68,1);
  --mo-io:cubic-bezier(.65,0,.35,1);
}

/* Lenis */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* Native anchor fallback (touch): clear the sticky belt */
@media (min-width:721px){ .premise,main > .sec{scroll-margin-top:66px} }

/* Headlines rise out of a mask, like the hero lines */
html.mo [data-mo="rise"]{
  clip-path:inset(0 0 100% 0);
  transform:translateY(.42em);
  transition:clip-path 1.15s var(--mo-expo) var(--d,0ms),transform 1.15s var(--mo-expo) var(--d,0ms);
  will-change:transform,clip-path;
}
html.mo [data-mo="rise"].in{clip-path:inset(-.25em -.25em -.25em -.25em);transform:none}

/* Labels, copy, cards: the hero's body/CTA lift (+12px, outCubic) */
html.mo [data-mo="lift"]{
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--mo-out) calc(var(--d,0ms) + 120ms),transform .9s var(--mo-out) calc(var(--d,0ms) + 120ms);
}
html.mo [data-mo="lift"].in{opacity:1;transform:none}

/* Hairlines draw like construction guides */
html.mo .mo-rule,html.mo .mo-rule-b{position:relative}
html.mo .mo-rule{border-top-color:transparent !important}
html.mo .mo-rule-b{border-bottom-color:transparent !important}
html.mo .mo-rule::before,html.mo .mo-rule-b::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.4s var(--mo-io) calc(var(--d,0ms) + 60ms);pointer-events:none;
}
html.mo .mo-rule::before{top:-1px}
html.mo .mo-rule-b::after{bottom:-1px}
html.mo .mo-rule.in::before,html.mo .mo-rule-b.in::after{transform:scaleX(1)}
/* A card and its meta both reveal; let the rule trail the card */
html.mo .card .meta.mo-rule::before{transition-delay:calc(var(--d,0ms) + 380ms)}

/* Photographs develop, like "Made real" (1.06 → 1 in the intro) */
html.mo [data-mo="develop"]{opacity:0;transition:opacity 1.4s var(--mo-out)}
html.mo [data-mo="develop"] img,html.mo [data-mo="develop"] video{transform:scale(1.08);transition:transform 1.9s var(--mo-expo)}
html.mo [data-mo="develop"].in{opacity:1}
html.mo [data-mo="develop"].in img,html.mo [data-mo="develop"].in video{transform:none}
html.mo .card:hover [data-mo="develop"].in img{transform:scale(1.02)}

/* Blueprint band behind 01 */
html.mo [data-mo="band"]{opacity:0;transform:translateY(24px);transition:opacity 2s var(--mo-out),transform 2s var(--mo-expo)}
html.mo [data-mo="band"].in{opacity:.9;transform:none}

/* Hero exit: only the copy is promoted. Promoting .rf would give it its own stacking
   context and bury the intro's Skip button under the (still invisible) nav. */
.hero .hero-copy{will-change:transform}
/* While the intro plays, the real UI is invisible: it must not catch clicks meant for Skip */
.hero.rf-playing .nav,.hero.rf-playing .hero-copy,.hero.rf-playing .hero-foot,
html.rf-intro .hero .nav,html.rf-intro .hero .hero-copy,html.rf-intro .hero .hero-foot{pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html.mo [data-mo]{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
}

/* Keep the roads' hover nudge alongside the reveal */
html.mo .road[data-mo="lift"]{transition:opacity .9s var(--mo-out) calc(var(--d,0ms) + 120ms),transform .9s var(--mo-out) calc(var(--d,0ms) + 120ms),padding .3s}