/* Shared layout and the time machine bar. The machine keeps one look across every decade. */
:root {
  --machine-h: 64px;
  --machine-bg: #0d0f12;
  --machine-fg: #e8e6e1;
  --machine-dim: #8a8f98;
  --machine-glow: #ff5a1f;
  --machine-future: #7cf3c0;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--machine-h) + 16px); }
body { margin: 0; padding-top: var(--machine-h); background: #fff; color: #111; overflow-x: hidden; }
img, svg { max-width: 100%; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--machine-glow); color: #000; padding: 8px 12px; font: 600 14px/1 system-ui, sans-serif; }
.skip-link:focus { top: 8px; }
.noscript { padding: 24px 16px; font: 16px/1.5 system-ui, sans-serif; }

/* ---------- The machine ---------- */
.machine {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--machine-h);
  display: flex; align-items: center; gap: 24px; padding: 0 16px;
  background: var(--machine-bg); color: var(--machine-fg);
  font: 500 13px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  border-bottom: 1px solid #23272e;
}
.machine-readout { display: flex; align-items: center; min-width: 88px; }
.machine::after { content: ""; flex: none; min-width: 88px; } /* mirrors the readout so the dial sits in the true centre */
.machine-year { font-size: 26px; font-weight: 700; color: var(--machine-glow); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(255, 90, 31, 0.45); }
html[data-decade="2030s"] .machine-year { color: var(--machine-future); text-shadow: 0 0 12px rgba(124, 243, 192, 0.45); }

.machine-dial { flex: 1; min-width: 0; }
.machine-dial ol { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; max-width: 640px; margin: 0 auto; }
.machine-dial ol::before { content: ""; position: absolute; left: 12px; right: 12px; top: 9px; height: 2px; background: linear-gradient(90deg, #3a3f48 78%, transparent 78%, transparent 80%, #3a3f48 80%, #3a3f48 82%, transparent 82%, transparent 84%, #3a3f48 84%); }
.dial-stop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0 4px; color: var(--machine-dim); font: inherit; cursor: pointer;
}
.dial-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--machine-bg); border: 2px solid #3a3f48; transition: border-color .2s, background .2s, box-shadow .2s; }
.dial-stop.is-forecast .dial-dot { border-style: dashed; border-radius: 0; }
.dial-stop:hover { color: var(--machine-fg); }
.dial-stop:hover .dial-dot { border-color: var(--machine-fg); }
.dial-stop.is-on { color: var(--machine-fg); }
.dial-stop.is-on .dial-dot { background: var(--machine-glow); border-color: var(--machine-glow); box-shadow: 0 0 12px var(--machine-glow); }
.dial-stop.is-forecast.is-on .dial-dot { background: var(--machine-future); border-color: var(--machine-future); box-shadow: 0 0 12px var(--machine-future); }
.dial-stop:focus-visible { outline: 2px solid var(--machine-glow); outline-offset: 4px; }

@media (max-width: 520px) {
  .machine { gap: 12px; }
  .machine-readout { min-width: 64px; }
  .machine::after { display: none; } /* too narrow to centre: the dial needs the room */
  .machine-year { font-size: 20px; }
  .dial-label { font-size: 11px; }
  .dial-stop { padding: 0 1px; }
}

/* ---------- Signature: the same dark strip as the machine, closing every stop ---------- */
.signature { position: relative; z-index: 1; padding: 20px 16px; text-align: center; background: var(--machine-bg); border-top: 1px solid #23272e; font: 500 13px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
html[data-decade] .signature a, html[data-decade] .signature a:visited { color: var(--machine-fg); text-decoration: none; letter-spacing: .02em; }
html[data-decade] .signature a:hover, html[data-decade] .signature a:focus-visible { text-decoration: underline; }
html[data-decade="2010s"] .signature { padding-bottom: 72px; } /* clears the fixed cookie banner */

/* ---------- Stage ---------- */
.stage { min-height: calc(100vh - var(--machine-h)); outline: none; }
.site { position: relative; }
.line-icon { width: 1em; height: 1em; vertical-align: -0.125em; flex: none; }
.card-icon { display: none; }
.stat-value, .stat-label { display: block; }
.terms dt { font-weight: bold; }
.terms dd { margin: 0 0 0.5em; }

/* ---------- Warp layer (transition overlays) ---------- */
.warp { position: fixed; inset: var(--machine-h) 0 0 0; z-index: 40; pointer-events: none; display: none; }
.warp.is-on { display: block; }

/* Dial-up */
.warp--dialup { background: #c0c0c0; display: none; align-items: center; justify-content: center; font: 16px "Times New Roman", serif; color: #000; }
.warp--dialup.is-on { display: flex; }
.warp--dialup .dots { display: inline-block; width: 1.5em; overflow: hidden; vertical-align: bottom; animation: dots 0.9s steps(4) infinite; }
@keyframes dots { from { width: 0; } to { width: 1.5em; } }
.paint-in { animation: paint 1.6s steps(10, end) both; }
@keyframes paint { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Flash intro */
.warp--flash { background: radial-gradient(circle at 50% 40%, #2b2b2b, #000 70%); pointer-events: auto; }
.warp--flash.is-on { display: flex; align-items: center; justify-content: center; }
.flash-box { text-align: center; color: #9cf; font: 12px Verdana, Geneva, sans-serif; width: min(320px, 80vw); }
.flash-logo { font-size: 20px; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px #39f; animation: flashPulse 0.8s ease-in-out infinite alternate; }
@keyframes flashPulse { from { opacity: .6; } to { opacity: 1; } }
.flash-bar { height: 6px; background: #222; border: 1px solid #39f; margin: 16px 0 6px; }
.flash-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#9cf, #36c); transition: width .07s linear; }
.flash-skip { margin-top: 18px; background: none; border: 0; color: #9cf; font: inherit; text-decoration: underline; cursor: pointer; }
.swoosh-in { animation: swoosh .8s cubic-bezier(.2, .9, .3, 1.2) both; transform-origin: 50% 20%; }
@keyframes swoosh { from { opacity: 0; transform: scale(.6) rotate(-6deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* Material ripple */
.warp--ripple { background: #00bcd4; clip-path: circle(0 at var(--rx, 50%) var(--ry, 0)); animation: ripple .55s cubic-bezier(.4, 0, .2, 1) forwards; }
.warp--ripple.is-out { animation: rippleOut .6s ease forwards; }
@keyframes ripple { to { clip-path: circle(150vmax at var(--rx, 50%) var(--ry, 0)); } }
@keyframes rippleOut { from { clip-path: circle(150vmax at var(--rx, 50%) var(--ry, 0)); opacity: 1; } to { clip-path: circle(150vmax at var(--rx, 50%) var(--ry, 0)); opacity: 0; } }
.rise-in .card, .rise-in .site-head { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.rise-in .card:nth-child(2) { animation-delay: .06s; }
.rise-in .card:nth-child(3) { animation-delay: .12s; }
.rise-in .card:nth-child(4) { animation-delay: .18s; }
.rise-in .card:nth-child(5) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* Smooth fallback */
.fade-out { opacity: 0; transition: opacity .25s ease; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .6s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }