/* The landing's page modes (scroll.js sets html[data-page]).
   page:  the document is five screens tall behind the fixed page, so the
          browser has a real scrollbar and position; one gesture moves it one
          screen while the render plays the stage change.
   scrub: the same five screens, scrolled natively; the craft moves exactly as
          far as the page has scrolled (?mode=scrub, v4).
   fixed: the original one-screen page; a gesture only changes the stage.
   The layout of the page itself (masthead, figures, Pre-order) is styles.css
   and is not touched here; nothing below paints a box, a title or a label on
   the landing. v3 (Claude, 4 Oct 2026); v4 adds scrub. */

html[data-page="page"],
html[data-page="scrub"] {
  height: auto;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
}
html[data-page="page"] {
  touch-action: none; /* scroll.js owns the gesture while the landing is up */
}
html[data-page="page"] body,
html[data-page="scrub"] body {
  height: auto;
  min-height: 100%;
  overflow: visible;
}
html[data-page="page"] .page,
html[data-page="scrub"] .page {
  position: fixed;
  inset: 0;
  width: 100%;
}
html[data-page="page"] .landing-story,
html[data-page="scrub"] .landing-story {
  position: relative;
  z-index: 0;
  pointer-events: none;
}
html[data-page="page"] .flight-stage,
html[data-page="scrub"] .flight-stage {
  height: 100vh;
  height: 100svh;
}
/* Scrub: the track is --scrub-screens screens tall in all (scroll.js sets it: the
   flight's length in screens, the short rest after the landing whose end opens the
   order view, and the first screen), shared by the five sections. */
html[data-page="scrub"] .flight-stage {
  height: calc(100vh * var(--scrub-screens, 8) / 5);
  height: calc(100svh * var(--scrub-screens, 8) / 5);
}
/* In scrub mode a finger on the craft must scroll the page (styles.css gives the
   craft pinch-zoom only, for the paging modes, where scroll.js reads the swipe). */
html[data-page="scrub"] .backdrop {
  touch-action: pan-y pinch-zoom;
}

html[data-page="fixed"] {
  touch-action: none;
}
html[data-page="fixed"] .landing-story {
  display: none;
}

/* The pre-order panel scrolls with the page (4 Nov 2026): the document keeps
   its scrollbar, and the panel's own content scrolls inside the panel. */
body.is-buying .footer {
  pointer-events: none;
}

/* The canvas stays hidden until its first frame; the poster shows meanwhile. */
.backdrop:not(.is-ready) .backdrop__view,
.backdrop.has-fallback .backdrop__view {
  visibility: hidden;
}

/* Stage rail: a proposal only, html[data-rail="1"] on a preview host. */
.stage-rail {
  display: none;
  position: fixed;
  right: 14px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
html[data-rail="1"] .stage-rail {
  display: flex;
}
.stage-rail i {
  display: block;
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--line);
  transition: background 220ms ease;
}
.stage-rail i.is-current {
  background: var(--ink);
}
body.is-buying .stage-rail {
  visibility: hidden;
}

.buy { z-index: 4; }
.flight-controls { z-index: 5; }
.chat { z-index: 6; }