/* ============================================================
   THE DESCENT — stylesheet
   Built on the LUCA design system: deep void, hairline
   branches, warm bone type, the bioluminescent spectrum.
   ============================================================ */

:root{
  /* base / void */
  --void:#050607;
  --abyss:#0a0d12;
  --surface:#0f131a;
  --line:rgba(236,231,220,0.09);
  --line-strong:rgba(236,231,220,0.17);

  /* text — warm parchment, never pure white */
  --bone:#ECE7DC;
  --bone-dim:#A8ABB2;
  --bone-mute:#686D76;

  /* the spectrum of life */
  --animalia:#46C9FF;   /* cyan — us */
  --plantae:#5FE07A;    /* green */
  --fungi:#F2C04B;      /* gold */
  --protista:#9B6BFF;   /* violet */
  --monera:#5566F5;     /* indigo — the ancient depths */

  --accent:var(--animalia);
  --accent-glow:rgba(70,201,255,0.55);

  /* type */
  --display:"Fraunces", Georgia, serif;
  --ui:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  /* deep-time easing */
  --ease:cubic-bezier(0.16, 1, 0.3, 1);

  /* the running background temperature — driven by JS */
  --temp-top:#070a10;
  --temp-bot:#04050a;
}

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

html{
  background:var(--void);
  /* native scroll — the compositor handles it, so it can never freeze */
}

body{
  background:
    radial-gradient(140% 100% at 50% 0%, var(--temp-top), var(--temp-bot) 70%);
  color:var(--bone);
  font-family:var(--ui);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background 0.8s var(--ease);
}

/* ───────────── atmosphere: vignette + grain ───────────── */
.atmos{
  position:fixed;inset:0;pointer-events:none;z-index:60;
}
.atmos::before{               /* vignette */
  content:"";position:absolute;inset:0;
  background:radial-gradient(125% 95% at 50% 38%, transparent 42%, rgba(0,0,0,0.66) 100%);
}
.atmos::after{                /* film grain */
  content:"";position:absolute;inset:0;opacity:0.04;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* on phones the grain/vignette can render as a flat haze over everything — ease both off */
@media(max-width:760px){
  .atmos::before{background:radial-gradient(135% 100% at 50% 40%, transparent 55%, rgba(0,0,0,0.5) 100%)}
  .atmos::after{display:none}
}

/* ───────────── the fixed cosmos stage ───────────── */
#stage{
  position:fixed;inset:0;z-index:1;pointer-events:none;
}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ───────────── HUD ───────────── */
#hud{
  position:fixed;left:0;top:0;height:100vh;z-index:40;
  width:128px;padding:24px 0 24px 28px;
  display:flex;flex-direction:column;justify-content:space-between;
  pointer-events:none;
  font-family:var(--mono);
}
.hud-top .hud-eon{
  font-size:10px;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--accent);transition:color 0.8s var(--ease);
  min-height:14px;
}
.hud-top .hud-eon-sub{
  font-size:9px;letter-spacing:0.18em;color:var(--bone-mute);margin-top:6px;
}

.hud-clock{margin-top:auto;margin-bottom:auto}
.hud-clock .num{
  font-family:var(--display);font-weight:300;
  font-size:34px;line-height:0.95;letter-spacing:-0.02em;
  color:var(--bone);font-variant-numeric:tabular-nums;
}
.hud-clock .unit{
  font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--bone-mute);margin-top:8px;
}

/* depth gauge — a vertical track that fills as you descend */
.hud-gauge{
  position:absolute;left:13px;top:64px;bottom:64px;width:2px;
  background:var(--line);border-radius:2px;
}
.hud-gauge .fill{
  position:absolute;left:0;top:0;width:100%;
  background:linear-gradient(180deg,var(--accent),rgba(70,201,255,0.2));
  box-shadow:0 0 12px var(--accent-glow);
  border-radius:2px;height:0%;transition:background 0.8s var(--ease);
}
.hud-gauge .head{
  position:absolute;left:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);top:0%;
}
.hud-foot{font-size:9px;letter-spacing:0.2em;color:var(--bone-mute);text-transform:uppercase}

@media(max-width:720px){
  #hud{width:92px;padding:18px 0 18px 16px}
  .hud-gauge{left:9px;top:54px;bottom:54px}
  .hud-clock .num{font-size:26px}
}

/* ───────────── scroll progress hint (bottom) ───────────── */
.scroll-cue{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:40;display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--mono);font-size:9px;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--bone-mute);transition:opacity 0.6s var(--ease);pointer-events:none;
}
.scroll-cue .bar{width:1px;height:34px;background:linear-gradient(180deg,var(--bone-mute),transparent);
  animation:cue 2.6s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0.2);opacity:0.2}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(0.2);opacity:0.2}}

/* ───────────── audio toggle ───────────── */
.audio-toggle{
  position:fixed;right:24px;top:22px;z-index:50;pointer-events:auto;
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--bone-mute);background:none;border:none;transition:color 0.3s var(--ease);
}
.audio-toggle:hover{color:var(--bone)}
.audio-toggle .bars{display:flex;align-items:flex-end;gap:2px;height:13px}
.audio-toggle .bars i{width:2px;background:var(--bone-mute);height:4px;border-radius:2px;transition:background 0.3s}
.audio-toggle[data-on="true"]{color:var(--accent)}
.audio-toggle[data-on="true"] .bars i{background:var(--accent);animation:eq 1s var(--ease) infinite alternate}
.audio-toggle[data-on="true"] .bars i:nth-child(2){animation-delay:0.2s}
.audio-toggle[data-on="true"] .bars i:nth-child(3){animation-delay:0.4s}
.audio-toggle[data-on="true"] .bars i:nth-child(4){animation-delay:0.1s}
@keyframes eq{from{height:4px}to{height:13px}}

/* ───────────── scene scaffold ───────────── */
.scenes{position:relative;z-index:10}
.scene{
  position:relative;
  min-height:170vh;             /* extra height = scrub room */
  display:flex;justify-content:center;
}
.scene-inner{
  position:sticky;top:0;height:100vh;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 24px 0 152px;
  will-change:opacity,transform;
}
@media(max-width:720px){.scene-inner{padding:0 20px 0 104px}}

.scene-num{
  font-family:var(--mono);font-size:10px;letter-spacing:0.34em;text-transform:uppercase;
  color:var(--accent);opacity:0.85;margin-bottom:22px;
}
.scene h2{
  font-family:var(--display);font-weight:300;font-optical-sizing:auto;
  font-size:clamp(38px,7.4vw,92px);line-height:0.98;letter-spacing:-0.02em;
  max-width:14ch;text-wrap:balance;
}
.scene h2 em{font-style:italic;font-weight:400;color:var(--accent)}
.scene .binom{font-family:var(--display);font-style:italic;font-weight:400}
.scene .lede{
  margin-top:44px;max-width:46ch;color:var(--bone-dim);
  font-size:clamp(15px,1.7vw,19px);line-height:1.62;text-wrap:pretty;
}
.scene .caption{
  margin-top:30px;font-family:var(--mono);font-size:11px;letter-spacing:0.16em;
  color:var(--bone-mute);text-transform:uppercase;
}
.scene .caption b{color:var(--accent);font-weight:500}

/* the threshold dot (scene 00) */
#thresholdDot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow);z-index:9;
}
#thresholdDot.pulse{animation:ping 3s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(70,201,255,0.5)}70%,100%{box-shadow:0 0 0 26px rgba(70,201,255,0)}}

/* relatives that drift in (scene 01) */
.relatives{
  position:absolute;inset:0;z-index:8;pointer-events:none;
}
.relative{
  position:absolute;font-family:var(--display);font-style:italic;
  font-size:clamp(13px,1.5vw,18px);color:var(--bone-dim);white-space:nowrap;
  opacity:0;will-change:transform,opacity;
}
.relative::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:currentColor;margin-right:9px;vertical-align:middle;
  box-shadow:0 0 8px currentColor;opacity:0.8;
}

/* ───────────── Cambrian horizontal pan (scene 06) ───────────── */
.cambrian{min-height:340vh}
.cambrian .pin{position:sticky;top:0;height:100vh;overflow:hidden}
.cambrian .track{
  position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;
  will-change:transform;
}
.cambrian .bodyplan{
  flex:0 0 auto;width:62vw;max-width:560px;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 5vw;
}
.cambrian .bodyplan .k{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--protista);margin-bottom:16px}
.cambrian .bodyplan .sp{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(30px,4.6vw,58px);line-height:1;letter-spacing:-0.01em}
.cambrian .bodyplan .desc{margin-top:18px;color:var(--bone-dim);font-size:15px;max-width:34ch}
.cambrian .bodyplan svg{width:118px;height:118px;margin-bottom:30px;overflow:visible}
.cambrian .bodyplan svg path,.cambrian .bodyplan svg circle,.cambrian .bodyplan svg line{
  fill:none;stroke:var(--bone-dim);stroke-width:1.2;stroke-linecap:round}

/* ───────────── LUCA root + bloom (scenes 09–10) ───────────── */
#rootDot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:13px;height:13px;border-radius:50%;background:#FBE9C8;
  box-shadow:0 0 40px 6px rgba(251,233,200,0.6);z-index:9;opacity:0;
}

.bloom-caption{
  position:fixed;left:50%;bottom:13vh;transform:translateX(-50%);
  z-index:12;text-align:center;opacity:0;pointer-events:none;width:min(680px,86vw);
}
.bloom-caption .line{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(19px,2.7vw,30px);line-height:1.4;color:var(--bone)}
.bloom-caption .tip{margin-top:18px;font-family:var(--mono);font-size:10px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--accent)}

/* ───────────── footer ───────────── */
footer{
  position:relative;z-index:10;border-top:1px solid var(--line);
  padding:120px 24px 80px 152px;text-align:center;background:var(--void);
}
footer .quote{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(20px,3vw,32px);line-height:1.42;max-width:720px;margin:0 auto;color:var(--bone)}
footer .quote cite{display:block;margin-top:22px;font-style:normal;font-family:var(--mono);
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--bone-mute)}
footer .links{margin-top:64px;display:flex;gap:34px;justify-content:center;flex-wrap:wrap}
footer .links a{color:var(--bone-dim);text-decoration:none;font-size:13px;letter-spacing:0.02em;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .25s var(--ease),border-color .25s var(--ease)}
footer .links a:hover{color:var(--accent);border-color:var(--accent)}
footer .credit{margin-top:54px;font-family:var(--mono);font-size:10px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--bone-mute)}
footer .credit .star{color:var(--accent)}
@media(max-width:720px){footer{padding:90px 20px 64px 104px}}

/* ───────────── reduced-motion: calm, static, top-to-bottom ───────────── */
.reduced #stage{position:absolute;height:100%}
.reduced .scroll-cue,.reduced #thresholdDot.pulse{animation:none}
.reduced .scene{min-height:auto;padding:96px 0}
.reduced .scene-inner{position:static;height:auto;min-height:60vh}
.reduced .relative{opacity:0.9!important;position:static;display:inline-block;margin:6px 14px;transform:none!important}
.reduced .relatives{position:static;display:flex;flex-wrap:wrap;justify-content:center;margin-top:28px}
.reduced .cambrian .pin{position:static;height:auto;overflow:visible}
.reduced .cambrian .track{position:static;transform:none!important;flex-wrap:wrap;justify-content:center;gap:40px}
.reduced .cambrian .bodyplan{width:auto;max-width:340px;height:auto;padding:0}
.reduced .scroll-cue{display:none}
.reduced #thresholdDot,.reduced #rootDot{opacity:1}
.reduced .bloom-caption{position:static;transform:none;opacity:1;margin:60px auto 0}

/* a quiet entrance for static content */
.reduced .scene-inner>*{opacity:1!important;transform:none!important}

/* ───────────── Ascent: button + replay overlay ───────────── */
.ascent-btn{
  margin-top:48px;display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:18px 26px 16px;cursor:pointer;text-align:left;
  background:linear-gradient(180deg,rgba(236,231,220,0.05),rgba(236,231,220,0.02));
  border:1px solid var(--line-strong);border-radius:2px;
  color:var(--bone);transition:border-color 0.5s var(--ease),background 0.5s var(--ease),transform 0.5s var(--ease);
  position:relative;overflow:hidden;
}
.ascent-btn:hover{border-color:var(--accent);background:linear-gradient(180deg,rgba(70,201,255,0.10),rgba(70,201,255,0.02));transform:translateY(-2px)}
.ascent-btn .ab-glyph{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:22px;color:var(--accent);opacity:0.7;transition:transform 0.6s var(--ease),opacity 0.5s var(--ease);
}
.ascent-btn:hover .ab-glyph{transform:translateY(-70%);opacity:1}
.ascent-btn .ab-label{font-family:var(--ui);font-size:15px;letter-spacing:0.02em;padding-right:28px}
.ascent-btn .ab-sub{font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--bone-mute)}

#ascentStage{
  position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;
  transition:opacity 0.7s var(--ease);
}
#ascentStage.on{opacity:1;pointer-events:auto}
.ascent-vignette{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 46%, transparent 40%, rgba(3,4,6,0.55) 100%);
}
.ascent-readout{
  position:absolute;left:0;right:0;bottom:11%;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.ascent-readout .ar-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:0.42em;text-transform:uppercase;
  color:var(--accent);opacity:0.85;
}
.ascent-readout .ar-cap{
  font-family:var(--display);font-size:clamp(22px,3.4vw,40px);font-weight:300;
  font-style:italic;color:var(--bone);letter-spacing:0.01em;
  text-shadow:0 2px 30px rgba(0,0,0,0.6);min-height:1.3em;
}
body.ascending{overflow:hidden}
@media(max-width:720px){
  .ascent-readout{bottom:16%}
  .ascent-btn{margin-top:34px}
}

/* ============================================================
   PHONE OPTIMIZATION (≤600px)
   The left HUD rail is dissolved into corner readouts so the
   scene text can use the full width and genuinely centre.
   Type is retuned for small screens; svh kills the toolbar jump.
   ============================================================ */
@media(max-width:600px){
  /* ---- scene text: symmetric padding, true centring ---- */
  .scene-inner{
    padding:0 22px;
    height:100vh;height:100svh;
  }
  .scene{min-height:150vh;min-height:150svh}
  .scene-num{margin-bottom:15px;font-size:9px;letter-spacing:0.3em}
  .scene h2{font-size:clamp(30px,8.6vw,46px);max-width:15ch}
  .scene .lede{margin-top:26px;font-size:15.5px;line-height:1.6;max-width:33ch}
  .scene .caption{margin-top:22px;font-size:10px;letter-spacing:0.13em}

  /* ---- HUD → corner readouts (no reserved column) ---- */
  #hud{width:100%;height:auto;inset:auto;padding:0}
  .hud-gauge{left:0;top:0;bottom:0;width:3px}          /* thin progress line, far-left edge */
  .hud-top{position:fixed;left:16px;top:15px}
  .hud-top .hud-eon{font-size:9.5px}
  .hud-top .hud-eon-sub{font-size:8px;margin-top:4px}
  .hud-clock{position:fixed;left:16px;bottom:16px;margin:0}
  .hud-clock .num{font-size:23px}
  .hud-clock .unit{font-size:8px;max-width:140px;margin-top:5px}
  .hud-foot{display:none}                               /* depth is redundant with the gauge */

  /* ---- floating controls ---- */
  .audio-toggle{right:16px;top:14px}
  .scroll-cue{bottom:18px}
  .scroll-cue .bar{height:26px}

  /* ---- relatives: smaller, kept clear of the headline ---- */
  .relative{font-size:11px}

  /* ---- Cambrian panels fill more of the narrow screen ---- */
  .cambrian{min-height:300vh;min-height:300svh}
  .cambrian .bodyplan{width:84vw;max-width:none;padding:0 8vw}
  .cambrian .bodyplan svg{width:92px;height:92px;margin-bottom:22px}
  .cambrian .bodyplan .desc{font-size:14px;max-width:30ch}

  /* ---- footer + finale back to symmetric ---- */
  footer{padding:80px 22px 60px}
  footer .quote{font-size:clamp(19px,5.4vw,26px)}
  footer .links{gap:24px;margin-top:48px}
  .bloom-caption{bottom:16vh;width:88vw}
  .ascent-btn{width:100%}
}