/* ==========================================================================
   stage.css — the fixed light rig behind every chapter.

   Two wash layers are cross-faded by journey.js so each chapter can have its
   own base colour, key light, fill and rim. A separate night layer is driven
   by scroll progress inside chapters that move from day into evening.
   ========================================================================== */

:root {
  --stage-base: #0d0c0b;
  --stage-key: #8a5a2b;
  --stage-fill: #241a13;
  --stage-rim: #d7b482;
}

.stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-stage);
  overflow: hidden;
  pointer-events: none;
  background: var(--stage-base);
}

.stage__wash {
  position: absolute;
  inset: -12%;
  opacity: 0;
  transition: opacity var(--dur-scene) var(--ease-soft);
  will-change: opacity;
  background:
    radial-gradient(
      92% 74% at 16% 6%,
      color-mix(in srgb, var(--stage-key) 82%, transparent) 0%,
      color-mix(in srgb, var(--stage-key) 24%, transparent) 38%,
      transparent 68%
    ),
    radial-gradient(
      84% 66% at 84% 96%,
      color-mix(in srgb, var(--stage-fill) 88%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      56% 46% at 92% 2%,
      color-mix(in srgb, var(--stage-rim) 42%, transparent) 0%,
      transparent 64%
    ),
    linear-gradient(178deg, var(--stage-base) 0%, var(--stage-base) 100%);
}

.stage__wash.is-on { opacity: 1; }

/* Night overlay: opacity is written directly from scroll progress. */
.stage__night {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #0b1622;
  will-change: opacity;
}

.stage__beam {
  position: absolute;
  inset: -24%;
  opacity: 0.16;
  background: linear-gradient(
    104deg,
    transparent 34%,
    color-mix(in srgb, var(--stage-rim) 30%, transparent) 47%,
    color-mix(in srgb, var(--stage-rim) 8%, transparent) 55%,
    transparent 68%
  );
  animation: beam-drift 48s ease-in-out infinite alternate;
  transition: opacity var(--dur-scene) var(--ease-soft);
  will-change: transform;
}

.stage__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("../assets/img/texture/grain.svg");
  background-size: 220px 220px;
  background-repeat: repeat;
  transition: opacity var(--dur-scene) var(--ease-soft);
}

.stage__vignette {
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background: radial-gradient(
    118% 92% at 50% 42%,
    transparent 46%,
    rgba(8, 6, 4, 0.55) 82%,
    rgba(8, 6, 4, 0.92) 100%
  );
  transition: opacity var(--dur-scene) var(--ease-soft);
}

@keyframes beam-drift {
  0%   { transform: translate3d(-7%, 0, 0) rotate(-1.2deg); }
  100% { transform: translate3d(7%, 1.5%, 0) rotate(1.2deg); }
}

/* No JavaScript: no stage, and every chapter paints its own paper. */
html:not(.js) .stage { display: none; }

@media (prefers-reduced-motion: reduce) {
  .stage__wash { transition-duration: 0.25s; }
  .stage__beam { animation: none; }
}