/* ---------- The Road: pinned scroll story ---------- */
.story{position:relative;height:1100vh;padding:0;--stage:#24b993}
.st-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#05070c}
#storyCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.st-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(5,7,12,.5) 0%,rgba(5,7,12,.22) 32%,transparent 52%)}
.st-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(5,7,12,.55) 0%,transparent 34%,transparent 78%,rgba(5,7,12,.55) 100%)}

/* chapter copy */
.st-copy{position:absolute;left:clamp(16px,6vw,96px);top:clamp(88px,15vh,150px);z-index:3;width:min(600px,calc(100vw - 32px));pointer-events:none}
.st-ch{position:absolute;top:0;left:0;width:100%;visibility:hidden}
.st-ch.on{visibility:visible}
.st-ch .kicker{color:var(--stage);transition:color .6s}
.st-ch h2{font-size:clamp(36px,5.8vw,88px);line-height:.92;letter-spacing:-.05em;max-width:none}
.st-ch h2 .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.st-ch h2 .wd>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease) calc(var(--i)*55ms)}
.st-ch.on h2 .wd>span{transform:none}
.st-ch.leave h2 .wd>span{transform:translateY(-105%);transition-duration:.5s;transition-delay:calc(var(--i)*25ms)}
.st-ch h2 em{font-style:normal;color:var(--stage);transition:color .6s}
.st-ch p{margin-top:20px;max-width:440px;font-size:clamp(15px,1.3vw,18px);line-height:1.55;color:rgba(238,241,246,.78);
  opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease) .25s,transform .9s var(--ease) .25s}
.st-ch.on p{opacity:1;transform:none}
.st-ch.leave p{opacity:0;transform:translateY(-10px);transition-delay:0s}
.st-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;pointer-events:auto;opacity:0;transition:opacity .6s .4s}
.st-ch.on .st-actions{opacity:1}

/* HUD */
.st-hud{position:absolute;z-index:3;right:clamp(16px,4vw,56px);top:clamp(88px,15vh,150px);width:min(340px,calc(100vw - 32px));
  padding:20px 20px 16px;border-radius:22px;background:rgba(7,10,17,.66);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
  opacity:0;transform:translateY(24px) scale(.97);transition:opacity .7s var(--ease),transform .9s var(--ease);pointer-events:none}
.st-hud.on{opacity:1;transform:none;pointer-events:auto}
.hud-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.hud-row b{color:var(--text);font-weight:600}
.hud-status{color:var(--stage);transition:color .6s;text-align:right;max-width:62%}
.odo{display:flex;align-items:flex-start;font-size:clamp(34px,3.6vw,48px);font-weight:600;letter-spacing:-.03em;height:1.15em;line-height:1.15em;overflow:hidden;margin:10px 0 6px}
.odo .d{display:inline-block;height:1.15em;overflow:hidden}
.odo .d>span{display:block;transition:transform .7s var(--ease)}
.odo .d>span i{display:block;font-style:normal;height:1.15em}
.odo .s{display:inline-block}
.hud-split{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
.hud-split b{color:var(--text);font-weight:600}
.hud-chart{display:block;width:100%;height:64px;margin:14px 0 12px}
.miles{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.miles li{position:relative;padding:10px 6px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.07);text-align:center;font-size:10px;line-height:1.3;color:var(--mute);transition:all .5s var(--ease)}
.miles li svg{display:block;width:26px;height:18px;margin:0 auto 6px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.miles li b{display:block;color:inherit;font-weight:600}
.miles li.done{color:var(--c);border-color:color-mix(in srgb,var(--c) 35%,transparent)}
.miles li.now{color:#06080d;background:var(--c);border-color:var(--c);transform:translateY(-3px);box-shadow:0 10px 30px -8px var(--c)}
.hud-ctl{margin-top:14px;display:grid;gap:6px}
.hud-ctl label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.hud-ctl output{color:var(--text);font-weight:600;letter-spacing:0}
.hud-fine{margin-top:12px;font-size:10px;line-height:1.45;color:#5d6577}
input[type=range].rng{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}
input[type=range].rng::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--stage) var(--fill,50%),rgba(255,255,255,.1) var(--fill,50%))}
input[type=range].rng::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--stage) var(--fill,50%),rgba(255,255,255,.1) var(--fill,50%))}
input[type=range].rng::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:#fff;border:4px solid var(--stage);box-shadow:0 0 0 6px color-mix(in srgb,var(--stage) 18%,transparent)}
input[type=range].rng::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:4px solid var(--stage)}
input[type=range].rng:focus-visible{outline:2px solid var(--stage);outline-offset:4px;border-radius:6px}

/* chapter bar */
.st-bar{position:absolute;z-index:3;left:clamp(16px,6vw,96px);right:clamp(16px,6vw,96px);bottom:22px;display:flex;align-items:flex-end;gap:14px}
.st-play{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(7,10,17,.6);color:var(--text);
  display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px);transition:background .3s,border-color .3s,transform .4s var(--ease)}
.st-play:hover{background:var(--stage);border-color:var(--stage);color:#06080d;transform:scale(1.08)}
.st-play svg{width:16px;height:16px;fill:currentColor}
.st-chapters{flex:1;display:flex;gap:6px}
.st-chapters button{all:unset;cursor:pointer;flex:var(--w) 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;font:500 10px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,241,246,.4);transition:color .4s}
.st-chapters button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-chapters button i{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;position:relative}
.st-chapters button i::after{content:"";position:absolute;inset:0;background:var(--stage);transform:scaleX(var(--k,0));transform-origin:left;transition:background .6s}
.st-chapters button.on{color:var(--text)}
.st-chapters button:focus-visible{outline:2px solid var(--stage);outline-offset:6px;border-radius:4px}
.st-hint{position:absolute;z-index:3;left:50%;bottom:84px;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,241,246,.55);transition:opacity .6s;display:flex;align-items:center;gap:10px}
.st-hint i{width:18px;height:28px;border:1px solid currentColor;border-radius:10px;position:relative}
.st-hint i::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:6px;margin-left:-1px;border-radius:2px;background:currentColor;animation:wheel 1.6s var(--ease) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}100%{transform:translateY(9px);opacity:0}}

@media (max-width:820px){
  .st-copy{top:94px}
  .st-ch h2{font-size:clamp(32px,9vw,48px)}
  .st-ch p{font-size:14px;margin-top:12px;max-width:92%}
  .st-hud{top:auto;bottom:74px;right:12px;left:12px;width:auto;padding:12px 14px 10px;border-radius:16px}
  .hud-chart,.hud-fine{display:none}
  .odo{font-size:30px;margin:6px 0 4px}
  .miles{margin-top:8px}
  .miles li{padding:6px 2px 5px;font-size:9px}
  .miles li svg{width:20px;height:14px;margin-bottom:3px}
  .miles li small{display:none}
  .hud-ctl{margin-top:8px}
  .st-chapters button span{display:none}
  .st-hint{bottom:auto;top:46%}
}
@media (max-width:820px) and (max-height:700px){.st-ch p{display:none}}

/* chapter-specific entrances: each title moves the way its chapter feels */
.st-ch[data-fx=focus] h2 .wd>span,.st-ch.leave[data-fx=focus] h2 .wd>span{transform:none;filter:blur(18px);opacity:0;letter-spacing:.06em;
  transition:filter 1.3s var(--ease) calc(var(--i)*90ms),opacity 1s calc(var(--i)*90ms),letter-spacing 1.3s var(--ease) calc(var(--i)*90ms)}
.st-ch.on[data-fx=focus] h2 .wd>span{filter:none;opacity:1;letter-spacing:0}
.st-ch[data-fx=zoom] h2{transform:scale(1.8);transform-origin:0 60%;opacity:0;filter:blur(8px);transition:transform 1.7s var(--ease),opacity .9s,filter 1.3s var(--ease)}
.st-ch.on[data-fx=zoom] h2{transform:none;opacity:1;filter:none}
.st-ch.leave[data-fx=zoom] h2{transform:scale(.85);opacity:0;transition-duration:.5s}
.st-ch[data-fx=zoom] h2 .wd>span,.st-ch[data-fx=lights] h2 .wd>span{transform:none!important}
.st-ch[data-fx=lights] h2 .wd>span{opacity:0;transition:opacity .3s}
.st-ch.on[data-fx=lights] h2 .wd>span{animation:flickerOn 1.5s steps(1,end) calc(.15s + var(--i)*170ms) both}
.st-ch.on[data-fx=lights] h2 em{text-shadow:0 0 28px currentColor}
@keyframes flickerOn{0%{opacity:0}8%{opacity:1}12%{opacity:.12}22%{opacity:1}27%{opacity:.35}40%,100%{opacity:1}}
.st-ch.on[data-fx=scramble] h2{animation:glitch 3.2s infinite}
@keyframes glitch{0%,84%,100%{text-shadow:none;transform:none}
  86%{text-shadow:4px 0 rgba(255,77,109,.85),-4px 0 rgba(19,164,214,.85);transform:translateX(3px)}
  88%{text-shadow:-5px 0 rgba(255,77,109,.85),5px 0 rgba(19,164,214,.85);transform:translateX(-4px) skewX(-6deg)}
  90%{text-shadow:2px 0 rgba(255,77,109,.6),-2px 0 rgba(19,164,214,.6);transform:none}}

/* sound toggle: equaliser bars that dance when sound is on */
.eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:2px;height:4px;border-radius:2px;background:currentColor;transition:height .3s}
.on>.eq i,.on .eq i{animation:eq .9s ease-in-out infinite}
.on .eq i:nth-child(2){animation-delay:-.3s}.on .eq i:nth-child(3){animation-delay:-.6s}.on .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}
.st-sound.on{background:var(--stage);border-color:var(--stage);color:#06080d}
.wants .eq i{background:var(--stage)}
@media (prefers-reduced-motion:reduce){.on .eq i{animation:none;height:10px}}