/* Meutstack: stijlblad. Kleuren per project staan onderaan, die schrijft de generator. */
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --blauw:#2338CF;
  --geel:#FFCF4A;
  --wit:#F2EFE9;
  --inkt:#15171C;
  --rand:clamp(20px,4.5vw,64px);
  --veer:cubic-bezier(.16,1,.3,1);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sbg:var(--blauw);
  --scrim:rgba(35,56,207,.92);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--blauw);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{transition:color .5s var(--veer);font-family:var(--sans);color:var(--wit);font-size:1.125rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:2px solid var(--geel);outline-offset:4px;border-radius:6px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
::selection{background:var(--geel);color:var(--inkt)}

.skip{position:fixed;z-index:50;left:var(--rand);top:12px;padding:10px 16px;border-radius:999px;background:var(--geel);color:var(--inkt);font-weight:600;text-decoration:none;transform:translateY(-160%);transition:transform .3s var(--veer)}
.skip:focus{transform:none}

#meute{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:none}
.webgl #meute{display:block}

/* decor achter de 3D: bouwlint en reuzenwoorden */
#decor{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;display:none}
.webgl #decor{display:block}
#decor .woord{position:absolute;left:0;right:0;top:50%;transform:translate(calc(var(--p,0) * -14vw),-42%);text-align:center;white-space:nowrap;font:700 clamp(7rem,27vw,34rem)/.8 var(--sans);font-stretch:75%;letter-spacing:-.045em;color:rgba(255,255,255,.07);opacity:0;transition:opacity .9s var(--veer),transform 1.2s var(--veer)}
#decor .woord::before{content:attr(data-woord)}
#decor .lint{position:absolute;left:-15vw;right:-15vw;top:47%;display:flex;overflow:hidden;padding:.85em 0;background:var(--geel);transform:rotate(-6deg) translateY(30px);opacity:0;box-shadow:0 26px 60px -26px rgba(6,10,50,.6);transition:opacity .9s var(--veer),transform 1.2s var(--veer)}
#decor[data-actief="top"] .lint{opacity:1;transform:rotate(-6deg)}
#decor .lint::before,#decor .lint::after{content:attr(data-tekst);flex:none;padding-right:.6em;white-space:pre;font:600 clamp(.95rem,1.45vw,1.35rem)/1 var(--mono);letter-spacing:.05em;color:var(--inkt);animation:lint 60s linear infinite}
@keyframes lint{to{transform:translateX(-100%)}}
@media (max-width:820px){#decor .lint{top:30%}#decor .woord{top:30%;font-size:34vw}}

/* kop */
.kop{position:fixed;z-index:10;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(clamp(12px,2.2vw,24px) + env(safe-area-inset-top,0px)) var(--rand) 0;pointer-events:none;color:var(--wit);transition:color .6s var(--veer)}
.kop>*{pointer-events:auto}
.pil{display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);transition:background .6s var(--veer),box-shadow .6s var(--veer)}
.merk{padding:9px 15px;border-radius:999px;text-decoration:none}
.merk svg{height:21px;width:auto}
.menu a,.menu button{font:inherit;font-size:.95rem;color:inherit;background:none;border:0;cursor:pointer;text-decoration:none;padding:9px 15px;border-radius:999px;transition:background .3s var(--veer),color .3s var(--veer)}
.menu a:hover{background:rgba(255,255,255,.14)}
.menu a[aria-current="true"]{background:rgba(255,255,255,.2)}
.menu .term-knop{font-family:var(--mono);font-size:.84rem;background:var(--geel);color:var(--inkt);margin-left:4px}
.menu .term-knop:hover{background:#FFE08A}
.menu .term-knop:active,.knop:active{transform:scale(.97)}
[data-thema="licht"] .kop{color:var(--inkt)}
[data-thema="licht"] .pil{background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(21,23,28,.12),inset 0 1px 0 rgba(255,255,255,.6)}
[data-thema="licht"] .menu a:hover{background:rgba(21,23,28,.08)}
[data-thema="licht"] .menu a[aria-current="true"]{background:rgba(21,23,28,.1)}
.menu .geluid-knop{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.84rem}
.geluid-knop svg path:last-child{opacity:.3;transition:opacity .3s var(--veer)}
.geluid-knop[aria-pressed="true"] svg path:last-child{opacity:1}
.menu .geluid-knop[aria-pressed="true"]{background:rgba(255,255,255,.16)}
[data-thema="licht"] .menu .geluid-knop[aria-pressed="true"]{background:rgba(21,23,28,.1)}
html:not(.webgl) .geluid-knop,html:not(.webgl) .speel-knop{display:none}
@media (max-width:860px){.menu a{display:none}.menu .term-knop{margin:0}.menu .geluid-knop span{display:none}}

/* stapel-indicator rechts */
.stapelnav{position:fixed;z-index:9;right:clamp(14px,1.6vw,26px);top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:7px;color:var(--wit);transition:color .6s var(--veer)}
.stapelnav a{position:relative;display:block;width:11px;height:11px;border-radius:2px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.55;transition:opacity .3s var(--veer),background .3s var(--veer),transform .4s var(--veer)}
.stapelnav a:hover{opacity:1;transform:scale(1.2)}
.stapelnav a[aria-current="true"]{background:var(--geel);box-shadow:none;opacity:1}
.stapelnav a::after{content:attr(data-naam);position:absolute;right:22px;top:50%;transform:translate(6px,-50%);opacity:0;pointer-events:none;white-space:nowrap;font:500 .72rem/1 var(--mono);padding:6px 9px;border-radius:6px;background:rgba(10,12,20,.8);color:#fff;transition:opacity .25s var(--veer),transform .35s var(--veer)}
.stapelnav a:hover::after,.stapelnav a:focus-visible::after{opacity:1;transform:translate(0,-50%)}
[data-thema="licht"] .stapelnav{color:var(--inkt)}
@media (min-width:1024px){.webgl .stapelnav{display:flex}}

/* secties */
.sectie{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:grid;align-items:center;padding:clamp(110px,15vh,150px) var(--rand) clamp(72px,12vh,120px)}
.tekst{position:relative;max-width:34rem;min-width:0}
.sectie[data-kant="rechts"] .tekst{justify-self:start}
.sectie[data-kant="links"] .tekst{justify-self:end}
html:not(.webgl) .licht{color:var(--inkt)}
.webgl[data-thema="licht"] body{color:var(--inkt)}
h1{font-size:clamp(1.9rem,3vw,2.9rem);line-height:1;font-weight:700;font-stretch:80%;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(3rem,6.2vw,6.25rem);line-height:.9;font-weight:700;font-stretch:76%;letter-spacing:-.025em}
.tekst p{margin-top:1.1rem;max-width:29rem;opacity:.88}
.held{align-items:end;padding-bottom:clamp(64px,7vh,84px)}
.held .tekst{max-width:38rem}
.held .tekst>p{margin-top:.7rem}
.held .tip{font-family:var(--mono);font-size:.78rem;opacity:.85;margin-top:1rem}
.feiten{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4rem}
.feiten li{font-size:.9rem;padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor}
.knop{display:inline-flex;align-items:center;gap:14px;margin-top:1.8rem;padding:7px 7px 7px 22px;border-radius:999px;background:var(--geel);color:var(--inkt);text-decoration:none;font-weight:600;transition:transform .5s var(--veer),background .3s var(--veer)}
.knop:hover{background:#FFD968}
.knop i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--inkt);color:var(--geel);transition:transform .5s var(--veer)}
.knop:hover i{transform:translate(3px,-2px) scale(1.06)}
.knop.stil{background:none;box-shadow:inset 0 0 0 1px currentColor;color:inherit;padding:12px 20px;font-weight:500}
.webgl.fijn .sectie{cursor:grab}
.webgl.fijn.sleept,.webgl.fijn.sleept .sectie{cursor:grabbing}
.webgl.fijn .tekst{cursor:auto}

/* gestapelde koppen en index */
.val .w{display:inline-block;white-space:nowrap}
.val .w span{display:inline-block}
.js.webgl .sectie:not(.gezien) .val .w span{opacity:0}
.js.webgl .sectie.gezien .val .w span{animation:land .9s cubic-bezier(.22,1.45,.4,1) both}
@keyframes land{0%{opacity:0;transform:translateY(-.85em) rotate(-7deg)}35%{opacity:1}100%{opacity:1;transform:none}}
.index{display:flex;align-items:center;gap:10px;margin-bottom:1.1rem;font:500 .78rem/1 var(--mono);letter-spacing:.02em;opacity:.9}
.index i{width:8px;height:8px;background:var(--geel);box-shadow:0 0 0 3px color-mix(in srgb,var(--geel) 28%,transparent)}

.regel{font:400 .84rem/1.5 var(--mono);opacity:.8;margin-top:.8rem}
.voortgang{display:flex;align-items:center;gap:14px;margin-top:1.5rem;font:500 .8rem/1 var(--mono)}
.voortgang .balk{position:relative;width:min(220px,45vw);height:8px;border-radius:2px;background:color-mix(in srgb,currentColor 18%,transparent);overflow:hidden}
.voortgang .balk i{position:absolute;inset:0;background:var(--geel);transform-origin:0 50%;transform:scaleX(var(--v,.35));transition:transform .45s var(--veer)}

/* slot */
.slot .tekst{max-width:36rem}
.specs{display:grid;grid-template-columns:repeat(4,auto);gap:14px 28px;margin-top:2rem;justify-content:start}
.specs div{display:flex;flex-direction:column-reverse;gap:4px}
.specs dt{font:400 .74rem/1.2 var(--mono);opacity:.75}
.specs dd{font:600 1.7rem/1 var(--mono);letter-spacing:-.02em}
.colofon{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid color-mix(in srgb,currentColor 28%,transparent);font-size:.9rem;display:flex;flex-wrap:wrap;gap:6px 24px;opacity:.85}
@media (max-width:560px){.specs{grid-template-columns:repeat(2,auto)}}

/* stilstaand woordmerk: zonder WebGL of zonder JavaScript */
.poster{display:none}
html:not(.webgl) .sectie{background:var(--sbg)}
html:not(.webgl) .held{align-items:center;gap:40px}
html:not(.webgl) .poster{display:block;width:min(86vw,880px);justify-self:center;color:var(--wit)}
html:not(.webgl) .poster svg{width:100%;height:auto;filter:drop-shadow(10px 12px 0 rgba(10,18,90,.55))}
html:not(.webgl) .sectie:not(.held){min-height:0;padding-top:clamp(96px,16vh,160px);padding-bottom:clamp(96px,16vh,160px)}
html:not(.webgl) .tip,html:not(.webgl) .status,html:not(.js) .term-knop{display:none}

@media (max-width:820px){
  .sectie{align-items:end;padding-top:58svh;padding-bottom:88px}
  .sectie .tekst,.sectie[data-kant] .tekst{justify-self:stretch;max-width:none}
  .webgl .sectie .tekst{background:var(--kaart,rgba(35,56,207,.78));-webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25);border-radius:20px;padding:20px 18px 22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
  .spelt .sectie .tekst{backdrop-filter:none;-webkit-backdrop-filter:none}
  html:not(.webgl) .sectie{padding-top:120px}
}

/* stapelspel */
.speel-knop{margin-top:1.6rem;border:0;font:inherit;font-weight:600;cursor:pointer}
.spel-ui{position:fixed;inset:0;z-index:15;pointer-events:none;display:flex;flex-direction:column;align-items:center;padding:calc(96px + env(safe-area-inset-top,0px)) 20px calc(96px + env(safe-area-inset-bottom,0px));color:#fff;text-align:center}
.spel-ui[hidden]{display:none}
.spel-score{font:700 clamp(4.5rem,13vw,10rem)/.85 var(--sans);font-stretch:75%;letter-spacing:-.03em;text-shadow:0 8px 40px rgba(0,0,0,.4)}
.spel-beste{font:500 .82rem/1 var(--mono);opacity:.72;margin-top:.8rem;min-height:1em}
.spel-tip{font:500 .92rem/1.45 var(--mono);margin-top:auto;max-width:34ch;opacity:.92}
.spel-stop{pointer-events:auto;position:fixed;right:var(--rand);bottom:calc(22px + env(safe-area-inset-bottom,0px));font:500 .85rem var(--mono);color:#fff;background:rgba(255,255,255,.12);border:0;border-radius:999px;padding:11px 16px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.spel-stop:hover{background:rgba(255,255,255,.2)}
.spel-stop kbd{font:inherit;opacity:.6;margin-left:6px}
.spelt main,.spelt .slot,.spelt .stapelnav,.spelt #decor,.spelt .status,.spelt .menu a,.spelt .motorkap{visibility:hidden}
.spelt,.spelt body{cursor:pointer}

/* motorkap: render-lagen live in beeld */
.motorkap{position:fixed;z-index:9;right:clamp(44px,4vw,64px);top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:10px;pointer-events:none}
.motorkap-aan .motorkap{display:flex}
.motorkap .paneel{position:relative;width:clamp(120px,12vw,170px);aspect-ratio:1;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 12px 30px -12px rgba(0,0,0,.55)}
.motorkap .paneel:last-child{aspect-ratio:16/10}
.motorkap span{position:absolute;left:8px;top:8px;font:500 .64rem/1 var(--mono);color:#fff;background:rgba(10,12,20,.72);padding:4px 6px;border-radius:4px}
@media (max-width:820px){.motorkap{right:12px;left:12px;top:auto;bottom:calc(70px + env(safe-area-inset-bottom,0px));transform:none;flex-direction:row;justify-content:flex-end}.motorkap .paneel{width:27vw}}
.term-uit .top{color:#A6E9BD;white-space:pre}

/* status */
.status{position:fixed;z-index:9;left:var(--rand);bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:999px;font:500 .74rem/1 var(--mono);color:var(--wit);background:rgba(10,12,20,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.status .led{width:7px;height:7px;border-radius:50%;background:#5BE38A;box-shadow:0 0 0 3px rgba(91,227,138,.18);transition:background .3s}
.status .led.bezig{background:var(--geel);box-shadow:0 0 0 3px rgba(255,207,74,.2)}
.status .grijs{opacity:.62}
@media (max-width:820px){.status{bottom:auto;top:calc(74px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%)}}

/* terminal */
.terminal{position:fixed;z-index:20;right:var(--rand);bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(480px,calc(100vw - 2 * var(--rand)));height:min(360px,62svh);display:flex;flex-direction:column;border-radius:18px;background:rgba(11,13,19,.94);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px -20px rgba(5,8,30,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font:400 .82rem/1.55 var(--mono);color:#E6E3DB;transform-origin:100% 100%;transition:opacity .35s var(--veer),transform .45s var(--veer),visibility 0s}
.terminal[hidden]{display:flex;opacity:0;transform:translateY(12px) scale(.96);pointer-events:none;visibility:hidden;transition:opacity .25s var(--veer),transform .3s var(--veer),visibility 0s .3s}
.term-kop{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 10px 16px;color:#9AA0AD;font-size:.75rem;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.term-kop button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:4px 8px;border-radius:6px}
.term-kop button:hover{background:rgba(255,255,255,.08);color:#fff}
.term-uit{flex:1;overflow-y:auto;padding:12px 16px 4px;white-space:pre-wrap;word-break:break-word;scrollbar-width:thin}
.term-uit .ik{color:#9AA0AD}
.term-uit .geel{color:var(--geel)}
.term-regel{display:flex;gap:8px;align-items:center;padding:8px 16px 14px}
.term-regel .prompt{color:var(--geel);white-space:nowrap}
.term-regel input{flex:1;min-width:0;font:inherit;font-size:max(16px,.82rem);color:#fff;background:none;border:0;outline:none;caret-color:var(--geel)}
@media (min-width:821px){.term-regel input{font-size:inherit}}

@media (prefers-reduced-motion:reduce){
  #decor .lint::before,#decor .lint::after{animation:none}
  .js.webgl .sectie:not(.gezien) .val .w span{opacity:1}
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}
@media print{
  #meute,.status,.terminal,.kop,.stapelnav,.skip{display:none!important}
  body,.licht{color:#000;background:#fff}
  .sectie{min-height:0;padding:24px 0;background:none!important}
  .poster{display:block!important;width:300px;color:#000}
}

/* deelbeeld-modus (alleen voor het maken van og.png) */
.og .kop,.og .tekst,.og .status,.og .stapelnav,.og .skip{display:none!important}

/* sectiekleuren, gegenereerd uit inhoud/site.json */
#top{--sbg:#2338CF}#slokjes{--sbg:#0F3B28}#pubgolf{--sbg:#E9DFC9}#volgende{--sbg:#1B1F27}#slot{--sbg:#2338CF}
#fout{--sbg:#2338CF}
.val .l2{animation-delay:32ms}.val .l3{animation-delay:64ms}.val .l4{animation-delay:96ms}.val .l5{animation-delay:128ms}.val .l6{animation-delay:160ms}.val .l7{animation-delay:192ms}.val .l8{animation-delay:224ms}.val .l9{animation-delay:256ms}.val .l10{animation-delay:288ms}.val .l11{animation-delay:320ms}.val .l12{animation-delay:352ms}.val .l13{animation-delay:384ms}.val .l14{animation-delay:416ms}.val .l15{animation-delay:448ms}.val .l16{animation-delay:480ms}.val .l17{animation-delay:512ms}.val .l18{animation-delay:544ms}.val .l19{animation-delay:576ms}.val .l20{animation-delay:608ms}.val .l21{animation-delay:640ms}.val .l22{animation-delay:672ms}.val .l23{animation-delay:704ms}.val .l24{animation-delay:736ms}.val .l25{animation-delay:768ms}.val .l26{animation-delay:800ms}.val .l27{animation-delay:832ms}.val .l28{animation-delay:864ms}.val .l29{animation-delay:896ms}.val .l30{animation-delay:928ms}
#decor[data-actief="slokjes"] [data-voor="slokjes"]{opacity:1;transform:translate(calc(var(--p,0) * -14vw),-50%)}#decor[data-actief="pubgolf"] [data-voor="pubgolf"]{opacity:1;transform:translate(calc(var(--p,0) * -14vw),-50%)}#decor[data-actief="volgende"] [data-voor="volgende"]{opacity:1;transform:translate(calc(var(--p,0) * -14vw),-50%)}#decor[data-actief="slot"] [data-voor="slot"]{opacity:1;transform:translate(calc(var(--p,0) * -14vw),-50%)}#decor[data-actief="fout"] [data-voor="fout"]{opacity:1;transform:translate(calc(var(--p,0) * -14vw),-50%)}#decor [data-voor="slokjes"]{color:rgba(242,178,60,0.17)}#decor [data-voor="pubgolf"]{color:rgba(212,166,87,0.3)}#decor [data-voor="volgende"]{color:rgba(255,207,74,0.17)}