/* ==========================================================================
   Story layer — chapter-based scroll narrative
   Page background repaints itself in each chapter's pigment while a fixed
   mono index ("01 / MEET ASAL") floats at the screen edge. All of this is
   progressive enhancement: html gets .story-on only when story.js boots
   (GSAP + Lenis present, no reduced-motion). Without it the page is the
   plain static site.
   ========================================================================== */

/* Body follows the chapter pigment once the story engine is driving
   --color-bg on :root. (GSAP tweens the custom property; everything that
   already reads var(--color-bg) — body, nav glass, gradient overlays —
   morphs together for free.) */
html.story-on body {
  transition: none; /* GSAP owns the interpolation, no CSS double-easing */
}

/* ── Scroll progress hairline ─────────────────────────────────────────── */
.story-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1400;
  pointer-events: none;
  display: none;
}
html.story-on .story-progress { display: block; }
/* The main.js hairline stays as the fallback when story.js aborts;
   once the story engine drives its own bar, hide the duplicate. */
html.story-on .scroll-progress { display: none; }
.story-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ── Floating chapter index (fixed, left edge) ────────────────────────── */
.story-chapter-label {
  position: fixed;
  left: var(--space-6);
  bottom: var(--space-8);
  z-index: 1300;
  pointer-events: none;
  display: none;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
html.story-on .story-chapter-label { display: flex; }
.story-chapter-label.visible {
  opacity: 1;
  transform: translateY(0);
}
.story-chapter-num {
  color: var(--color-accent);
  transition: color 900ms var(--ease-in-out);
}
.story-chapter-num::after {
  content: ' /';
  color: var(--color-muted);
}

/* Mobile: bottom tab bar owns that zone — hide the floating index */
@media (max-width: 767px) {
  html.story-on .story-chapter-label { display: none; }
}

/* ── Mono meta labels (chapter eyebrows, stats, captions) ─────────────── */
.mono-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.mono-label--accent { color: var(--color-accent); }

/* ── Painted hero canvas ──────────────────────────────────────────────── */
/* Mounted inside .hero-video-bg behind the existing overlay/vignette.
   The CSS gradient that already paints .hero-video-bg stays underneath as
   the permanent fallback; the canvas fades in only after its first
   successful WebGL frame. */
.paint-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.paint-canvas.on { opacity: 1; }

/* ── Scene media: GPU hint while scrub-parallax runs ──────────────────── */
html.story-on .preview-image img,
html.story-on .about-card img {
  will-change: transform;
}

/* ── Reduced motion: the engine never boots, but belt-and-braces ──────── */
@media (prefers-reduced-motion: reduce) {
  .story-progress,
  .story-chapter-label { display: none !important; }
  .paint-canvas { display: none !important; }
}