/* ===========================================================================
   OppBox homepage · motion layer · "The Living Ledger"
   Pure GSAP + Lenis scroll-film. This file adds only choreography hooks · every token comes from site.css / DESIGN.md.
   Nothing here hides content by default: initial hidden states are set from
   JS (gsap.set), so no-JS / reduced-motion visitors get the full page.
   =========================================================================== */

/* Lenis owns scrolling when motion is on · CSS smooth scroll must yield */
html.ll-motion {
  scroll-behavior: auto;
}

/* ---------------------------------------------------------------------------
   Letterpress headline words · JS wraps each word in .ll-w
   --------------------------------------------------------------------------- */
.ll-w {
  display: inline-block;
  transform-origin: 50% 88%;
  will-change: transform, opacity;
}
.ll-line {
  display: inline-block;
}

/* ---------------------------------------------------------------------------
   Self-drawing hairline rules · injected by JS above section heads
   --------------------------------------------------------------------------- */
.ll-rule {
  display: block;
  height: 2px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  transform-origin: left center;
}
.band-dark .ll-rule,
.bridge-band .ll-rule,
.mcp-terminal .ll-rule,
.feature-chapter.ink .ll-rule {
  border-color: var(--line-dark-strong);
}

/* ---------------------------------------------------------------------------
   Hero gutter callouts · leader lines draw via CSS vars tweened from JS
   --------------------------------------------------------------------------- */
@media (min-width: 1080px) {
  html.ll-motion .hca::before {
    transform: scaleX(var(--lld, 1));
  }
  /* dots sit at the card-facing end · draw the line from the dot outward */
  html.ll-motion .hca-1::before,
  html.ll-motion .hca-3::before {
    transform-origin: left center;
  }
  html.ll-motion .hca-2::before,
  html.ll-motion .hca-4::before {
    transform-origin: right center;
  }
  html.ll-motion .hca::after {
    opacity: var(--lldot, 1);
  }
}

/* ---------------------------------------------------------------------------
   Nav underline · one sliding ink bar under the links (desktop)
   --------------------------------------------------------------------------- */
html.ll-motion .nav-links {
  position: relative;
}
.ll-nav-ink {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--on-dark);
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Magnetic CTAs · JS moves them; keep layout stable
   --------------------------------------------------------------------------- */
.ll-mag {
  will-change: transform;
}

/* Pinned sections · avoid horizontal scrollbars from wipes */
html.ll-motion body {
  overflow-x: clip;
}