/* ── base.css — tokens, reset, type system, atmosphere ───────────────── */

:root {
  --ash-0: #060709;
  --ash-1: #0b0e12;
  --ash-2: #12171f;
  --ash-3: #1b222c;

  --ink: #eff2f6;
  --ink-2: #b8c1cd;
  --ink-3: #78838f;
  --ink-4: #4b5561;

  --steel: #7faad6;
  --steel-2: #39628e;
  --steel-3: #16324e;

  --gold: #e7bd72;
  --gold-2: #c69a46;
  --gold-ink: #ffe3ac;
  --gold-deep: #3a2a12;

  --accent: var(--steel);
  --accent-soft: rgba(127, 170, 214, 0.22);
  --warm: 0; /* 0 = cold steel, 1 = gold — driven by the engine */

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pad: clamp(20px, 5vw, 88px);
  --hud-h: 60px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  background: var(--ash-0);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

html.lenis-lock { overflow: hidden; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--ash-0);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-loading { overflow: hidden; }

/* soft custom scrollbar so the timeline feels like a transport bar */
html { scrollbar-width: thin; scrollbar-color: #2a323d transparent; }
body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb {
  background: #262e38;
  border-radius: 99px;
}
body::-webkit-scrollbar-thumb:hover { background: #39434f; }

::selection { background: rgba(231, 189, 114, 0.28); color: #fff; }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── atmosphere layers ───────────────────────────────────────────────── */

.atmos {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

.grain {
  position: absolute;
  inset: -50%;
  opacity: 0.15;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  animation: grain-shift 5.5s steps(4) infinite;
}

@keyframes grain-shift {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-2%, 1.5%, 0); }
  50% { transform: translate3d(1.5%, -2%, 0); }
  75% { transform: translate3d(-1%, -1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(0, 0, 0, 0.45) 78%, rgba(0, 0, 0, 0.78) 100%);
}

.letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  background: #000;
  transition: height 0.7s var(--ease);
}

/* cinematic bars while playing in fullscreen */
body.is-cinema .letterbox.top { height: 7vh; }
body.is-cinema .letterbox.bottom { height: 7vh; }

/* ── typographic primitives ──────────────────────────────────────────── */

.kicker {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(9px, 0.72vw, 11px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.line {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 3.05vw, 44px);
  line-height: 1.28;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 28px rgba(0, 0, 0, 0.7);
}

.line em {
  font-style: italic;
  color: var(--gold-ink);
}

.key {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4.1vw, 62px);
  line-height: 1.16;
  letter-spacing: -0.005em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 32px rgba(0, 0, 0, 0.75);
}

.key em {
  font-style: italic;
  color: var(--gold);
}

.q {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 4.4vw, 68px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: #fff;
  text-wrap: balance;
}

.quote,
.verse {
  margin: 0;
}

.quote p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 3.6vw, 56px);
  line-height: 1.24;
  color: var(--ink);
  text-wrap: balance;
}

.quote cite,
.verse cite {
  display: block;
  margin-top: 1.6em;
  font-family: var(--sans);
  font-style: normal;
  font-size: clamp(9px, 0.72vw, 11px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.verse p {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(23px, 3.1vw, 46px);
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

.verse cite { color: var(--gold); }

/* every line of spoken type keeps a halo so artwork can pass behind it */
.q,
.quote p,
.verse p,
.statchip .statline {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 26px rgba(0, 0, 0, 0.7);
}

/* ── utilities ───────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
  }
}