/* Intro (SPEC §4), non-critical part. The first-frame rules (#intro, .intro-mark, .intro-line,
   the rotation keyframes, html.intro-run / skip-intro / is-frozen / boot-failed) live in the
   critical block of base.css. Palette tokens only. */

/* The spine stays out of sight (and out of the tab order) until its draw-in. */
html.intro-run #spine { visibility: hidden; }

/* While the intro runs the first gesture skips it instead of scrolling or zooming the page. */
html.intro-live,
html.intro-live body { overscroll-behavior: none; }
html.intro-live body { touch-action: none; }

/* ---- macro HUD: grade ticker + live readout, bottom left, above the GL canvas.
   It sits on a slip of the page's own paper: over the macro's 8B hair the mono would vanish, over
   blank paper the slip does. The padding hangs outside the grid margin, so the text keeps its place. */
.intro-hud {
  position: fixed;
  left: 48px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  max-width: calc(100vw - 96px);
  margin: 0 0 -6px -10px;
  padding: 6px 12px 6px 10px;
  background: var(--paper);
  pointer-events: none;
  contain: layout paint style;
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 400;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--graphite);
}
.intro-ticker,
.intro-readout { margin: 0; }
.intro-ticker {
  font-size: 11px;
  line-height: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.intro-tk,
.intro-sep { color: var(--2h); }
.intro-tk { transition: color 160ms var(--ease-tone, cubic-bezier(.3, 0, .2, 1)); }
.intro-tk.is-lit { color: var(--ink); }
.intro-readout {
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}

/* ---- header hairline overlay (only when the header draws its rule as a border) */
.intro-rule {
  position: fixed;
  z-index: 51;
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---- crop marks registering the plate at the GL → DOM handoff; leave on the first scroll */
.intro-marks {
  position: absolute;
  z-index: 45;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

/* ---- "↓ n more" fallback, used only when the sheet does not render its own .s-more */
.intro-more {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 16px;
  font-feature-settings: "tnum";
  color: var(--graphite);
}
.intro-more-text { white-space: nowrap; }
.intro-more-line {
  display: block;
  width: 1px;
  height: 40px;
  background: var(--ink);
  transform-origin: 50% 0;
}

/* ---- grid margins (§5.3) */
@media (max-width: 1439px) {
  .intro-hud { left: 40px; max-width: calc(100vw - 80px); }
}
@media (max-width: 1023px) {
  .intro-hud { left: 32px; max-width: calc(100vw - 64px); }
}
@media (max-width: 699px) {
  .intro-hud {
    left: calc(16px + env(safe-area-inset-left, 0px));
    max-width: calc(100vw - 32px);
    margin-left: -8px;
    padding-left: 8px;
  }
  .intro-readout { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-tk { transition: none; }
}