/* ════════════════════════════════════════════════════════════════
   THE OLD STORIES — a parallax descent through myth
   Nara · "Sapere aude"
   Grounds: Calacatta marble (dawn) → onyx (the labyrinth)
   Etch: gold-foil constellations carved into stone
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Marble & warm whites (from the Nara marble system) */
  --mb-ivory:   #F1E8D3;
  --mb-cream:   #FBF8F1;
  --mb-ink:     #211D16;
  --mb-ink-2:   #3A352B;
  --mb-stone:   #5C5346;
  --mb-faint:   #A39B89;
  --mb-line:    rgba(33,29,22,0.12);

  /* Gold */
  --gold:       #B0883C;
  --gold-deep:  #876326;
  --gold-light: #E7CE8C;
  --gold-pale:  #F0DDA6;
  --gold-soft:  rgba(176,136,60,0.14);
  --gold-foil:  linear-gradient(120deg, #9A7228 0%, #E7CE8C 28%, #B0883C 55%, #F0DDA6 74%, #8C6624 100%);
  --gold-bar:   linear-gradient(180deg, #E7CE8C 0%, #B0883C 50%, #876326 100%);

  /* Onyx (the descent's floor) */
  --onyx:       #14110C;
  --onyx-2:     #0C0A07;
  --onyx-ink:   #EFE7D6;
  --onyx-stone: #B9AE96;

  --serif-display: "Cormorant Garamond", "Newsreader", Georgia, serif;
  --serif-text:    "Newsreader", Georgia, serif;
  --ui:            "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;

  --marble: url("marble.svg?v=3");

  /* Tunable (driven by Tweaks) */
  --gold-intensity: 1;     /* 0.5 – 1.4 */
  --parallax: 1;           /* 0 – 1.6  depth multiplier */
  --dust: 1;               /* particle density multiplier */
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--onyx-2);
  color: var(--mb-ink);
  font-family: var(--ui);
  overflow-x: hidden;
}
::selection { background: var(--gold); color: #fff; }

#root { position: relative; }

/* ── The descent: one continuous ground behind everything ──────── */
/* absolute + full document height so the ground genuinely darkens as you fall */
.descent-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg,
      #FCFAF3 0%,    /* near-white at the Overture so the gold "stories." reads */
      #F7F0DC 14%,   /* easing into the cream by the bottom of the Overture */
      #F1E8D3 24%,   /* original starting cream, shifted lower */
      #E8DCC0 36%,
      #C9B58A 48%,
      #6E6049 62%,
      #2A2318 76%,
      #14110C 88%,
      #0C0A07 100%);
}
/* marble veining overlay — fixed texture, faded out by the engine as we descend */
.descent-marble {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--marble) center center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: var(--marble-on, 0.6);
}

/* tone-driven atmosphere — three distinct registers */
.atmo { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity 400ms ease, background 400ms ease; }

/* MUSEUM — quiet, flat gallery light. Almost no vignette, crisp. */
.tone-museum .atmo {
  background: radial-gradient(120% 90% at 50% -8%, rgba(231,206,140,0.08) 0%, transparent 52%);
}
.tone-museum { --dust-tone: 0.6; }
.tone-museum .etch svg { filter: none; }

/* CINEMATIC — strong vignette, deep contrast, blazing gold. */
.tone-cinematic .atmo {
  background:
    radial-gradient(62% 58% at 50% 44%, transparent 24%, rgba(8,6,3,0.22) 72%, rgba(8,6,3,0.55) 100%),
    radial-gradient(90% 55% at 50% 4%, rgba(231,206,140,0.16) 0%, transparent 52%);
}
.tone-cinematic { --dust-tone: 1; }
.tone-cinematic .etch svg { filter: drop-shadow(0 0 7px rgba(231,206,140,0.45)); }
.tone-cinematic .myth-name { letter-spacing: -0.026em; }
.tone-cinematic .descent-bg {
  background:
    linear-gradient(180deg,
      #FBF6E7 0%,    /* brighter top for cinematic — gives "stories." contrast */
      #F2E8CC 14%,   /* easing into the warm cream by the bottom of Overture */
      #E7DBBE 24%,   /* original second stop, shifted lower */
      #D4C195 36%,
      #A1885C 48%,
      #4E422F 62%,
      #211B12 76%,
      #0C0A07 90%,
      #060503 100%);
}

/* ETHEREAL — soft diffuse bloom, lifted, dreamy. More dust. */
.tone-ethereal .atmo {
  background:
    radial-gradient(85% 65% at 28% 22%, rgba(244,228,180,0.22) 0%, transparent 60%),
    radial-gradient(80% 62% at 74% 72%, rgba(231,206,140,0.16) 0%, transparent 62%),
    radial-gradient(120% 100% at 50% 50%, rgba(255,250,238,0.05) 0%, transparent 70%);
}
.tone-ethereal { --dust-tone: 1.7; }
.tone-ethereal .etch svg { filter: drop-shadow(0 0 12px rgba(231,206,140,0.55)); }
.tone-ethereal .descent-bg {
  background:
    linear-gradient(180deg,
      #FDFBF5 0%,    /* near-white top for ethereal */
      #F8F2E2 14%,   /* gentle ease */
      #F2E9D6 24%,   /* original second stop, shifted lower */
      #EADCC2 38%,
      #CFBE96 52%,
      #8A7B5C 66%,
      #3C3324 80%,
      #1B1710 92%,
      #14110C 100%);
}
.tone-ethereal .myth-line, .tone-ethereal .echo span { opacity: 0.92; }
/* faint star-grain that grows toward the onyx floor */
.descent-stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(231,206,140,0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 8%, rgba(231,206,140,0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 62%, rgba(231,206,140,0.6), transparent 60%),
    radial-gradient(1px 1px at 64% 44%, rgba(231,206,140,0.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 72%, rgba(231,206,140,0.7), transparent 60%),
    radial-gradient(1.1px 1.1px at 6% 86%, rgba(231,206,140,0.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 46% 92%, rgba(231,206,140,0.6), transparent 60%),
    radial-gradient(1px 1px at 22% 36%, rgba(231,206,140,0.45), transparent 60%);
}

/* ── Scenes ────────────────────────────────────────────────────── */
.stage { position: relative; z-index: 1; }
.finale { z-index: 1; }

.scene {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 0;
}
.scene-wrap {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  z-index: 4;
}

/* Parallax layer base — JS writes --p (scene progress -1..1) on .scene */
.layer { will-change: transform; }

/* ── Ghost glyph (huge Greek name / numeral drifting behind) ───── */
.ghost-glyph {
  position: absolute;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  line-height: 0.8;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  letter-spacing: -0.02em;
}

/* ── Constellation etch panel ──────────────────────────────────── */
.etch {
  position: relative;
  z-index: 3;
}
.etch svg { display: block; width: 100%; height: auto; overflow: visible; }

/* gold stroke lines of the constellation */
.etch .con-line {
  fill: none;
  stroke: url(#goldFoil);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: calc(0.85 * var(--gold-intensity));
}
.etch .con-line--faint { opacity: calc(0.4 * var(--gold-intensity)); stroke-width: 1; }
.etch .con-line--bold  { stroke-width: 2; opacity: calc(0.95 * var(--gold-intensity)); }

/* engraved feel: a dark inner shadow line offset beneath the gold */
.etch .con-engrave {
  fill: none;
  stroke: rgba(40,28,8,0.28);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(1.2px);
}

/* star points */
.etch .star { fill: url(#goldRadial); }
.etch .star-core { fill: var(--gold-pale); }
.etch .star-halo { fill: url(#starHalo); opacity: calc(0.9 * var(--gold-intensity)); }

/* draw-in: dash offset driven by --draw (0 hidden → 1 drawn) */
.etch .draws {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: calc(var(--len, 1200) * (1 - var(--draw, 1)));
}

/* ── Text block ────────────────────────────────────────────────── */
.tablet { max-width: 540px; }
.scene--right .tablet { margin-left: auto; text-align: right; }

.kicker {
  display: inline-flex; align-items: center; gap: 13px;
  font-family: var(--ui); font-weight: 600;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.32em;
  color: var(--gold-deep);
  margin-bottom: 26px;
}
.scene--right .kicker { flex-direction: row-reverse; }
.kicker .rule { width: 46px; height: 1px; background: var(--gold-bar); opacity: 0.7; }
.kicker .greek { font-family: var(--serif-display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 16px; }

.myth-name {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--mb-ink);
}
.myth-name .foil {
  background: var(--gold-foil);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Engraved letterpress shadow under all gold-foil display text — gives the
   gradient letters a hard dark edge so they read against the cream marble
   in the light scenes (Overture, Prometheus, Icarus). On dark scenes the
   shadow disappears into the onyx — no downside. Same idea as the
   .con-engrave shadow used for the constellation lines. */
.myth-name .foil,
.overture h1 .foil,
.finale h2 .foil {
  filter:
    drop-shadow(0 1px 0 rgba(40, 28, 8, 0.45))
    drop-shadow(0 2px 3px rgba(40, 28, 8, 0.18));
}

.myth-line {
  margin-top: 30px;
  font-family: var(--serif-text);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.42;
  color: var(--mb-ink-2);
  max-width: 22ch;
}
.scene--right .myth-line { margin-left: auto; }

/* the modern echo — small caption pinned to the myth */
.echo {
  margin-top: 34px;
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--ui);
  font-size: 14.5px; line-height: 1.5;
  color: var(--mb-stone);
  max-width: 38ch;
}
.scene--right .echo { margin-left: auto; flex-direction: row-reverse; text-align: right; }
.echo .tag {
  flex-shrink: 0;
  font-weight: 600; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-deep);
  padding-top: 2px;
}
.echo .tag::after { content: ""; display: block; height: 1px; background: var(--gold); opacity: 0.45; margin-top: 8px; }

/* ── Dark-scene ink swaps ──────────────────────────────────────── */
.scene--dark .myth-name { color: var(--onyx-ink); }
.scene--dark .myth-line { color: var(--onyx-stone); }
.scene--dark .echo { color: var(--onyx-stone); }
.scene--dark .kicker { color: var(--gold-light); }
.scene--dark .echo .tag { color: var(--gold-light); }

/* ── Gold dust particles ───────────────────────────────────────── */
.dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.mote {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-pale) 0%, rgba(231,206,140,0.5) 40%, transparent 70%);
  opacity: 0;
  animation: drift var(--dur, 9s) ease-in-out var(--del, 0s) infinite;
}
@keyframes drift {
  0%   { opacity: 0; transform: translateY(14px) translateX(0) scale(0.8); }
  20%  { opacity: calc(0.7 * var(--dust) * var(--dust-tone, 1)); }
  80%  { opacity: calc(0.5 * var(--dust) * var(--dust-tone, 1)); }
  100% { opacity: 0; transform: translateY(-26px) translateX(var(--dx, 8px)) scale(1.1); }
}

/* ── The spine: Ariadne's thread running the whole page ────────── */
.thread {
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  width: 120px;
  margin-left: -60px;
  z-index: 0;
  pointer-events: none;
}
.thread svg { width: 100%; height: 100%; }
.thread path {
  fill: none;
  stroke: url(#goldFoilV);
  stroke-width: 1.4;
  opacity: calc(0.5 * var(--gold-intensity));
  stroke-linecap: round;
}

/* ── Overture (opening) ────────────────────────────────────────── */
.overture { text-align: center; flex-direction: column; justify-content: center; }
.overture .wm {
  font-family: var(--serif-display); font-weight: 600;
  font-size: 22px; letter-spacing: 0.04em; color: var(--mb-ink);
  display: inline-flex; align-items: center; gap: 11px;
  margin-bottom: 56px;
}
.overture .wm .d { width: 9px; height: 9px; transform: rotate(45deg); background: var(--gold-bar); }
.overture .eyebrow {
  font-family: var(--ui); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.4em; color: var(--gold-deep);
  margin-bottom: 30px;
}
.overture h1 {
  margin: 0;
  font-family: var(--serif-display); font-weight: 500;
  font-size: clamp(52px, 9.5vw, 150px);
  line-height: 0.94; letter-spacing: -0.02em; color: var(--mb-ink);
}
.overture h1 .disp-i { font-style: italic; }
.overture h1 .foil {
  background: var(--gold-foil); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.overture .lede {
  margin: 38px auto 0; max-width: 540px;
  font-family: var(--serif-text); font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.62; color: var(--mb-stone);
}
.overture .lede em { font-style: italic; color: var(--mb-ink-2); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--ui); font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-deep); z-index: 5;
}
.scroll-cue .line {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
  position: relative; overflow: hidden;
}
.scroll-cue .line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%;
  background: var(--gold-light);
  animation: cue 2.2s cubic-bezier(.6,0,.2,1) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(280%); } }

/* ── Finale / Nara CTA (deep onyx) ─────────────────────────────── */
.finale {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #0C0A07 0%, #100D09 60%, #14110C 100%);
  color: var(--onyx-ink);
  text-align: center;
  padding: 180px 24px 120px;
  overflow: hidden;
}
.finale::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 36%, rgba(231,206,140,0.16) 0%, transparent 64%);
}
.finale-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
.finale .seal {
  width: 70px; height: 70px; margin: 0 auto 40px;
  border-radius: 999px; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-light);
  background: radial-gradient(closest-side, rgba(231,206,140,0.14), transparent);
}
.finale .eyebrow {
  font-family: var(--ui); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.4em; color: var(--gold-light);
  margin-bottom: 30px; display: block;
}
.finale h2 {
  margin: 0; font-family: var(--serif-display); font-weight: 500;
  font-size: clamp(46px, 7.5vw, 104px); line-height: 1.0; letter-spacing: -0.02em;
  color: #F6F0E2;
}
.finale h2 .disp-i { font-style: italic; }
.finale h2 .foil {
  background: var(--gold-foil); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.finale .sub {
  margin: 32px auto 0; max-width: 500px;
  font-family: var(--serif-text); font-size: 19px; line-height: 1.6; color: var(--onyx-stone);
}
.finale .sub em { font-style: italic; color: var(--gold-light); }
.finale-actions { margin-top: 46px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.btn-gold, .btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: 11px; cursor: pointer;
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  border: 0; transition: transform 200ms cubic-bezier(.22,.61,.36,1), box-shadow 240ms;
}
.btn-gold { background: var(--gold-foil); color: #221806; box-shadow: 0 10px 30px -12px rgba(231,206,140,0.55); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(231,206,140,0.7); }
.btn-line { background: transparent; color: var(--gold-light); border: 1px solid rgba(231,206,140,0.4); }
.btn-line:hover { background: rgba(231,206,140,0.08); border-color: var(--gold-light); }

.finale .colophon {
  margin-top: 86px; padding-top: 34px;
  border-top: 1px solid rgba(231,206,140,0.16);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.finale .colophon .wm {
  font-family: var(--serif-display); font-weight: 600; font-size: 19px; letter-spacing: 0.04em;
  color: var(--onyx-ink); display: inline-flex; align-items: center; gap: 10px;
}
.finale .colophon .wm .d { width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold-bar); }
.finale .colophon .aude { font-family: var(--serif-text); font-style: italic; font-size: 14px; color: var(--onyx-stone); }

/* progress rail — a thin gold meter of the descent */
.descent-meter {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: rgba(0,0,0,0.06);
}
.descent-meter i { display: block; height: 100%; width: 0; background: var(--gold-bar); box-shadow: 0 0 10px rgba(231,206,140,0.6); }

/* chapter index — fixed numerals on the side */
.chapter-rail {
  position: fixed; right: 30px; top: 50%; transform: translateY(-50%);
  z-index: 50; display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.chapter-rail button {
  border: 0; background: none; cursor: pointer; padding: 6px 4px;
  display: flex; align-items: center; gap: 10px; flex-direction: row-reverse;
  font-family: var(--serif-display); font-style: italic; font-size: 15px;
  color: var(--ink-rail, var(--mb-stone));
  opacity: 0.5; transition: opacity 240ms, color 240ms;
}
.chapter-rail button .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; transform: rotate(45deg); border-radius: 1px; }
.chapter-rail button.active { opacity: 1; color: var(--gold-deep); }
.chapter-rail button:hover { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .mote { animation: none; opacity: 0; }
  .scroll-cue .line::after { animation: none; }
  .layer { transform: none !important; }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .scene-wrap { padding: 0 28px; }
  .scene--right .tablet, .scene--right .myth-line, .scene--right .echo { text-align: left; margin-left: 0; }
  .scene--right .kicker, .scene--right .echo { flex-direction: row; }
  .etch--side { opacity: 0.5; }
  .chapter-rail { display: none; }
  .thread { left: 18px; margin-left: 0; width: 60px; }
}