/* ============================================================
   The Great Rewiring — 3D scene / experience styles
   ============================================================ */
:root{
  --ink:#0a0e14;
  --paper:#e8e4da;
  --muted:#8a94a6;
  --gold:#d4a24a;
  --gold-hi:#f0c069;
  --teal:#39d0c3;
  --hairline:rgba(138,148,166,.22);
  --glass:rgba(13,18,26,.52);
  --glass-border:rgba(138,148,166,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:"Space Grotesk",sans-serif;
  overflow-x:hidden;
}
#track{height:720vh}

canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(4,6,10,.62) 100%);
}

/* ---------- chrome ---------- */
.brand{
  position:fixed;top:28px;left:32px;z-index:5;
  font-family:"JetBrains Mono",monospace;font-weight:700;font-size:15px;
  letter-spacing:.34em;color:var(--paper);text-decoration:none;
  transition:color .25s;
}
.brand:hover{color:var(--gold-hi)}
.brand span{color:var(--gold)}
.brand small{
  display:block;margin-top:6px;font-weight:400;font-size:10px;
  letter-spacing:.18em;color:var(--muted);transition:color .25s;
}
.brand:hover small{color:var(--gold)}

.chapter-tag{
  position:fixed;top:30px;right:36px;z-index:5;text-align:right;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;
  color:var(--muted);
}
.chapter-tag b{color:var(--teal);font-weight:500}

.rail{
  position:fixed;right:36px;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;gap:18px;
}
.rail button{
  width:26px;height:26px;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  position:relative;
}
.rail button i{
  display:block;width:7px;height:7px;border-radius:50%;
  background:var(--muted);opacity:.35;transition:all .35s ease;
}
.rail button:hover i{opacity:.8}
.rail button.on i{
  background:var(--teal);opacity:1;
  box-shadow:0 0 12px rgba(57,208,195,.8);
  transform:scale(1.35);
}
.rail button .lbl{
  position:absolute;right:34px;white-space:nowrap;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;
  color:var(--muted);opacity:0;transition:opacity .3s;pointer-events:none;
}
.rail button:hover .lbl,.rail button.on .lbl{opacity:1}

/* ---------- chapters ---------- */
.stage{position:fixed;inset:0;z-index:2;pointer-events:none}
.chapter{
  position:absolute;max-width:600px;opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
.chapter.on{opacity:1;transform:translateY(0)}

/* glass panel behind text */
.panel{
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  backdrop-filter:blur(12px) saturate(1.15);
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:36px 40px;
  box-shadow:0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(232,228,218,.06);
}
.chapter.on .panel,
.chapter.on a,
.chapter.on button{pointer-events:auto}

.kick{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;
  letter-spacing:.3em;color:var(--teal);margin-bottom:18px;
}
.kick em{font-style:normal;color:var(--gold)}
h1,h2{font-family:"Fraunces",serif;font-weight:340;line-height:1.04}
h1{font-size:clamp(46px,6.5vw,92px);letter-spacing:-.015em}
h1 .thin{font-style:italic;font-weight:300;color:var(--gold-hi)}
h2{font-size:clamp(32px,3.9vw,50px);letter-spacing:-.01em;margin-bottom:18px}
h2 .thin{font-style:italic;color:var(--teal)}
.body{
  font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.72;color:#c6cbd4;
  font-weight:300;max-width:48ch;
}
.body b{color:var(--paper);font-weight:500}
.stat-row{
  margin-top:26px;display:flex;align-items:baseline;gap:14px;
  border-top:1px solid var(--hairline);padding-top:16px;
}
.stat-num{
  font-family:"JetBrains Mono",monospace;font-weight:700;
  font-size:clamp(28px,2.7vw,38px);letter-spacing:-.02em;
}
.stat-cap{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;color:var(--muted);line-height:1.7}

/* placement per chapter */
#ch0{left:50%;top:44%;transform:translate(-50%,calc(-50% + 28px));text-align:center;max-width:880px}
#ch0.on{transform:translate(-50%,-50%)}
#ch0 .body{margin:22px auto 0;max-width:56ch}
#ch0 .scroll-cue{
  margin-top:36px;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.3em;color:var(--muted);
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(6px)}}

#ch1{right:7vw;top:50%;transform:translateY(calc(-50% + 28px))}
#ch1.on{transform:translateY(-50%)}
#ch2{left:7vw;top:50%;transform:translateY(calc(-50% + 28px))}
#ch2.on{transform:translateY(-50%)}
#ch3{right:7vw;top:50%;transform:translateY(calc(-50% + 28px))}
#ch3.on{transform:translateY(-50%)}
#ch4{left:7vw;top:50%;transform:translateY(calc(-50% + 28px))}
#ch4.on{transform:translateY(-50%)}

/* finale */
#ch5{left:50%;top:47%;transform:translate(-50%,calc(-50% + 28px));text-align:center;max-width:720px}
#ch5.on{transform:translate(-50%,-50%)}
#ch5 .body{margin:0 auto}
#ch5 .stat-row{justify-content:center;display:none}

.cta{
  display:inline-block;margin-top:30px;
  font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:500;
  letter-spacing:.24em;color:var(--ink);text-decoration:none;
  background:var(--teal);
  border-radius:999px;padding:16px 30px;
  box-shadow:0 0 34px rgba(57,208,195,.35);
  transition:background .25s, transform .25s, box-shadow .25s;
}
.cta span{display:inline-block;margin-left:8px;transition:transform .25s}
.cta:hover{background:#5ce4d8;transform:translateY(-2px);box-shadow:0 0 46px rgba(57,208,195,.55)}
.cta:hover span{transform:translateX(5px)}

.fin{
  margin-top:26px;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.22em;color:var(--muted);
}

.num-gold{color:var(--gold-hi)}
.num-teal{color:var(--teal)}

/* ---------- disclaimer ---------- */
.disclaimer{
  position:fixed;left:50%;bottom:30px;z-index:6;
  transform:translateX(-50%);
  width:min(680px, calc(100vw - 40px));
  background:rgba(13,18,26,.66);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:20px 24px;
  display:flex;align-items:center;gap:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  opacity:1;transition:opacity .5s ease, transform .5s ease;
}
.disclaimer.hidden{opacity:0;transform:translateX(-50%) translateY(18px);pointer-events:none}
.disclaimer p{
  font-size:12.5px;line-height:1.75;color:#b9c0cc;font-weight:300;
}
.disclaimer p b{color:var(--paper);font-weight:500}
.disclaimer p em{font-style:normal;color:var(--teal)}
.disclaimer button{
  flex-shrink:0;cursor:pointer;
  font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.22em;color:var(--paper);
  background:none;border:1px solid var(--hairline);border-radius:999px;
  padding:12px 20px;
  transition:border-color .25s,color .25s,background .25s;
}
.disclaimer button:hover{border-color:var(--teal);color:var(--teal)}

/* fallback */
#nogl{
  position:fixed;inset:0;z-index:9;display:none;place-items:center;
  background:var(--ink);text-align:center;padding:24px;
  font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--muted);line-height:2;
}

@media (max-width:760px){
  .rail{display:none}
  .chapter{max-width:calc(100vw - 36px);left:18px !important;right:auto !important;text-align:left}
  #ch0,#ch5{text-align:center;left:50% !important}
  .panel{padding:26px 22px}
  .brand{top:20px;left:20px}
  .chapter-tag{display:none}
  .disclaimer{flex-direction:column;text-align:center;gap:12px;padding:18px}
}
@media (prefers-reduced-motion:reduce){
  .chapter{transition:opacity .4s}
  #ch0 .scroll-cue{animation:none}
}