/* Geest: gedeelde stukken voor de drie geest-concepten (Boom, Lagen, Kring).
   Een lange scroll-sectie met een vastgeplakt podium, bijschriften per stap, een HUD,
   en het zijstraatje "Over mij" dat zijwaarts openschuift. Kleuren komen uit de tokens van de pagina. */
.gs-stage{position:relative;height:640vh}
.gs-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.gs-sticky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gs-cap{position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:clamp(80px,13vh,140px);max-width:min(620px,88vw);pointer-events:none;opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.gs-cap.on{opacity:1;transform:none}
.gs-cap .k{display:block;margin-bottom:14px;color:var(--mut)}
.gs-cap h1,.gs-cap h2{margin:0;font-family:var(--display);font-weight:var(--dw,500);letter-spacing:-.045em;line-height:.92}
.gs-cap h1{font-size:clamp(46px,7.6vw,128px)}
.gs-cap h2{font-size:clamp(34px,4.6vw,76px)}
.gs-cap em{font-style:normal;color:var(--sig)}
.gs-cap p{margin:18px 0 0;font-size:clamp(16px,1.35vw,19px);line-height:1.45;max-width:40ch;color:var(--mut)}
.gs-cap p b{color:var(--fg);font-weight:500}
.gs-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);color:var(--mut);transition:opacity .5s;pointer-events:none}
.gs-hud{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:20px;width:min(300px,calc(100vw - 32px));display:grid;gap:9px;pointer-events:none}
.gs-row{display:flex;justify-content:space-between;gap:12px}
.gs-row b{font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}
.gs-row span{color:var(--mut)}
.gs-bar{height:4px;background:var(--line2,rgba(127,127,127,.25));position:relative;overflow:hidden}
.gs-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--sig)}
.gs-bar.self i{background:var(--fg)}
.gs-lvl{display:flex;gap:4px;margin-top:2px}
.gs-lvl i{flex:1;height:14px;border:1px solid var(--line2,rgba(127,127,127,.35));position:relative}
.gs-lvl i.on{background:var(--fg);border-color:var(--fg)}
.gs-note{color:var(--mut);opacity:.75;font-size:10px}
/* zijstraatje */
.gs-tab{position:fixed;right:0;top:50%;z-index:25;transform:translateY(-50%);writing-mode:vertical-rl;background:var(--fg);color:var(--bg);border:0;padding:16px 9px;cursor:pointer;font:inherit;letter-spacing:.1em;text-transform:uppercase;border-radius:8px 0 0 8px;display:flex;align-items:center;gap:10px;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .6s}
.gs-tab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sig);animation:gsp 1.8s ease-in-out infinite}
@keyframes gsp{50%{opacity:.3}}
.gs-tab:hover{transform:translate(-4px,-50%)}
body.gated .gs-tab,body.gs-open .gs-tab{opacity:0;pointer-events:none}
.gs-side{position:fixed;inset:0 0 0 auto;z-index:40;width:min(980px,100vw);background:var(--bg);color:var(--fg);transform:translateX(calc(100% + 100px));transition:transform .8s cubic-bezier(.7,0,.2,1);overflow-y:auto;overscroll-behavior:contain;box-shadow:-30px 0 80px rgba(0,0,0,.35);border-left:1px solid var(--line)}
body.gs-open .gs-side{transform:none}
.gs-side .gs-top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:14px max(16px,env(safe-area-inset-right,0px)) 14px 24px;background:var(--bg);border-bottom:1px solid var(--line)}
.gs-side .gs-x{font:inherit;color:inherit;background:none;border:1px solid var(--line);border-radius:99px;padding:6px 12px;cursor:pointer;text-transform:inherit;letter-spacing:inherit}
.gs-side .gs-in{padding:30px max(16px,env(safe-area-inset-right,0px)) 60px 24px}
.gs-dim{position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .6s}
body.gs-open .gs-dim{opacity:1;pointer-events:auto}
body.gs-open{overflow:hidden}
@media (max-width:820px){.gs-hud{left:16px;right:16px;width:auto;bottom:14px;gap:6px}.gs-hud .gs-hide-m{display:none}.gs-cap{top:72px}.gs-cue{display:none}.gs-tab{writing-mode:horizontal-tb;padding:7px 10px;top:56px;bottom:auto;transform:none;font-size:10px}.gs-tab:hover{transform:none}.gs-side .gs-in{padding-left:16px}}
@media (prefers-reduced-motion:reduce){.gs-cap,.gs-side,.gs-tab{transition:none}}