/* ─────────────────────────────────────────────────────────────
   Scrollytale — shared chrome (intro · timeline · narrative · progress)
   Everything colour-related is driven by three CSS variables so a
   story only has to set { accent, bg, ink } to reskin the whole shell.
   ───────────────────────────────────────────────────────────── */

:root{
  --st-accent:#f0b44c;
  --st-bg:#14101c;
  --st-ink:#f0e6d8;
  --st-serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --st-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

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

body{
  margin:0; overflow:hidden;
  background:var(--st-bg);
  color:var(--st-ink);
  font-family:var(--st-sans);
  cursor:ns-resize;
  -webkit-font-smoothing:antialiased;
}
canvas{display:block}

/* ── Intro overlay ── */
#st-intro{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem;
  background:radial-gradient(circle at 50% 40%,
    color-mix(in srgb, var(--st-accent) 12%, var(--st-bg)) 0%, var(--st-bg) 70%);
  transition:opacity 1s ease, visibility 1s;
}
#st-intro.hidden{opacity:0; visibility:hidden; pointer-events:none}
#st-intro h1{
  font-family:var(--st-serif);
  font-size:clamp(2.4rem,6vw,4rem); font-weight:600; font-style:italic;
  color:var(--st-accent); margin-bottom:.3rem; letter-spacing:.02em;
  text-shadow:0 0 50px color-mix(in srgb, var(--st-accent) 35%, transparent);
}
#st-intro p{
  font-family:var(--st-serif); font-style:italic;
  font-size:clamp(.9rem,2vw,1.15rem); opacity:.55; margin-bottom:2.5rem;
}
#st-intro button{
  font-family:var(--st-serif); font-size:1rem; color:var(--st-accent);
  background:transparent; border:1px solid color-mix(in srgb, var(--st-accent) 40%, transparent);
  padding:.8rem 2.5rem; cursor:pointer; transition:all .4s;
}
#st-intro button:hover{
  background:color-mix(in srgb, var(--st-accent) 10%, transparent);
  border-color:var(--st-accent);
  box-shadow:0 0 30px color-mix(in srgb, var(--st-accent) 15%, transparent);
}

/* ── Timeline (right) ── */
#st-timeline{
  position:fixed; right:2rem; top:50%; transform:translateY(-50%); z-index:50;
  display:flex; flex-direction:column; align-items:flex-end;
  opacity:0; transition:opacity 1s;
}
#st-timeline.visible{opacity:1}
.st-node{display:flex; align-items:center; gap:.8rem; padding:.35rem 0; cursor:pointer}
.st-node .st-dot{
  width:8px; height:8px; border-radius:50%; order:2;
  background:color-mix(in srgb, var(--st-accent) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--st-accent) 30%, transparent);
  transition:all .4s;
}
.st-node .st-label{
  font-family:var(--st-serif); font-size:.68rem; font-style:italic; order:1;
  color:color-mix(in srgb, var(--st-ink) 30%, transparent);
  white-space:nowrap; text-align:right; transition:all .4s;
}
.st-node.active .st-dot{
  background:var(--st-accent); transform:scale(1.5);
  box-shadow:0 0 12px color-mix(in srgb, var(--st-accent) 50%, transparent);
}
.st-node.active .st-label{color:var(--st-accent)}

/* ── Narrative (bottom) ── */
#st-narrative{
  position:fixed; bottom:8%; left:50%; transform:translateX(-50%); z-index:50;
  text-align:center; max-width:600px; width:90%; pointer-events:none;
  transition:opacity .25s;
}
#st-narrative .st-step{
  font-family:var(--st-sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--st-accent); margin-bottom:.5rem; opacity:.7;
}
#st-narrative .st-title{
  font-family:var(--st-serif); font-size:clamp(1.4rem,3vw,2.1rem);
  font-weight:600; font-style:italic; line-height:1.2; margin-bottom:.6rem;
}
#st-narrative .st-desc{
  font-family:var(--st-serif); font-style:italic;
  font-size:clamp(.85rem,1.5vw,1rem); line-height:1.7; opacity:.6;
}

/* ── Scroll hint ── */
#st-hint{
  position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  opacity:0; transition:opacity 1s;
}
#st-hint.visible{opacity:.4}
#st-hint span{
  font-family:var(--st-sans); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--st-accent);
}
#st-hint .st-arrows{display:flex; flex-direction:column; gap:2px; animation:st-pulse 2s ease-in-out infinite}
#st-hint .st-arrows i{
  width:10px; height:10px; transform:rotate(45deg); opacity:.5;
  border-right:1px solid var(--st-accent); border-bottom:1px solid var(--st-accent);
}
@keyframes st-pulse{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.7;transform:translateY(4px)}}

/* ── Progress rail (left) ── */
#st-track{
  position:fixed; left:2rem; top:50%; transform:translateY(-50%); z-index:50;
  width:2px; height:200px;
  background:color-mix(in srgb, var(--st-accent) 8%, transparent);
}
#st-fill{
  width:100%; height:0; transition:height .3s;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--st-accent) 55%, #000), var(--st-accent));
}

@media (prefers-reduced-motion:reduce){
  #st-intro,#st-timeline,#st-narrative,#st-hint,#st-fill{transition:none!important}
  #st-hint .st-arrows{animation:none!important}
}