/* Moving Magazine · Story — scènebibliotheek, alleen met de thema-tokens. Hoort bij vormen.js. */
section[data-scene]{position:relative;min-height:100vh;padding:clamp(84px,11vh,120px) clamp(18px,5vw,80px) 170px;overflow:hidden;background:var(--bg)}
.sc-kicker{font:500 15px/1.3 var(--mono);letter-spacing:0;text-transform:none;color:var(--accent-2);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.sc-kicker::before{content:"";width:22px;height:2px;background:var(--accent-2)}
.sc-kop{font-family:var(--head);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(54px,10vw,150px);line-height:.88;color:var(--ink);max-width:16ch}
.sc-kop .sc-regel{display:block;overflow:hidden;text-wrap:balance}
.sc-kop .sc-regel>span{display:inline-block}
.sc-kop .sc-accent,.sc-accent{color:var(--accent)}
.sc-noot{position:relative;display:inline-block;margin-top:26px;font:400 clamp(22px,2.6vw,32px)/1.25 var(--hand);color:var(--accent);max-width:28ch}
.sc-noot svg{position:absolute;left:0;right:0;bottom:-14px;width:100%;height:20px;overflow:visible}
.sc-noot path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.sc-lede{margin-top:22px;max-width:56ch;font:400 18px/1.6 var(--body);color:var(--mute)}
.sc-lede b{color:var(--ink);font-weight:600}

/* zijwaarts */
section[data-scene="zijwaarts"]{display:flex;flex-direction:column;justify-content:safe center}
.sc-baan{display:flex;gap:clamp(16px,2.4vw,32px);width:max-content;will-change:transform}
.sc-paneel{flex:none;width:min(560px,82vw);background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;gap:14px}
.sc-paneel h3{font-family:var(--head);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(32px,3.6vw,48px);line-height:.95;color:var(--ink)}
.sc-paneel p{font:400 17px/1.55 var(--body);color:var(--mute)}
.sc-paneel .sc-getal{font-family:var(--head);font-weight:900;font-size:clamp(48px,6vw,80px);line-height:.9;color:var(--accent)}
.sc-paneel img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.sc-stapel{flex-direction:column;width:auto}
.sc-stapel .sc-paneel{width:auto}

/* schakelaar */
.sc-wissel{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:26px 0;font:600 17px/1.2 var(--body);color:var(--mute)}
.sc-knop{position:relative;width:72px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);cursor:pointer;flex:none}
.sc-knop::after{content:"";position:absolute;left:4px;top:4px;width:30px;height:30px;border-radius:50%;background:var(--mute);transition:transform .3s,background .3s}
.sc-na .sc-knop::after{transform:translateX(32px);background:var(--accent)}
.sc-na .sc-wissel .sc-na-label,.sc-wissel .sc-voor-label{color:var(--ink)}
.sc-na .sc-wissel .sc-voor-label{color:var(--mute)}
[data-staat]{max-width:62ch;font:400 18px/1.6 var(--body);color:var(--ink)}
[data-staat] h3{font:700 clamp(24px,2.6vw,32px)/1.2 var(--body);margin-bottom:10px}

/* raster */
canvas.sc-raster{display:block;width:min(720px,100%);height:clamp(200px,34vh,320px);margin:24px 0}

/* onthulling */
section[data-scene="onthulling"]{display:flex;flex-direction:column;justify-content:safe center;align-items:flex-start}
section[data-scene="onthulling"] .sc-kop{font-size:clamp(42px,7.4vw,118px);max-width:none}
.sc-slot{position:relative;display:inline-block;margin-top:28px;font:400 clamp(22px,2.6vw,34px)/1.3 var(--hand);color:var(--accent);max-width:30ch}
.sc-slot svg{position:absolute;left:0;right:0;bottom:-14px;width:100%;height:20px;overflow:visible}
.sc-slot path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}

/* zoekspel */
.sc-spel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,3vw,48px);align-items:start;margin-top:20px}
.sc-spel>*{min-width:0}
.sc-wijzen{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.sc-wijzen button,.sc-termen button{min-height:44px;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);font:500 15px/1.2 var(--body);cursor:pointer;text-align:left}
.sc-wijzen button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--bg-2))}
.sc-termen{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sc-invoer{width:100%;min-height:48px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--deep);color:var(--ink);font:500 16px var(--mono)}
.sc-uitslag{margin-top:14px;min-height:48px;font:400 16px/1.5 var(--body);color:var(--mute)}
.sc-uitslag.sc-ja{color:var(--ink)}.sc-uitslag.sc-ja b{color:var(--accent)}
.sc-uitslag.sc-nee b,.sc-uitslag.sc-nee{color:var(--alert)}
.sc-hand{display:block;margin-top:8px;font:400 22px/1.3 var(--hand);color:var(--accent);min-height:30px}
.sc-bestanden{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--deep);max-height:62vh;overflow:auto}
.sc-bestanden li{font:400 14px/1.3 var(--mono);color:var(--mute);padding:8px 10px;border-radius:8px;overflow-wrap:anywhere;transition:background .2s,color .2s}
.sc-bestanden li.sc-raak{background:color-mix(in srgb,var(--accent-2) 22%,transparent);color:var(--ink)}
.sc-bestanden li.sc-raak[data-doel]{background:var(--accent);color:var(--deep);font-weight:600}

/* beeld */
section[data-scene="beeld"]{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.sc-foto{border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:var(--bg-2)}
.sc-foto img{width:100%;height:100%;object-fit:cover;display:block}
.sc-tekst{display:flex;flex-direction:column;gap:16px}
.sc-tekst h2{font-family:var(--head);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(40px,5vw,72px);line-height:.92;color:var(--ink)}
.sc-tekst p{font:400 18px/1.6 var(--body);color:var(--mute)}

@media (max-width:760px){
  .sc-spel,section[data-scene="beeld"]{grid-template-columns:1fr}
  .sc-bestanden{max-height:40vh}
  section[data-scene]{padding-bottom:150px}
}