/* fixed 3D canvas behind the pinned journey; captions on the right (RTL), the stage on the left */
.stage{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:0;transition:opacity 1.2s var(--ease);background:var(--bg)}
.ready .stage{opacity:1}
.stage.off{visibility:hidden}
.no-gl .stage{opacity:1;background:linear-gradient(90deg,transparent 40%,var(--bg) 75%),url(img/firemagic.webp) 0 50%/cover no-repeat}
.journey{position:relative;height:1000vh;z-index:1}
.hud{position:sticky;top:0;height:100svh;overflow:hidden}
.cap{position:absolute;right:var(--gut);bottom:clamp(5rem,13vh,8rem);max-width:min(32rem,calc(100% - 2*var(--gut)));opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .9s var(--ease);pointer-events:none;text-shadow:0 2px 24px var(--bg)}
.cap.on{opacity:1;transform:none;pointer-events:auto}
.cap h2{margin-block:.5rem .8rem}
.cap p:not(.label){color:var(--ink-2);max-width:34ch}
.cap--hero{max-width:min(46rem,calc(100% - 2*var(--gut)))}
.cap--hero h1{margin-block:1rem 1.2rem}
.cap--hero .row{margin-top:1.6rem}
.cap--top{top:clamp(6rem,16vh,10rem);bottom:auto}
.hint{font-size:.9rem;color:var(--ink-2)}
.hint::before{content:"";display:inline-block;width:1px;height:1.6rem;margin-inline-end:.7rem;vertical-align:middle;background:currentColor;animation:rise 1.8s var(--ease) infinite}
@keyframes rise{from{transform:scaleY(0);transform-origin:bottom}50%{transform:scaleY(1);transform-origin:bottom}51%{transform-origin:top}to{transform:scaleY(0);transform-origin:top}}
.chapters{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);display:grid;gap:.15rem;justify-items:start}
.chapters{transition:opacity .5s}
.chapters.dim{opacity:0;pointer-events:none}
.chapters button{font-size:.85rem;color:var(--ink-2);min-height:32px;padding-inline:.3rem;transition:color var(--fast)}
.chapters button:hover{color:var(--gold)}
.chapters button[aria-current=true]{color:var(--ink);font-weight:500}
.progress{position:absolute;inset:auto var(--gut) 2.2rem;height:1px;background:var(--line)}
.progress i{position:absolute;inset:0;background:var(--gold);transform-origin:right;transform:scaleX(0)}
@media (max-width:760px){
  .chapters{display:none}
  .cap{bottom:clamp(3.5rem,8vh,5rem)}
  .cap--top{top:5.5rem}
}
.pre{position:fixed;right:var(--gut);bottom:1rem;z-index:80;display:flex;gap:.8rem;align-items:baseline;font-size:.8rem;color:var(--ink-2);transition:opacity .6s}
.pre b{font:500 1.4rem var(--f-d);color:var(--ink)}
.pre b::after{content:"%";font-size:.8rem}
.pre.out{opacity:0;pointer-events:none}