:root{
  --obsidian:#07070c;
  --ink:#0d0d16;
  --indigo:#1b1533;
  --amber:#ff9a52;
  --amber-soft:#ffca8f;
  --ember:#c8452a;
  --aurora:#57e0c8;
  --bone:#f3ead9;
  --bone-dim:#b9ad97;
  --edge:rgba(243,234,217,0.14);
  --serif:"Cormorant Garamond", Georgia, serif;
  --display:"Cinzel", "Cormorant Garamond", serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;background:var(--obsidian);color:var(--bone)}
body{
  font-family:var(--serif);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}
a{color:inherit}

/* the page never scrolls natively — a virtual scrubber drives the rite */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,
body::-webkit-scrollbar{width:0;height:0;display:none}

#scene{
  position:fixed;inset:0;
  width:100vw;height:100vh;
  display:block;
  z-index:1;
}

/* atmosphere overlays over the canvas */
#vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(3,3,7,0.55) 100%);
  mix-blend-mode:multiply;
}
#grain{
  position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:0.05;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 0.7s steps(1) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-2%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}
}

#scroll-spacer{display:none}

/* ---------- Loader ---------- */
#loader{
  position:fixed;inset:0;z-index:50;
  background:var(--obsidian);
  display:flex;align-items:center;justify-content:center;
  transition:opacity 1.1s ease, visibility 1.1s;
}
#loader.done{opacity:0;visibility:hidden}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.loader-mark{
  font-size:20px;color:var(--amber);
  animation:spin 3.4s linear infinite;
  filter:drop-shadow(0 0 14px rgba(255,154,82,0.6));
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-bar{
  width:190px;height:1px;background:var(--edge);position:relative;overflow:hidden;
}
#loader-fill{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,var(--ember),var(--amber),var(--amber-soft));transition:width .35s ease}
.loader-pct{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--bone-dim)}

/* ---------- Overlays ---------- */
.overlay{
  position:fixed;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:8vw;
  background:radial-gradient(90% 90% at 50% 50%, rgba(7,7,12,0.30) 0%, rgba(7,7,12,0.72) 100%);
  transition:opacity 1.2s ease, visibility 1.2s;
}
.hidden-init{opacity:0;visibility:hidden}
.overlay.gone{opacity:0;visibility:hidden;pointer-events:none}
.overlay.show{opacity:1;visibility:visible}

.intro-content,.finale-content{width:100%;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:26px}

.kicker{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.52em;text-transform:uppercase;
  color:var(--amber-soft);
  margin-right:-.52em; /* compensate trailing letter-spacing so it optically centers */
}
.title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.4rem,8.4vw,7.2rem);
  letter-spacing:.14em;
  margin-right:-.14em; /* pull back the trailing track so MONOLITH sits dead centre */
  line-height:.95;
  color:var(--bone);
  text-shadow:0 0 60px rgba(255,154,82,0.28), 0 0 2px rgba(243,234,217,0.5);
  max-width:100%;
}
.verse{
  font-size:clamp(1.05rem,2.4vw,1.5rem);
  font-style:italic;
  line-height:1.85;
  color:var(--bone-dim);
  max-width:52ch;
}
.enter-btn{
  margin-top:8px;
  background:transparent;
  border:1px solid var(--edge);
  color:var(--bone);
  font-family:var(--display);
  letter-spacing:.28em;
  font-size:.82rem;
  text-transform:uppercase;
  padding:20px 40px;
  display:flex;flex-direction:column;gap:9px;align-items:center;
  cursor:pointer;
  transition:border-color .5s ease, background .5s ease, letter-spacing .5s ease;
  backdrop-filter:blur(2px);
}
.enter-btn em{
  font-family:var(--mono);font-style:normal;
  font-size:9.5px;letter-spacing:.32em;color:var(--bone-dim);
  text-transform:lowercase;
}
.enter-btn:hover{
  border-color:var(--amber);
  background:rgba(255,154,82,0.06);
  letter-spacing:.36em;
}

.corner{
  position:fixed;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.24em;
  color:var(--bone-dim);
  text-transform:uppercase;
  opacity:.7;
}
.corner.tl{top:34px;left:34px}
.corner.tr{top:34px;right:34px}
.corner.bl{bottom:34px;left:34px;letter-spacing:.5em}
.corner.br{bottom:34px;right:34px}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:12;pointer-events:none;transition:opacity 1s ease}

/* the vertical rail doubles as the scrubber — drag it, click it, or just scroll */
.progress-rail{
  position:fixed;left:40px;top:50%;transform:translateY(-50%);
  width:2px;height:46vh;max-height:440px;
  background:linear-gradient(180deg,transparent,var(--edge) 10%,var(--edge) 90%,transparent);
  pointer-events:auto;cursor:ns-resize;
}
.progress-rail::before{content:"";position:absolute;inset:-24px -20px} /* generous hit area */
#progress-fill{
  position:absolute;left:0;top:0;width:2px;height:0%;
  background:linear-gradient(180deg,var(--amber),var(--amber-soft) 45%,var(--aurora));
  box-shadow:0 0 14px rgba(255,154,82,.7);
}
#progress-fill::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,50%);
  background:var(--bone);
  box-shadow:0 0 12px 2px var(--amber-soft), 0 0 5px #fff;
}
.rail-tick{
  position:absolute;left:-4px;width:10px;height:1px;
  background:var(--edge);transition:background .5s ease, box-shadow .5s ease;
}
.rail-tick.past{background:var(--amber-soft);box-shadow:0 0 6px rgba(255,154,82,.55)}

.chapter{
  position:fixed;left:66px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:6px;
}
.chapter-num{font-family:var(--display);font-size:1.5rem;letter-spacing:.1em;color:var(--bone)}
.chapter-text{font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--bone-dim)}
.chapter{transition:opacity .6s ease}

.mute-btn{
  position:fixed;bottom:30px;right:34px;
  pointer-events:auto;
  background:transparent;border:1px solid var(--edge);color:var(--bone-dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  padding:10px 16px;cursor:pointer;
  transition:color .4s, border-color .4s;
}
.mute-btn:hover{color:var(--amber);border-color:var(--amber)}
.mute-btn.off{opacity:.45}

/* ---------- Finale (a quiet panel at the foot, so the scene stays visible) ---------- */
.finale{
  justify-content:flex-end;
  padding:0 8vw 7vh;
  background:linear-gradient(to top, rgba(6,6,11,0.92) 0%, rgba(6,6,11,0.55) 38%, rgba(6,6,11,0) 78%);
}
.finale .finale-content{gap:14px;max-width:600px}
.finale-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.7rem,4.4vw,2.9rem);letter-spacing:.07em;color:var(--bone);
  text-shadow:0 0 50px rgba(87,224,200,.3);
}
.finale .verse{font-size:clamp(.92rem,1.8vw,1.12rem);line-height:1.7}
.finale-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.ghost-btn{
  background:transparent;border:1px solid var(--edge);color:var(--bone);
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  padding:14px 24px;cursor:pointer;text-decoration:none;
  transition:border-color .4s, background .4s;
}
.ghost-btn:hover{border-color:var(--aurora);background:rgba(87,224,200,.06)}
.colophon{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;line-height:2.2;
  color:var(--bone-dim);text-transform:uppercase;margin-top:14px;opacity:.7;
}

/* hint to scroll */
#scroll-hint{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);
  z-index:12;font-family:var(--mono);font-size:10px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--bone-dim);white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;transition:opacity 1s ease;pointer-events:none;
}
#scroll-hint.on{opacity:1}
#scroll-hint .line{width:1px;height:40px;background:linear-gradient(var(--bone-dim),transparent);animation:drop 2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

@media (max-width:640px){
  .corner.tr,.corner.br{display:none}
  .progress-rail{left:20px}
  .chapter{left:44px}
  .chapter-num{font-size:1.2rem}
  .verse{line-height:1.7}
  #grain{opacity:.04}
}

@media (prefers-reduced-motion:reduce){
  #grain,.loader-mark,#scroll-hint .line{animation:none}
}