/* ==========================================================================
   Stage — fixed cinematic backdrop. A <canvas> renders an image sequence
   that scrubs on scroll (Apple-style). Monochrome grade keeps white text
   legible over the bright interior footage.
   ========================================================================== */

.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-bg-deep);
}

.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.06);
  will-change: transform;
  /* Pull the footage toward the monochrome brand and protect legibility */
  filter: grayscale(1) contrast(1.06) brightness(0.78);
}

/* Tonal grade + legibility scrim above the footage */
.stage__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      oklch(8% 0 0 / 0.74) 0%,
      oklch(8% 0 0 / 0.42) 26%,
      oklch(8% 0 0 / 0.46) 62%,
      oklch(8% 0 0 / 0.90) 100%),
    radial-gradient(115% 80% at 50% 38%, transparent 48%, oklch(8% 0 0 / 0.7) 120%);
}

/* Loader while the sequence preloads */
.stage__loader {
  position: fixed;
  left: 50%;
  bottom: clamp(1.5rem, 5vh, 3rem);
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-mute);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.stage__loader[data-done] { opacity: 0; pointer-events: none; }
.stage__loader-bar {
  width: 120px; height: 2px;
  background: var(--color-line);
  border-radius: 2px;
  overflow: hidden;
}
.stage__loader-fill {
  display: block; height: 100%; width: 0%;
  background: var(--color-accent);
  transition: width 120ms linear;
}

.content { position: relative; z-index: 10; }

/* ---- Scroll progress rail (right edge) ---- */
.progress {
  position: fixed;
  top: 50%;
  right: clamp(0.9rem, 0.4rem + 1vw, 1.8rem);
  transform: translateY(-50%);
  z-index: 80;
  width: 2px;
  height: clamp(120px, 22vh, 240px);
  background: var(--color-line);
  border-radius: 2px;
  overflow: hidden;
}
.progress__fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0%;
  background: var(--color-accent);
}

@media (max-width: 640px) { .progress { display: none; } }

/* ---- Scroll cue in the hero ---- */
.scroll-cue {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-mute);
  z-index: 12;
}
.scroll-cue__line {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, var(--color-accent), transparent);
  transform-origin: top;
  animation: cueDrop 2.2s var(--ease-in-out) infinite;
}
@keyframes cueDrop {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}