/* ═══════════════════════════════════════════════════════════ */
/* CINEMATIC.CSS — The scroll-driven background engine        */
/* One continuous transition: ink → ivory across the page     */
/* ═══════════════════════════════════════════════════════════ */

/* Body background is controlled entirely by JS via CSS var */
body {
  background-color: var(--ink); /* JS overrides this on scroll */
  transition: none; /* JS handles all transitions via GSAP */
}

/* All sections are transparent — body color shows through */
.s1, .s2, .s3, .s4, .s5, .s6,
.s8, .s9 {
  background: transparent;
}

/* Section 7 always stays dark — it's the dramatic contrast moment */
.s7 {
  background: var(--ink);
}

/* The body's custom property — GSAP writes this */
body {
  --scroll-bg: #0A0A0A;
}

/* ── CINEMATIC DETAILS ───────────────────────────────────── */
#lightbeam-cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998; /* Below playhead, above content */
  /* Soft, large radial gradient tracking --mouse-x/y */
  background: radial-gradient(circle 500px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), rgba(255, 255, 255, 0.04), transparent 80%);
  opacity: 1; /* JS controls this */
  transition: opacity 0.3s ease;
  mix-blend-mode: screen; /* Helps illuminate without washing out text */
}

#cinematic-playhead {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%; /* JS controls this */
  background-color: var(--turmeric);
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
}