/* ─────────────────────────────────────────────────────────────
   The stage: one fixed viewport behind the page that the film plays on.

   .stage__poster   the opening frame as a plain image (first paint, no-JS)
   .stage__canvas   where sequence.js paints the frame for the current scroll position
   .stage__scrim    darkening that keeps type legible over the picture
   ───────────────────────────────────────────────────────────── */

.stage {
  position: fixed;
  inset: 0;
  height: 100lvh;              /* large viewport: no jump when mobile toolbars collapse */
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
}

.stage__poster img,
.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stage__poster img { object-fit: cover; object-position: 68% 50%; }
@media (max-aspect-ratio: 4/5) {
  .stage__poster img { object-position: 50% 50%; }
}

/* The canvas stays invisible until it has something to show. */
.stage__canvas { opacity: 0; }
.stage__canvas.is-ready { opacity: 1; }

/* Landscape: copy sits on the left, so darken that side and the top/bottom edges. */
.stage__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 9, 8, 0.6) 0%, rgba(10, 9, 8, 0) 18%, rgba(10, 9, 8, 0) 80%, rgba(10, 9, 8, 0.42) 100%),
    linear-gradient(90deg, rgba(10, 9, 8, 0.86) 0%, rgba(10, 9, 8, 0.62) 30%, rgba(10, 9, 8, 0.14) 56%, rgba(10, 9, 8, 0) 70%);
}

/* Portrait: the structure fills the frame; each panel brings its own scrim (see ascent.css),
   so the stage only protects the navigation. */
@media (max-aspect-ratio: 4/5), (max-width: 899px) {
  .stage__scrim {
    background: linear-gradient(180deg, rgba(10, 9, 8, 0.7) 0%, rgba(10, 9, 8, 0) 16%);
  }
}

/* Wide screens carry the elevation rail on the right edge: give it a dark margin to sit on. */
@media (min-width: 1200px) and (min-height: 620px) {
  .js .stage__scrim::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 16%;
    background: linear-gradient(270deg, rgba(10, 9, 8, 0.62) 0%, rgba(10, 9, 8, 0.3) 45%, rgba(10, 9, 8, 0) 100%);
  }
}

/* ── Elevation rail ─────────────────────────────────────────── */

.rail {
  position: fixed;
  right: calc(var(--gutter) * 0.5);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;                  /* above the stage, below the sections that follow the film */
  display: none;
  flex-direction: column;
  gap: 1.1rem;
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.rail li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  transition: color 0.5s linear;
}
.rail li span { opacity: 0.6; }
.rail li::after {
  content: "";
  width: 0.75rem;
  height: 1px;
  background: currentColor;
  transition: width 0.5s linear;
}
.rail li.is-current { color: var(--accent); }
.rail li.is-current::after { width: 2rem; }

@media (min-width: 1200px) and (min-height: 620px) {
  .js .rail { display: flex; }
}