/* ═══════════ BOLDGROW TIME MACHINE ═══════════ */
:root {
  --ink: #0a0908;
  --ink-2: #100e0b;
  --gold: #d8b26a;
  --gold-bright: #f2dca0;
  --gold-soft: rgba(216,178,106,.3);
  --bone: #ece6d8;
  --bone-dim: #8f887a;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Space Grotesk', 'Helvetica Neue', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--bone); font-family: var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: var(--gold); color: var(--ink); }
.eyebrow { font-size: .7rem; letter-spacing: .45em; text-transform: uppercase; color: var(--gold); }
.ital { font-style: italic; color: var(--gold); }
b { color: var(--bone); font-weight: 600; }

/* ═══ INTRO ═══ */
.intro { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.intro-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(216,178,106,.06), transparent 65%); z-index: 0; }
.intro-inner { position: relative; z-index: 2; padding: 0 6vw; }
.intro-title { font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 9vw, 7.5rem); line-height: .98; margin: 1.6rem 0; }
.intro-sub { font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.7; color: var(--bone-dim); }
.intro-scroll { margin-top: 2.6rem; display: inline-flex; align-items: center; gap: 1rem; font-size: .68rem; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); }
.intro-scroll i { width: 46px; height: 1px; background: var(--gold-soft); position: relative; overflow: hidden; }
.intro-scroll i::after { content: ''; position: absolute; left: -40%; top: 0; width: 40%; height: 100%; background: var(--gold); animation: slide 2s ease-in-out infinite; }
@keyframes slide { to { left: 110%; } }

/* ═══ JOURNEY / STAGE ═══ */
.journey { position: relative; height: 720vh; background: #000; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.time-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 140px 140px; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(10,9,8,.7) 100%); }

/* ═══ LOADER ═══ */
.loader { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, var(--ink-2), var(--ink) 75%);
  transition: opacity .9s ease; }
.loader.hidden { opacity: 0; pointer-events: none; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; padding: 0 6vw; }
.loader-eyebrow { font-size: .62rem; letter-spacing: .45em; text-transform: uppercase; color: var(--gold); }
.loader-bar { width: min(60vw, 280px); height: 2px; background: rgba(236,230,216,.14); border-radius: 2px; overflow: hidden; }
.loader-fill { height: 100%; width: 0%; background: var(--gold); box-shadow: 0 0 10px var(--gold); border-radius: 2px; transition: width .25s ease; }
.loader-label { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--bone-dim); letter-spacing: .02em; }

/* ═══ ODOMETER HUD ═══ */
.hud { position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; width: min(90vw, 620px); }
.odometer { display: flex; gap: .35rem; padding: .5rem .9rem; background: rgba(10,9,8,.55); backdrop-filter: blur(8px); border: 1px solid var(--gold-soft); border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5), inset 0 0 24px rgba(216,178,106,.06); }
.od-digit { position: relative; width: clamp(2rem, 5vw, 3.2rem); height: clamp(3rem, 7vw, 4.6rem); overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(216,178,106,.4); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%, transparent 70%, rgba(0,0,0,.3)); border-radius: 3px; }
.od-strip { position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: column; will-change: transform; }
.od-strip span { height: clamp(3rem, 7vw, 4.6rem); display: flex; align-items: center; justify-content: center; }
.era-caption { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--bone); letter-spacing: .02em; text-align: center; transition: opacity .4s; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.timeline { position: relative; width: 100%; height: 2px; background: rgba(236,230,216,.14); margin-top: .6rem; border-radius: 2px; }
.timeline-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--gold); box-shadow: 0 0 8px var(--gold); border-radius: 2px; }
.tl-mark { position: absolute; top: 10px; transform: translateX(-50%); font-size: .58rem; letter-spacing: .1em; color: rgba(236,230,216,.35); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ═══ OUTRO ═══ */
.outro { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12vh 6vw; background: radial-gradient(ellipse at center, var(--ink-2), var(--ink)); }
.outro::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(80vw, 680px); height: 320px; background: radial-gradient(ellipse at center, rgba(216,178,106,.08), transparent 70%); pointer-events: none; }
.outro-inner { position: relative; max-width: 44rem; }
.outro-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 1; margin: 1.5rem 0; }
.outro-sub { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.7; color: var(--bone-dim); max-width: 36rem; margin: 0 auto; }
.outro-actions { margin-top: 3rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn { font-family: var(--sans); font-weight: 600; font-size: .85rem; text-decoration: none; padding: 1.05rem 2.2rem; border-radius: 3px; transition: all .3s; }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 10px 40px rgba(216,178,106,.3); }
.btn-gold:hover { background: var(--gold-bright); transform: translateY(-2px); }
.btn-ghost { color: var(--bone); border: 1px solid var(--gold-soft); }
.btn-ghost:hover { border-color: var(--gold); }
.outro-sign { margin-top: 3rem; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--bone-dim); }

@media (max-width: 820px) {
  .hud { bottom: 6vh; }
  .intro-inner, .outro { padding-left: 5vw; padding-right: 5vw; }
}
@media (prefers-reduced-motion: reduce) { .intro-scroll i::after { animation: none; } }