/* ═══════════════════════════════════════════════════════════════
   VALOR & VANILLA — The Fifth Ingredient
   type: Fraunces (display) · Cormorant Garamond (verse) · Spectral (text)
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-300-normal.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-300-italic.woff2') format('woff2'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('../fonts/spectral-latin-200-normal.woff2') format('woff2'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('../fonts/spectral-latin-300-normal.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }

:root {
  --ink: #06080f;
  --cream: #f0e7d3;
  --cream-dim: rgba(240,231,211,.62);
  --cream-faint: rgba(240,231,211,.34);
  --cobalt: #6e8cff;
  --cobalt-deep: #2f4bd8;
  --gold: #d9a441;
  --copper: #cf7f4e;
  --violet: #a97ef2;
  --wheat: #e6b955;
  --amber: #ffb347;
  --butter: #f2dc9b;
  --blush: #e6899b;
  --accent: var(--cobalt);
  --serif-d: 'Fraunces', 'Georgia', serif;
  --serif-v: 'Cormorant Garamond', 'Georgia', serif;
  --serif-t: 'Spectral', 'Georgia', serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; }
html, body { background:var(--ink); }
body {
  color:var(--cream);
  font-family:var(--serif-t);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection { background:rgba(110,140,255,.32); color:#fff; }

/* ── canvas ─────────────────────────────────────── */
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }

/* ── loader ─────────────────────────────────────── */
#loader {
  position:fixed; inset:0; z-index:60; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 1.1s ease .15s, visibility 1.1s step-end .15s;
}
#loader.done { opacity:0; visibility:hidden; }
.loader-inner { text-align:center; }
.loader-gem {
  width:18px; height:26px; margin:0 auto 18px;
  background:linear-gradient(160deg, #9db4ff, #2f4bd8 70%);
  clip-path:polygon(50% 0, 100% 34%, 50% 100%, 0 34%);
  animation:gemPulse 1.6s ease-in-out infinite;
}
@keyframes gemPulse {
  0%,100% { opacity:.55; transform:scale(.94); filter:brightness(.8); }
  50%     { opacity:1;  transform:scale(1.05); filter:brightness(1.35); }
}
.loader-word {
  font-family:var(--serif-t); font-weight:200; font-size:13px;
  letter-spacing:.42em; text-transform:uppercase; color:var(--cream-dim);
  padding-left:.42em;
}
.ell i { font-style:normal; animation:ell 1.6s infinite; opacity:0; }
.ell i:nth-child(2){ animation-delay:.25s } .ell i:nth-child(3){ animation-delay:.5s }
@keyframes ell { 0%{opacity:0} 40%{opacity:1} 100%{opacity:0} }

/* ── masthead ───────────────────────────────────── */
#masthead {
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 34px; pointer-events:none;
  mix-blend-mode:screen;
}
.mast-left { display:flex; align-items:center; gap:14px; }
.mast-mark {
  font-family:var(--serif-d); font-weight:600; font-size:15px;
  letter-spacing:.14em; color:var(--cream);
}
.mast-rule { width:34px; height:1px; background:var(--cream-faint); }
.mast-sub {
  font-family:var(--serif-t); font-weight:200; font-size:10.5px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--cream-faint);
}
/* scroll cue — bottom center, appears after the intro settles */
#scrollCue {
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%);
  z-index:20; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--serif-t); font-weight:200; font-size:11px;
  letter-spacing:.36em; text-transform:uppercase; color:var(--cream-dim);
  text-shadow:0 0 18px rgba(6,8,15,.9);
  opacity:0; pointer-events:none; transition:opacity 1s ease;
  padding-left:.36em; /* optically re-center the letterspaced line */
}
#scrollCue.on { opacity:1; }
#scrollCue .cue-arrow { display:inline-block; animation:bob 2.1s ease-in-out infinite; font-size:14px; color:var(--gold); }
@keyframes bob { 0%,100%{transform:translateY(-2px)} 50%{transform:translateY(4px)} }

/* ── recipe rail ────────────────────────────────── */
#recipe-rail {
  position:fixed; left:30px; top:50%; transform:translateY(-50%);
  z-index:20; display:flex; gap:14px; align-items:stretch;
}
.rail-line { width:1px; background:rgba(240,231,211,.13); position:relative; border-radius:1px; }
.rail-fill { position:absolute; top:0; left:0; width:100%; height:0%; background:linear-gradient(var(--cobalt), var(--gold)); border-radius:1px; }
#railStops { list-style:none; display:flex; flex-direction:column; gap:22px; padding:4px 0; }
.stop {
  width:22px; height:22px; color:rgba(240,231,211,.28); cursor:pointer;
  position:relative; transition:color .5s ease, transform .5s cubic-bezier(.2,.9,.3,1.4);
}
.stop svg { width:100%; height:100%; display:block; }
.stop span {
  position:absolute; left:34px; top:50%; transform:translateY(-50%) translateX(-6px);
  font-family:var(--serif-t); font-weight:300; font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; white-space:nowrap; color:var(--cream-dim);
  opacity:0; transition:opacity .35s ease, transform .35s ease; pointer-events:none;
}
.stop:hover span { opacity:1; transform:translateY(-50%) translateX(0); }
.stop.lit { color:var(--rail-c, var(--cobalt)); transform:scale(1.12); }
.stop.past { color:rgba(240,231,211,.55); }

/* ── frost overlay (DOM part: edge blur veil) ───── */
#frost {
  position:fixed; inset:0; z-index:15; pointer-events:none; opacity:0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(160,190,255,.14) 74%, rgba(200,220,255,.30) 100%);
  backdrop-filter:none;
}

/* ── scroll doc / movements ─────────────────────── */
#doc { position:relative; z-index:10; }
.mv { position:relative; height:220vh; }
.mv:first-child { height:260vh; }
#mv-coda { height:180vh; }
/* overlap successive movements by one viewport: the next pin takes over
   the instant the previous one's range ends — no empty slide between */
.mv + .mv { margin-top:-100vh; }
.pin {
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center;
  padding:0 clamp(24px, 7vw, 110px);
}
.col { max-width:560px; }
.col-left  { margin-right:auto; margin-left:clamp(0px, 4vw, 70px); }
.col-right { margin-left:auto; margin-right:clamp(0px, 4vw, 70px); }
.col-center{ margin:0 auto; text-align:center; max-width:640px; }

/* reveal primitives — JS drives opacity/transform from scroll, these are fallbacks */
.reveal { opacity:0; transform:translateY(34px); will-change:opacity, transform; }

/* ── hero ───────────────────────────────────────── */
#mv-hero .pin { justify-content:center; }
.hero-stack { text-align:center; margin-top:8vh; }
.hero-over, .hero-under {
  font-family:var(--serif-v); font-style:italic; font-weight:400;
  font-size:clamp(15px, 1.7vw, 20px); color:var(--cream-dim);
  max-width:520px; margin:0 auto;
}
.hero-title {
  font-family:var(--serif-d); font-weight:300;
  font-size:clamp(54px, 9.6vw, 150px);
  line-height:.92; letter-spacing:.01em; color:var(--cream);
  margin:2.4vh 0; display:flex; flex-direction:column; align-items:center;
  gap:clamp(90px, 21vh, 220px); /* the pendant hangs in this gap, in place of the ampersand */
  text-shadow:0 0 60px rgba(110,140,255,.25);
}
.ht-line { display:block; }
.ht-word { display:inline-block; will-change:transform; }
.hero-under { letter-spacing:.06em; }

/* ── shared text roles ──────────────────────────── */
.kicker {
  font-family:var(--serif-t); font-weight:300; font-size:11px;
  letter-spacing:.4em; text-transform:uppercase; color:var(--accent);
  margin-bottom:26px;
}
.col-center .kicker { margin-bottom:34px; }
.mv-h {
  font-family:var(--serif-d); font-weight:300;
  font-size:clamp(38px, 5vw, 68px); line-height:1.04;
  letter-spacing:.005em; color:var(--cream); margin-bottom:30px;
}
.mv-h-center { margin-top:40px; }
.body {
  font-size:clamp(15px, 1.32vw, 17.5px); line-height:1.75;
  color:var(--cream-dim); margin-bottom:20px; max-width:52ch;
}
.body em { color:var(--cream); font-style:italic; }
.body-center { margin-left:auto; margin-right:auto; }
.aside {
  font-family:var(--serif-v); font-style:italic; font-size:clamp(16px,1.5vw,20px);
  line-height:1.6; color:var(--cream-dim); max-width:46ch; margin:26px auto 0;
}
.pull { margin-top:38px; border-left:1px solid var(--accent); padding-left:24px; }
.pull p {
  font-family:var(--serif-v); font-style:italic; font-weight:400;
  font-size:clamp(17px, 1.7vw, 22px); line-height:1.55; color:var(--cream);
}
.pull cite {
  display:block; margin-top:12px; font-family:var(--serif-t); font-style:normal;
  font-weight:300; font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--cream-faint);
}

/* verse — prophecy text */
.verse { margin:26px 0; }
.verse p {
  font-family:var(--serif-v); font-weight:500;
  font-size:clamp(19px, 2.1vw, 27px); line-height:1.85;
  color:var(--cream);
  text-shadow:0 0 34px rgba(217,164,65,.18);
}
.verse p em { font-style:italic; color:var(--accent); font-weight:500; }
.verse-dim p { color:var(--cream-dim); font-size:clamp(17px, 1.8vw, 23px); }
.verse-small { margin:30px 0 0; }
.verse-small p { font-size:clamp(16px, 1.6vw, 21px); line-height:1.8; color:var(--cream-dim); }
.verse-small p em { color:var(--accent); }

/* stanza tag */
.stanza-tag {
  display:flex; align-items:center; gap:12px; margin-bottom:24px;
  font-family:var(--serif-t); font-weight:300; font-size:10.5px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--cream-dim);
}
.stanza-tag .st-num { color:var(--accent); }
.stanza-tag .st-ing { color:var(--cream); }
.st-dot { width:3px; height:3px; border-radius:50%; background:var(--cream-faint); }

/* interaction hint */
.try {
  margin-top:36px; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--serif-t); font-weight:300; font-size:11px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--accent);
}
.try::before {
  content:''; width:26px; height:1px; background:var(--accent); opacity:.65;
}

/* kingdom accents */
#mv-egg    { --accent:var(--violet); }
#mv-flour  { --accent:var(--wheat); }
#mv-sugar  { --accent:var(--amber); }
#mv-butter { --accent:var(--butter); }
#mv-vanilla{ --accent:var(--blush); }
#mv-summon { --accent:var(--gold); }
#mv-coda   { --accent:var(--gold); }

/* ── vanilla reveal ─────────────────────────────── */
.stage-gap { height:32vh; } /* the pendant performs here */
#mv-vanilla .mv-h-center { margin-top:0; }
#mv-vanilla .verse { margin-top:0; }
#mv-vanilla .pin { align-items:flex-start; padding-top:7vh; }
.vanilla-word {
  font-family:var(--serif-d); font-style:italic; font-weight:400;
  color:var(--blush); font-size:1.25em;
  text-shadow:0 0 30px rgba(230,137,155,.4);
}
.reveal-name { display:flex; align-items:center; gap:22px; justify-content:center; margin-top:44px; }
.rn-rule { height:1px; width:min(120px, 14vw); background:linear-gradient(90deg, transparent, var(--cream-faint)); }
.rn-rule:last-child { background:linear-gradient(90deg, var(--cream-faint), transparent); }
.rn-text {
  font-family:var(--serif-t); font-weight:300; font-size:12px;
  letter-spacing:.4em; text-transform:uppercase; color:var(--cream);
  white-space:nowrap;
}

/* ── coda ───────────────────────────────────────── */
.coda-card { margin-top:52px; }
.coda-title {
  font-family:var(--serif-d); font-weight:300; font-size:clamp(30px,3.4vw,44px);
  color:var(--cream); margin-bottom:10px;
}
.coda-sub {
  font-family:var(--serif-v); font-style:italic; font-size:clamp(15px,1.5vw,19px);
  line-height:1.6; color:var(--cream-dim); margin-bottom:34px;
}
.coda-btn {
  font-family:var(--serif-t); font-weight:300; font-size:12px;
  letter-spacing:.36em; text-transform:uppercase;
  color:var(--cream); background:transparent;
  border:1px solid rgba(240,231,211,.3); border-radius:999px;
  padding:17px 42px 16px; cursor:pointer;
  transition:border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
.coda-btn:hover {
  border-color:var(--gold);
  box-shadow:0 0 34px rgba(217,164,65,.22), inset 0 0 18px rgba(217,164,65,.08);
  background:rgba(217,164,65,.05);
}
.coda-link {
  display:block; margin-top:26px;
  font-family:var(--serif-t); font-weight:300; font-size:12px;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
  padding-bottom:3px; border-bottom:1px solid rgba(217,164,65,.35);
  width:fit-content; margin-left:auto; margin-right:auto;
  transition:border-color .35s ease, text-shadow .35s ease;
}
.coda-link:hover {
  border-color:var(--gold);
  text-shadow:0 0 22px rgba(217,164,65,.55);
}
.colophon {
  margin-top:70px; font-family:var(--serif-t); font-weight:200; font-size:10.5px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--cream-faint);
}

/* ── chapter reader ─────────────────────────────── */
#reader {
  position:fixed; inset:0; z-index:50; visibility:hidden; opacity:0;
  transition:opacity .55s ease, visibility .55s step-end;
}
#reader.open { visibility:visible; opacity:1; transition:opacity .55s ease; }
.reader-scrim { position:absolute; inset:0; background:rgba(4,6,12,.72); backdrop-filter:blur(9px); }
.reader-page {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) translateY(26px);
  width:min(680px, calc(100vw - 40px)); height:min(82vh, 900px);
  background:linear-gradient(175deg, #f5edda, #ece1c6);
  color:#241d12; border-radius:3px;
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(240,231,211,.12);
  transition:transform .55s cubic-bezier(.2,.8,.25,1);
  display:flex; flex-direction:column;
}
#reader.open .reader-page { transform:translate(-50%,-50%) translateY(0); }
.reader-x {
  position:absolute; top:14px; right:18px; z-index:2;
  background:none; border:none; font-size:30px; line-height:1;
  color:rgba(36,29,18,.5); cursor:pointer; font-family:var(--serif-t);
}
.reader-x:hover { color:#241d12; }
.reader-body {
  overflow-y:auto; padding:clamp(34px, 6vw, 74px);
  font-family:var(--serif-v); font-weight:500; font-size:clamp(16px, 1.6vw, 19px);
  line-height:1.72; scrollbar-width:thin; scrollbar-color:rgba(36,29,18,.3) transparent;
}
.reader-body h3 {
  font-family:var(--serif-d); font-weight:400; font-size:13px;
  letter-spacing:.42em; text-transform:uppercase; text-align:center;
  color:rgba(36,29,18,.55); margin-bottom:8px;
}
.reader-body h2 {
  font-family:var(--serif-d); font-weight:300; font-size:clamp(28px,3vw,38px);
  text-align:center; margin-bottom:40px; color:#1d1710;
}
.reader-body p { margin-bottom:1.15em; }
.reader-body p:first-of-type::first-letter {
  font-family:var(--serif-d); font-weight:600; font-size:3.4em;
  float:left; line-height:.82; padding:4px 10px 0 0; color:#8a5a24;
}
.reader-end {
  text-align:center; font-family:var(--serif-t); font-weight:300; font-size:11px;
  letter-spacing:.4em; text-transform:uppercase; color:rgba(36,29,18,.45);
  margin-top:44px;
}

/* ── responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  #recipe-rail { left:14px; }
  .stop span { display:none; }
  .mast-sub { display:none; }
  .col { max-width:none; }
  .col-left, .col-right { margin-left:34px; margin-right:0; }
  .pin { padding:0 22px 0 52px; }
  /* centered movements: symmetric padding so "center" is the real center */
  #mv-hero .pin, #mv-summon .pin, #mv-vanilla .pin, #mv-coda .pin { padding:0 48px; }
  #mv-vanilla .pin { padding-top:7vh; }
  /* the reveal line must be allowed to wrap or it widens the whole column */
  .reveal-name { gap:12px; }
  .rn-text { white-space:normal; }
  .rn-rule { width:clamp(16px, 7vw, 60px); flex:0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mast-hint .hint-arrow, .loader-gem { animation:none; }
}

/* graceful no-WebGL fallback: the story still reads */
.no-gl #gl, .no-gl #frost, .no-gl .try { display:none; }
.no-gl .reveal, .no-gl [data-r] { opacity:1 !important; transform:none !important; }
.no-gl .mv { height:auto; min-height:100vh; }
.no-gl .mv + .mv { margin-top:0; }
.no-gl .pin { position:static; height:auto; padding-top:18vh; padding-bottom:12vh; }