/* Dreadnought — site styles
   Layer 1: reset, base, type scale, ornaments. Tokens live in src/tokens.css. */

/* ---------------------------------------------------------------- reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--signal);
  text-decoration: none;
}

/* No italics anywhere: emphasis is weight 600 or Foam against Mist. */
i, em, cite, address, dfn, var {
  font-style: normal;
  font-weight: 600;
}

/* ---------------------------------------------------------------- base */

body {
  background: var(--abyss);
  color: var(--foam);
  font: 400 var(--fs-body) / var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--signal-deep);
  color: var(--abyss);
}

:focus-visible {
  outline: var(--hairline) solid var(--signal);
  outline-offset: 3px;
  box-shadow: 0 0 24px var(--signal-glow);
}

/* ---------------------------------------------------------- type scale */

/* Only display-xl and h2 appear in this prototype; the rest of the scale is in
   docs/design-spec.md, added when a page needs it. */
.display-xl,
.h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--foam);
}

.display-xl {
  font-weight: 700;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
}

.h2 {
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.lead {
  font: 400 var(--fs-lead) / var(--lh-lead) var(--font-sans);
  color: var(--mist);
  max-width: var(--measure);
}

.caption {
  font: 400 var(--fs-caption) / var(--lh-caption) var(--font-mono);
  color: var(--steel);
}

.label {
  font: 500 var(--fs-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--steel);
}

.readout {
  font: 500 var(--fs-readout) / var(--lh-readout) var(--font-mono);
  letter-spacing: var(--tr-readout);
  color: var(--foam);
}

/* ---------------------------------------------------------- ornaments */

/* Eyebrow: one per section, opens with `//`, a Signal square or a two-digit index. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font: 500 var(--fs-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--signal);
}

.eyebrow__square {
  width: var(--space-8);
  height: var(--space-8);
  background: var(--signal);
  flex: none;
}

.eyebrow__sep {
  color: var(--steel);
}

/* Leading rule (`— 01 / VANGUARD`), trailing rule for the right-aligned stage 02
   (`02 / TECHNOLOGY —`), and the both-sides variant used by stage 04. */
.eyebrow--rule::before,
.eyebrow--rule-end::after,
.eyebrow--rules::before,
.eyebrow--rules::after {
  content: "";
  width: var(--space-24);
  height: var(--hairline);
  background: var(--signal);
  flex: none;
}

/* ================================================================ layer 2
   Navigation, hero. Desktop-first at 1440; holds at 1280 and 1920.
   ======================================================================= */

.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: 200;
  padding: var(--space-8) var(--space-12);
  background: var(--hull);
  border: var(--hairline) solid var(--seam);
  color: var(--signal);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* ----------------------------------------------------------------- nav */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--hull);
  border-bottom: var(--hairline) solid var(--seam);
}

/* Over the film: Hull at 92% with a blur behind it. */
.nav--over-film {
  background: rgba(13, 20, 27, .92);
  background: color-mix(in srgb, var(--hull) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  color: var(--signal);
}

.nav__mark {
  flex: none;
  color: var(--signal);
}

.nav__wordmark {
  font: 700 20px/1 var(--font-display);
  letter-spacing: var(--tr-wordmark);
  text-transform: uppercase;
  color: var(--foam);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.nav__links a {
  position: relative;
  padding: var(--space-8) 0;
  font: 500 var(--fs-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--steel);
  transition: color var(--dur-fast) var(--ease);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hairline);
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--foam);
}

.nav__links a:hover::after,
.nav__links a:focus-visible::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  padding: calc(var(--nav-h) + var(--space-section)) var(--gutter) var(--space-64);
  overflow: hidden;
}

/* Faint 1px Seam grid on a 100px module over Abyss. */
.hero__grid {
  position: absolute;
  inset: 0;
  opacity: .26;
  background-image:
    linear-gradient(to right, var(--seam) 1px, transparent 1px),
    linear-gradient(to bottom, var(--seam) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px;
  background-position: var(--gutter) var(--nav-h);
  pointer-events: none;
}

/* One thin vertical circuit trace with a 45° jog and a 4px node. */
.hero__trace {
  position: absolute;
  top: var(--nav-h);
  right: 306px;
  color: var(--seam);
  pointer-events: none;
}

.hero__trace-node {
  fill: var(--steel);
}

.hero__eyebrow {
  position: relative;
}

.hero__headline {
  position: relative;
  margin-top: var(--space-24);
}

.hero__lead {
  position: relative;
  margin-top: var(--space-48);
}

/* ------------------------------------------------------ circuit divider */

.circuit {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 16px;
  color: var(--seam);
}

.circuit--signal {
  color: var(--signal);
}

.circuit__line {
  height: var(--hairline);
  background: currentColor;
  flex: 50 1 0;
}

.circuit__line--raised {
  margin-bottom: var(--space-8);
  flex: 49 1 0;
}

.circuit .circuit__line:last-child {
  flex: 42 1 0;
}

.circuit__node {
  flex: none;
  width: var(--space-4);
  height: var(--space-4);
  margin-bottom: -1.5px;
  background: currentColor;
}

.circuit__jog {
  flex: none;
  color: inherit;
}

.hero__divider {
  position: absolute;
  left: 0;
  right: 0;
  /* 68% matches `Opening hero · 1440` at 900px tall; the floor keeps the line
     clear of the lead paragraph on shorter viewports. */
  top: max(68%, 580px);
  opacity: .8;
}

/* -------------------------------------------------------- hero footings */

.hero__foot {
  position: absolute;
  left: var(--gutter);
  bottom: var(--space-64);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__bracket {
  color: var(--seam);
  margin-bottom: var(--space-4);
  margin-left: -2px;
}

.hero__bracket-node {
  fill: var(--steel);
}

.hero__foot .caption + .caption {
  margin-top: var(--space-8);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-64);
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--steel);
  transition: color var(--dur-fast) var(--ease);
}

.hero__scroll svg {
  color: var(--signal);
}

.hero__scroll:hover {
  color: var(--foam);
}

/* ---------------------------------------------------------- stage rail */

.stage-rail {
  position: fixed;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  pointer-events: none;
}

.stage-rail ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.stage-rail__item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-12);
  font: 500 var(--fs-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--steel);
}

/* Spec: inactive tick 12px in Signal-deep, active 24px in Signal. */
.stage-rail__tick {
  flex: none;
  width: 12px;
  height: var(--hairline);
  background: var(--signal-deep);
  transition: width var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

/* The hero rail is static: every stage shows its name and index. It sits with
   the headline, as in `Opening hero · 1440`, not on the vertical centre. */
.stage-rail--hero {
  position: absolute;
  top: 30%;
}

/* ================================================================ layer 3
   Film · scroll-scrubbed. Scroll position drives the playhead directly:
   src/film.js maps scroll progress within the section to the video's current
   time every frame (seeking, never playing), and writes `data-active-stage`
   on `.film` and the `--playhead` custom property (0..1) to match.
   ======================================================================= */

.film {
  --playhead: 0;
  position: relative;
  height: var(--film-scroll);
  background: var(--abyss);
}

.film__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.film__video,
.film__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film__still {
  display: none;
}

.film__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  pointer-events: none;
}

/* ------------------------------------------------------------ film copy */

.film__copy {
  position: absolute;
  left: var(--gutter);
  right: var(--rail-clear);
  bottom: var(--space-section);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity var(--dur-copy) var(--ease),
    transform var(--dur-copy) var(--ease);
}

.film[data-active-stage="1"] .film__copy[data-stage="1"],
.film[data-active-stage="2"] .film__copy[data-stage="2"],
.film[data-active-stage="3"] .film__copy[data-stage="3"],
.film[data-active-stage="4"] .film__copy[data-stage="4"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.film__copy .display-xl {
  margin-top: var(--space-24);
}

/* Right-aligned bottom-right, per `Film · 02`. Wider right inset than the base:
   without the lead paragraph the block sits lower, and its eyebrow would
   otherwise land on the stage rail's active label. */
.film__copy--right {
  right: var(--rail-clear-right);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.film__copy--centre {
  right: var(--gutter); /* centred, so it ignores the rail clearance */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --------------------------------------------------------- readout tiles */

.tiles {
  display: flex;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

.tile {
  min-width: 172px; /* the tile width in `Film · 02` and `Film · 03` */
  padding: var(--space-16);
  text-align: left;
  border: var(--hairline) solid var(--seam);
  /* Hull at 82% over the film; the flat rgba is the pre-color-mix fallback. */
  background: rgba(13, 20, 27, .82);
  background: color-mix(in srgb, var(--hull) 82%, transparent);
}

.tile .readout {
  margin-top: var(--space-16);
}

.tile--live {
  border-color: var(--signal);
}

.tile--live .label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--signal);
}

.tile__dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--signal);
}

/* Stage 04 index row */
.stage-index {
  display: flex;
  justify-content: center;
  gap: var(--space-32);
  margin-top: var(--space-32);
  font: 500 var(--fs-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--steel);
}

.stage-index .is-active {
  color: var(--signal);
}

/* ---------------------------------------------------- stage rail · film */

.stage-rail--film {
  position: absolute;
  right: var(--gutter);
  top: 50%;
}

.stage-rail--film .stage-rail__name {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.film[data-active-stage="1"] .stage-rail--film li:nth-child(1) .stage-rail__name,
.film[data-active-stage="2"] .stage-rail--film li:nth-child(2) .stage-rail__name,
.film[data-active-stage="3"] .stage-rail--film li:nth-child(3) .stage-rail__name,
.film[data-active-stage="4"] .stage-rail--film li:nth-child(4) .stage-rail__name {
  opacity: 1;
}

.film[data-active-stage="1"] .stage-rail--film li:nth-child(1),
.film[data-active-stage="2"] .stage-rail--film li:nth-child(2),
.film[data-active-stage="3"] .stage-rail--film li:nth-child(3),
.film[data-active-stage="4"] .stage-rail--film li:nth-child(4) {
  color: var(--signal);
}

.film[data-active-stage="1"] .stage-rail--film li:nth-child(1) .stage-rail__tick,
.film[data-active-stage="2"] .stage-rail--film li:nth-child(2) .stage-rail__tick,
.film[data-active-stage="3"] .stage-rail--film li:nth-child(3) .stage-rail__tick,
.film[data-active-stage="4"] .stage-rail--film li:nth-child(4) .stage-rail__tick {
  width: 24px;
  background: var(--signal);
}

/* -------------------------------------------------------------- playhead */

.playhead {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--space-48);
}

.playhead__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-16);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.playhead__percent {
  color: var(--signal);
}

/* 10px tall so the boundary ticks can rise off the 1px track. */
.playhead__track {
  position: relative;
  height: 10px;
}

.playhead__line,
.playhead__fill,
.playhead__tick {
  position: absolute;
  bottom: 0;
}

.playhead__line {
  left: 0;
  right: 0;
  height: var(--hairline);
  background: var(--seam);
}

/* Updated every frame by src/film.js — deliberately untransitioned. */
.playhead__fill {
  left: 0;
  right: 0;
  height: 2px;
  background: var(--signal);
  transform: scaleX(var(--playhead));
  transform-origin: left center;
}

.playhead__tick {
  width: var(--hairline);
  height: 10px;
  background: var(--seam);
}

/* -------------------------------------------------------------- anchors */

/* Scroll targets for the nav links, positioned inside
   `.film` at the scroll offset of each stage's representative frame — the frame
   its still was cut from, so the link lands on the scene it names rather than on
   the cut into it. `width/height: 1px` plus `overflow: hidden` keeps each one a
   valid, focusable scroll target without `visibility: hidden`, which would
   remove it from that role. The `calc` defaults below assume even quarters of
   the scrollable range; src/film.js repositions them at the real still-frame
   times (`ANCHOR_TIMES`) once the film's duration is known. */
.film__anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.film__anchor[data-stage="1"] { top: 0; }
.film__anchor[data-stage="2"] { top: calc((100% - 100vh) * 0.3116); } /* 4.6 s / 14.76 s */
.film__anchor[data-stage="3"] { top: calc((100% - 100vh) * 0.5960); } /* 8.8 s */
.film__anchor[data-stage="4"] { top: calc((100% - 100vh) * 0.8466); } /* 12.5 s */

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .film__video {
    display: none;
  }

  /* Crossfade only: the copy keeps its opacity transition but loses the 8px rise. */
  .film__copy {
    transform: none;
    transition: opacity var(--dur-copy) var(--ease);
  }

  .film__still {
    display: block;
    opacity: 0;
    transition: opacity var(--dur-copy) var(--ease);
  }

  .film[data-active-stage="1"] .film__still[data-stage="1"],
  .film[data-active-stage="2"] .film__still[data-stage="2"],
  .film[data-active-stage="3"] .film__still[data-stage="3"],
  .film[data-active-stage="4"] .film__still[data-stage="4"] {
    opacity: 1;
  }
}

/* ================================================================ layer 4
   Closing section and footer.
   ======================================================================= */

.closing {
  position: relative;
  padding: var(--space-section) var(--gutter);
  background: var(--abyss);
}

.closing__divider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.closing__headline {
  margin-top: var(--space-24);
  max-width: 900px;
}

.closing__lead {
  margin-top: var(--space-32);
}

.closing__tiles {
  margin-top: var(--space-64);
}

.closing__tiles .tile {
  min-width: 220px; /* wider than the film tiles: two across the content width */
  background: var(--hull);
}

/* -------------------------------------------------------------- footer */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-32) var(--gutter);
  background: var(--hull);
  border-top: var(--hairline) solid var(--seam);
}

.footer .caption {
  text-transform: uppercase;
  letter-spacing: .08em;
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--signal);
}

.footer__wordmark {
  font: 700 var(--fs-body) / 1 var(--font-display);
  letter-spacing: var(--tr-wordmark);
  text-transform: uppercase;
  color: var(--foam);
}