:root {
  --bg: #0f0f0f;            /* updated live from JS: #0f0f0f -> #2a3429 */
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  background: var(--bg);
  overflow-x: clip;
}

body {
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Scroll track: the stage stays pinned while the track scrolls past. */
.hero {
  position: relative;
  height: 650vh;
  height: 650svh;
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero[data-ready="true"] .hero__canvas { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__canvas { transition: none; }
}

/* QA stills (?p=0.5): no transitions so captures show the settled state. */
.is-fixed .hero__canvas { transition: none !important; }

/* Lenis smooth scrolling (from lenis/dist/lenis.css, the parts this page uses). */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }

/* Once the animation has finished the shape can be dragged a little. */
.hero[data-done="true"] .hero__canvas { cursor: grab; touch-action: pan-y; }
.hero[data-drag="on"] .hero__canvas { cursor: grabbing; }