/* ============================================================
   REVOLUTION — immersive heritage storytelling section
   Pairs with assets/js/about/revolution.js. Self-contained:
   inherits design tokens from about-ardc.css, adds nothing
   global. Everything transform/opacity/filter driven → 60fps.
   ============================================================ */

.revolution {
  position: relative;
  background: var(--color-bg);
  isolation: isolate;
  --rev-p: 0;
  --rev-mod: 0;
  /* era atmosphere — overridden per [data-era] below */
  --rev-sky-a: #241a12;
  --rev-sky-b: #0a0a0f;
  --rev-sun: #ffb15e;
  --rev-tint: #7d6a4e;
  --rev-sat: 0.62;
  --rev-grain: 0.5;
}

/* — era atmosphere: vintage (warm, grainy, low-sat) → modern (cool, clean) — */
.revolution[data-era="0"], .revolution[data-era="1"] { --rev-sky-a:#2a1d12; --rev-sky-b:#0b0a0d; --rev-sun:#ffb15e; --rev-tint:#c79a63; --rev-sat:.55; --rev-grain:.62; }
.revolution[data-era="2"], .revolution[data-era="3"] { --rev-sky-a:#241b1c; --rev-sky-b:#0a0b11; --rev-sun:#ff9d6b; --rev-tint:#b7896f; --rev-sat:.72; --rev-grain:.44; }
.revolution[data-era="4"]                            { --rev-sky-a:#141d33; --rev-sky-b:#080b14; --rev-sun:#7fa2ff; --rev-tint:#6f88d8; --rev-sat:.9;  --rev-grain:.3;  }
.revolution[data-era="5"]                            { --rev-sky-a:#101a30; --rev-sky-b:#070a12; --rev-sun:#79b6ff; --rev-tint:#6ba0e8; --rev-sat:.98; --rev-grain:.22; }
.revolution[data-era="6"]                            { --rev-sky-a:#0d1a34; --rev-sky-b:#05080f; --rev-sun:#6ea0ff; --rev-tint:#7db0ff; --rev-sat:1.05;--rev-grain:.16; }

/* ── intro ─────────────────────────────────────────────── */
.rev__intro {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(6rem, 12vh, 12rem) 6vw clamp(3rem, 6vh, 6rem);
  text-align: center;
}
.rev__intro .u-overline { display: inline-block; margin-bottom: 1.4rem; }
.rev__intro-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.2rem, 5.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.rev__intro-title .line { display: block; overflow: hidden; }
.rev__intro-title .line__inner { display: block; }
.rev__intro-title em { font-style: normal; color: var(--color-brand-bright); }
.rev__intro-lead {
  max-width: 46ch;
  margin: 1.6rem auto 0;
  color: var(--color-text-muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

/* ── pinned stage ──────────────────────────────────────── */
.rev__stage { position: relative; }
.rev__viewport {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(135% 90% at 50% -25%, rgba(var(--brand-rgb), calc(.13 + var(--rev-mod) * .13)), transparent 55%),
    radial-gradient(90% 70% at 50% 120%, rgba(var(--brand-rgb), calc(.09 + var(--rev-mod) * .12)), transparent 62%),
    linear-gradient(180deg, #070a12 0%, #05070c 55%, #04050a 100%);
}

/* ── ambient background ────────────────────────────────── */
.rev__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rev__grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right, rgba(var(--brand-rgb), .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--brand-rgb), .10) 1px, transparent 1px);
  background-size: clamp(48px, 5vw, 84px) clamp(48px, 5vw, 84px);
  /* full, symmetric coverage — no horizontal drift, so no scroll position
     can ever expose a blank strip on either side */
  mask-image: radial-gradient(150% 135% at 50% 44%, #000 62%, transparent 100%);
  -webkit-mask-image: radial-gradient(150% 135% at 50% 44%, #000 62%, transparent 100%);
  opacity: calc(.26 + var(--rev-mod) * .3);
  transition: opacity .8s ease;
}
/* receding perspective floor — the museum stage */
.rev__floor {
  position: absolute; left: -30%; right: -30%; bottom: -2px; height: 48vh;
  background-image:
    linear-gradient(to right, rgba(var(--brand-rgb), .55) 1px, transparent 1px),
    linear-gradient(to top, rgba(var(--brand-rgb), .55) 1px, transparent 1px);
  background-size: 6.5% 22%;
  transform: perspective(440px) rotateX(75deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, #000, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 80%);
  opacity: calc(.1 + var(--rev-mod) * .16);
}
/* soft overhead spotlight onto the stage */
.rev__spot {
  position: absolute; left: 50%; top: -14%; width: 72vw; height: 92vh;
  transform: translateX(-50%);
  background: radial-gradient(58% 68% at 50% 0%, rgba(var(--brand-rgb), calc(.1 + var(--rev-mod) * .1)), transparent 70%);
  mix-blend-mode: screen; opacity: .85;
}
.rev__glow {
  position: absolute; left: 50%; top: 42%;
  width: 90vw; height: 90vw; max-width: 1200px; max-height: 1200px;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle, rgba(var(--brand-rgb), calc(.16 + var(--rev-mod) * .18)) 0%, transparent 60%);
  filter: blur(30px);
  transition: opacity .8s ease;
}
.rev__volumetric {
  position: absolute; inset: 0;
  /* symmetric overhead light shaft — no horizontal drift (kept balanced so
     the left never reads darker than the right) */
  background:
    conic-gradient(from 158deg at 50% -18%, transparent 0deg, rgba(var(--brand-rgb), .1) 22deg, transparent 44deg);
  mix-blend-mode: screen;
  opacity: calc(.35 + var(--rev-mod) * .4);
  animation: revBeam 16s ease-in-out infinite alternate;
}
@keyframes revBeam { 0% { opacity: calc(.28 + var(--rev-mod) * .35); } 100% { opacity: calc(.42 + var(--rev-mod) * .45); } }
.rev__scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
  opacity: .5;
  animation: revScan 6s linear infinite;
}
@keyframes revScan { to { background-position: 0 200px; } }

/* ── history rail (top) ────────────────────────────────── */
.rev__rail {
  position: absolute; left: 0; right: 0; top: clamp(4.5rem, 9vh, 7rem);
  z-index: 4;
  padding: 0 clamp(4rem, 9vw, 11rem);
}
.rev__rail-track { position: relative; height: 60px; }
.rev__rail-base {
  position: absolute; left: 0; right: 0; top: 42px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 6%, rgba(255,255,255,.14) 94%, transparent);
}
.rev__rail-base::after {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 7px;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 44px);
  opacity: .6;
}
.rev__rail-fill {
  position: absolute; left: 0; right: 0; top: 41.5px; height: 3px;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, rgba(var(--brand-rgb), .5), var(--color-brand-bright));
  box-shadow: 0 0 12px 1px rgba(var(--brand-rgb), .7);
  will-change: transform;
}
.rev__rail-line { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

.rev-node {
  position: absolute; top: 43px; transform: translate(-50%, -50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  background: none;
}
.rev-node__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-surface-2);
  border: 1.5px solid rgba(255,255,255,.28);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s ease;
  will-change: transform;
}
.rev-node__pulse {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--color-brand-bright);
  opacity: 0; transform: scale(.3); pointer-events: none;
}
.rev-node__year {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-size: .58rem; letter-spacing: .12em; color: var(--color-text-subtle);
  opacity: 0; transition: opacity .35s ease, color .35s ease; white-space: nowrap;
}
.rev-node.is-past .rev-node__dot { background: rgba(var(--brand-rgb), .5); border-color: var(--color-brand-bright); }
.rev-node.is-active .rev-node__dot {
  background: var(--color-brand-bright); border-color: #fff;
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .25), 0 0 16px 2px rgba(var(--brand-rgb), .8);
  transform: scale(1.35);
}
.rev-node.is-active .rev-node__year,
.rev-node:hover .rev-node__year { opacity: 1; color: var(--color-text); }
.rev-node:nth-child(even) .rev-node__year { top: auto; bottom: -22px; }

/* the machine that rides the rail */
.rev__car {
  position: absolute; left: var(--rvx, 0%); top: 2px;
  width: clamp(96px, 9vw, 148px); height: 56px;
  transform: translateX(-50%);
  z-index: 6; pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55));
}
.rvcar__svg { width: 100%; height: 100%; overflow: visible; }

/* ── deck (year · plate · story) ───────────────────────── */
.rev__deck {
  position: absolute; left: 0; right: 0; top: clamp(6rem, 11.5vh, 8.5rem); bottom: clamp(4rem, 7vh, 5.5rem);
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, .52fr) minmax(0, 1.85fr) minmax(0, .95fr);
  align-items: center; gap: clamp(1rem, 2.4vw, 2.5rem);
  max-width: 1840px; margin: 0 auto; padding: 0 clamp(2.75rem, 4.5vw, 5.75rem);
}

/* — giant morphing year — sits in the left rail and tucks intentionally
     behind the hero plate (the plate paints over it with its own shadow) — */
.rev__year {
  display: grid; grid-template-columns: repeat(2, auto);
  justify-items: center; justify-self: start; align-content: center;
  column-gap: 0; row-gap: 0;
  font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: clamp(3.4rem, 9vw, 10.5rem);
  line-height: 1; letter-spacing: normal;
  color: transparent; position: relative;
  transform: translate3d(calc(var(--rev-sub, 0) * -12px), 0, 0);
  will-change: transform;
}
.rev-year__d {
  /* generous padding on BOTH axes gives the clipped-text gradient room, so
     the huge glyphs are never cropped on any edge; negative margin cancels
     the padding visually to keep the 2×2 numeral tight. */
  display: inline-block; line-height: 1;
  padding: .12em .08em; margin: -.16em -.05em;
  will-change: transform, filter, opacity;
  background: linear-gradient(166deg, #ffffff 4%, var(--rev-tint) 134%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 36px rgba(var(--brand-rgb), calc(.2 + var(--rev-mod) * .55)));
}

/* — plate stack (center heritage image) — the hero — */
.rev__stagecell { position: relative; height: 100%; min-height: 0; display: grid; place-items: center; }
.rev__plate-stack {
  position: relative;
  width: 100%; aspect-ratio: 16 / 10; max-height: 90%;
  max-width: clamp(380px, 56vw, 860px);
  /* parallax + a whisper of scroll-reactive 3D yaw give the hero real
     depth. Lives on the wrapper (never on the clipped plate) so clip-path
     + transform don't share a compositing layer. */
  transform: perspective(1700px) translate3d(calc(var(--rev-sub, 0) * -24px), 0, 0) rotateY(calc(var(--rev-sub, 0) * 4deg));
  will-change: transform;
}
/* soft pedestal glow — the plate reads as lit on a museum floor */
.rev__plate-stack::after {
  content: ""; position: absolute; left: 50%; bottom: -7%;
  width: 90%; height: 15%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), calc(.2 + var(--rev-mod) * .2)), transparent 78%);
  filter: blur(16px); opacity: .75; pointer-events: none; z-index: -1;
}
.rev-plate {
  position: absolute; inset: 0;
  border-radius: 14px; overflow: hidden;
  opacity: 0; visibility: hidden;
  clip-path: inset(9% 9% 9% 9% round 14px);
  box-shadow:
    0 60px 130px -34px rgba(0, 0, 0, .92),
    0 0 0 1px rgba(255, 255, 255, .07) inset,
    0 0 70px -12px rgba(var(--brand-rgb), calc(.16 + var(--rev-mod) * .34));
  will-change: opacity, clip-path;
}
.rev-plate.is-active { opacity: 1; visibility: visible; z-index: 2; clip-path: inset(0 round 14px); }

/* crafted scene (stand-in until a real photo drops into .rev-plate__photo) */
.rev-plate__scene { position: absolute; inset: 0; overflow: hidden; }
.rev-plate__sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.rev-plate__hills { fill: color-mix(in srgb, var(--rev-sky-b) 70%, #000); opacity: .9; }
.rev-plate__ridge { fill: color-mix(in srgb, var(--rev-sky-b) 88%, #000); }
.rev-plate__ground { fill: #05070c; }

/* per-era scene motifs — distinctive, story-accurate backdrops */
.rev-sc__earth   { fill: #0c1018; fill: color-mix(in srgb, var(--rev-sky-b) 80%, #05070c); }
.rev-sc__peakfar { fill: #0e1420; fill: color-mix(in srgb, var(--rev-sky-b) 62%, #05070c); }
.rev-sc__peak    { fill: #0a0e17; fill: color-mix(in srgb, var(--rev-sky-b) 84%, #000); }
.rev-sc__mass    { fill: #0c111c; fill: color-mix(in srgb, var(--rev-sky-b) 86%, #000); stroke: rgba(210,224,255,.14); stroke-width: .5; }
.rev-sc__mast    { fill: rgba(214,226,255,.42); }
.rev-sc__line    { fill: none; stroke: rgba(210,224,255,.26); stroke-width: .6; }
.rev-sc__line2   { fill: none; stroke: rgba(214,226,255,.42); stroke-width: .8; stroke-linecap: round; }
.rev-sc__road    { fill: none; stroke: rgba(var(--brand-rgb), .6); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 4 3; filter: drop-shadow(0 0 3px rgba(var(--brand-rgb), .6)); }
.rev-sc__circuitline { fill: none; stroke: var(--color-brand-bright); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(var(--brand-rgb), .8)); }
.rev-sc__beam    { fill: var(--rev-sun); opacity: .1; mix-blend-mode: screen; }
.rev-sc__lamp    { fill: var(--rev-sun); filter: drop-shadow(0 0 4px var(--rev-sun)); }
.rev-sc__dust    { fill: var(--rev-sun); opacity: .08; }
.rev-sc__trees circle { fill: #0a0e16; fill: color-mix(in srgb, var(--rev-sky-b) 78%, #000); }
.rev-sc__check   { opacity: .55; }
.rev-sc__laurel  { fill: none; stroke: var(--rev-sun); stroke-width: 1.2; stroke-linecap: round; opacity: .8; }
.rev-sc__halo    { fill: var(--rev-sun); opacity: .14; }
.rev-sc__star    { fill: var(--rev-sun); filter: drop-shadow(0 0 4px var(--rev-sun)); }
.rev-sc__fw      { stroke: var(--rev-sun); stroke-width: .7; stroke-linecap: round; opacity: .85; filter: drop-shadow(0 0 2px var(--rev-sun)); }
/* legacy generic-scene classes (kept harmless) */
.rev-plate__lights rect { fill: rgba(255,255,255,.14); }
.rev-plate__lights circle { fill: var(--rev-sun); filter: drop-shadow(0 0 3px var(--rev-sun)); opacity: .85; }
.rev-plate__car {
  position: absolute; left: 50%; bottom: 15%; width: 62%; height: 34%;
  transform: translateX(-50%);
}
.rev-plate__car .rvcar__svg { width: 100%; height: 100%; }
/* the plate poses a single, always-visible era machine */
.rev-plate__car .rvcar__era { display: block; opacity: 1; transform: none; }
.rev-plate__stripe {
  position: absolute; right: -20%; top: -20%; width: 55%; height: 140%;
  background: repeating-linear-gradient(115deg, rgba(var(--brand-rgb),.16) 0 14px, transparent 14px 28px);
  transform: rotate(4deg); opacity: .5;
}
/* Ken-Burns drift on the whole scene, scrubbed subtly by chapter progress */
.rev-plate.is-active .rev-plate__scene {
  animation: revKenBurns 16s ease-in-out infinite alternate;
}
@keyframes revKenBurns {
  0%   { transform: scale(1.06) translate(1.4%, -1%); }
  100% { transform: scale(1.14) translate(-1.6%, 1.2%); }
}

.rev-plate__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  filter: saturate(calc(var(--rev-sat) * .96)) contrast(1.06) brightness(.98);
  transition: opacity .7s ease;
}
/* a real era photo, once it successfully loads, fades in over the crafted
   scene; a missing file (404) never adds .is-loaded, so the scene stays. */
.rev-plate__photo.is-loaded { opacity: 1; }
/* scroll-driven depth — the photo pans gently within its frame per chapter */
.rev-plate.is-active .rev-plate__photo.is-loaded {
  transform: scale(1.045) translate3d(calc(var(--rev-sub, 0) * 12px), 0, 0);
}

.rev-plate__grain {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  opacity: calc(var(--rev-grain) * .5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: revGrain .5s steps(3) infinite;
}
@keyframes revGrain { 0%{transform:translate(0,0);} 33%{transform:translate(-3%,2%);} 66%{transform:translate(2%,-3%);} 100%{transform:translate(0,0);} }
.rev-plate__scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.14) 0 1px, transparent 1px 4px);
  opacity: calc(var(--rev-grain) * .45);
}
.rev-plate__sweep {
  position: absolute; top: 0; bottom: 0; left: 0; width: 60%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-130%); opacity: 0; pointer-events: none; mix-blend-mode: screen;
}
/* unifying grade + bottom scrim (curated museum print) + vignette */
.rev-plate__vignette {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 130px 26px rgba(0,0,0,.5);
  background:
    linear-gradient(to top, rgba(4,7,14,.82) 0%, rgba(4,7,14,.12) 26%, transparent 42%),
    radial-gradient(125% 100% at 50% 40%, transparent 50%, rgba(0,0,0,.5));
}
.rev-plate__frame { position: absolute; inset: 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; pointer-events: none; }
.rev-plate__corner { position: absolute; width: 11px; height: 11px; border: 1.5px solid rgba(var(--brand-rgb), .9); }
.rev-plate__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.rev-plate__corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.rev-plate__corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.rev-plate__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.rev-plate__tag {
  position: absolute; left: 22px; bottom: 18px; z-index: 3;
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-text);
  display: inline-flex; align-items: center; gap: .6rem;
}
.rev-plate__tag::before { content: ""; width: 18px; height: 2px; background: var(--color-brand-bright); box-shadow: 0 0 8px 1px rgba(var(--brand-rgb), .6); }

/* — story column — editorial — */
.rev__story { position: relative; height: 100%; }
.rev-story-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.rev-story-card.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; z-index: 2;
  transform: translate3d(calc(var(--rev-sub, 0) * 24px), 0, 0);
}
.rev-story-card__year {
  font-family: var(--font-mono); font-weight: var(--fw-medium);
  font-size: .8rem; color: var(--color-brand-bright); letter-spacing: .16em;
}
.rev-story-card__kicker {
  font-size: .64rem; letter-spacing: .26em; color: var(--color-text-subtle); text-transform: uppercase;
  margin-top: .45rem; display: inline-flex; align-items: center; gap: .55rem;
}
.rev-story-card__kicker::before { content: ""; width: 22px; height: 1px; background: rgba(255,255,255,.28); }
.rev-story-card__title {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(2.1rem, 4vw, 3.9rem); line-height: 1.0; letter-spacing: -.025em;
  margin-top: .7rem;
}
.rev-story-card__line {
  display: block; height: 2px; width: 100%; max-width: 220px; margin: 1.5rem 0;
  transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, var(--color-brand-bright), transparent);
}
.rev-story-card__copy { color: var(--color-text-muted); font-size: clamp(1rem, 1.15vw, 1.14rem); line-height: 1.62; max-width: 38ch; }
/* editorial data callout — a defining figure per chapter */
.rev-story-card__metric {
  display: flex; align-items: baseline; gap: .7rem; width: max-content;
  margin-top: 1.7rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.08);
}
.rev-story-card__metric-v {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(1.7rem, 2.5vw, 2.5rem); line-height: 1; letter-spacing: -.01em;
  color: #fff;
  background: linear-gradient(180deg, #fff, var(--color-brand-bright) 190%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rev-story-card__metric-l {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-subtle);
  max-width: 12ch; line-height: 1.4;
}
.rev-story-card__place {
  margin-top: 1.4rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-subtle);
  display: inline-flex; align-items: center; gap: .55rem; width: max-content;
}
.rev-story-card__place::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-bright); box-shadow: 0 0 8px 1px rgba(var(--brand-rgb),.7); }

/* — telemetry bar — */
.rev__hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.1rem clamp(2.5rem, 5.5vw, 6.5rem);
  font-size: .64rem; letter-spacing: .18em; color: var(--color-text-subtle);
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(to top, rgba(4,6,11,.7), transparent);
}
.rev__hud b { color: var(--color-text); font-weight: var(--fw-semibold); }
.rev__hud-l { text-transform: uppercase; }
.rev__hud-c { display: inline-flex; align-items: center; gap: .8rem; }
.rev__hud-c b { font-size: .82rem; }
.rev__hud-sep { width: 1px; height: 11px; background: rgba(255,255,255,.2); display: inline-block; }
.rev__hud-era { color: var(--color-brand-bright); text-transform: uppercase; }
.rev__hud-r b { font-size: .82rem; }
@media (max-width: 720px) { .rev__hud-l { display: none; } }

/* ── finale glow-up ────────────────────────────────────── */
.revolution.is-finale .rev__glow { opacity: 1.35; }
.revolution.is-finale .rev__rail-fill { box-shadow: 0 0 22px 3px rgba(var(--brand-rgb), .9); }
.revolution.is-finale .rev__viewport::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(80% 60% at 50% 50%, rgba(var(--brand-rgb), .14), transparent 70%);
  animation: revFinale 1.6s ease-out;
}
@keyframes revFinale { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: .5; } }

/* ── responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .rev__deck {
    grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr) auto;
    top: clamp(7rem, 13vh, 10rem); gap: 1.1rem; align-items: stretch;
  }
  .rev__year { font-size: clamp(3.2rem, 12vw, 6rem); justify-content: center; transform: none; }
  .rev__year::after { display: none; }
  .rev__plate-stack { max-width: min(82vw, 520px); margin: 0 auto; transform: none; }
  .rev__story { height: auto; }
  .rev-story-card { position: relative; text-align: center; align-items: center; transform: none; }
  .rev-story-card:not(.is-active) { display: none; }
  .rev-story-card__copy { margin: 0 auto; }
  .rev-story-card__line { margin-inline: auto; }
  .rev-story-card__kicker { justify-content: center; }
  .rev-story-card__metric { margin-inline: auto; justify-content: center; }
  .rev__floor { opacity: .08; }
}
@media (max-width: 600px) {
  .rev__rail { padding: 0 1.5rem; top: 3.5rem; }
  .rev-node__year { font-size: .5rem; }
  .rev__year { font-size: clamp(3rem, 18vw, 5rem); }
  .rev-story-card__title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
}

/* ── reduced motion — clean static museum ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .rev__volumetric, .rev__scan,
  .rev-plate__grain, .rev-plate.is-active .rev-plate__scene { animation: none !important; }
}
.revolution.is-static .rev__viewport { height: auto; }
.revolution.is-static .rev__deck { position: relative; inset: auto; display: block; padding: 3rem 6vw; }
.revolution.is-static .rev__plate-stack { max-width: 560px; margin: 2rem auto; }
.revolution.is-static .rev-plate { position: relative; opacity: 1; visibility: visible; clip-path: none; margin-bottom: 2rem; }
.revolution.is-static .rev-story-card { position: relative; opacity: 1; visibility: visible; margin-bottom: 3rem; }
.revolution.is-static .rev__car, .revolution.is-static .rev__hud { display: none; }

/* ── the machine (rail rig + plate pose) ───────────────── */
.rvcar__era {
  opacity: 0; transform: scale(.9);
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: opacity .5s var(--ease-standard), transform .6s var(--ease-out-expo);
}
.rvcar__era.is-on { opacity: 1; transform: scale(1); }
.rvcar__tyre { fill: url(#rvcarTyre); stroke: rgba(235,242,255,.52); stroke-width: 1.1; }
.rvcar__rim { fill: #2b3a52; stroke: var(--color-brand-bright); stroke-width: 1; }
.rvcar__spoke { stroke: rgba(220,230,255,.7); stroke-width: 1; stroke-linecap: round; }
.rvcar__hub { fill: #fff; }
.rvcar__shell { fill: url(#rvcarBody); stroke: rgba(220,231,255,.66); stroke-width: 1.2; stroke-linejoin: round; paint-order: fill stroke; }
.rvcar__glass { fill: rgba(150,178,255,.42); stroke: rgba(225,235,255,.5); stroke-width: .7; }
.rvcar__accent { fill: var(--color-brand-bright); }
.rvcar__roundel { fill: #fff; }
.rvcar__fin, .rvcar__airbox, .rvcar__canopy, .rvcar__vent { fill: #2c374b; stroke: rgba(220,231,255,.5); stroke-width: .7; }
.rvcar__wing, .rvcar__post, .rvcar__splitter, .rvcar__canard { fill: #1b2436; stroke: rgba(220,231,255,.58); stroke-width: .7; }
.rvcar__shadow { fill: url(#rvcarShadow); }
.rvcar__underglow { fill: url(#rvcarUnder); mix-blend-mode: screen; opacity: .2; }
.rvcar__trail { fill: url(#rvcarTrail); opacity: 0; mix-blend-mode: screen; }
.rvcar__speed { opacity: 0; }
.rvcar__speed line { stroke: var(--color-brand-bright); stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
.rvcar__exhaust { fill: #bcd2ff; opacity: .16; filter: drop-shadow(0 0 3px rgba(125,146,255,.95)); }
.rvcar__brake { fill: #ff5252; opacity: .04; filter: drop-shadow(0 0 3.5px rgba(255,60,60,.95)); }
.rvcar__head { fill: #eaf1ff; opacity: .3; filter: drop-shadow(0 0 3.5px rgba(var(--brand-rgb),1)); }
.rvcar__smoke { opacity: 0; filter: blur(1.4px); }
.rvcar__smoke circle { fill: rgba(208,218,238,.45); }
/* plate pose reuses the same paint but with its own gradient ids */
.rev-plate__car .rvcar__shell { fill: var(--body); }
.rev-plate__car .rvcar__tyre { fill: var(--tyre); }
/* motion-blur surrogate only behind the wheels while the rail car turns */
.rev__car.is-turning .rvcar__flip { filter: blur(.55px); }