/* ZACKY Première v2 (18 oktober 2026): donkere RS5-band met de simulator (Start, toerenteller, schakellampjes, gaspedaal).
   Port van het goedgekeurde voorbeeld (.premiere en .sim*). Alleen laden op de pagina met .sim[data-sim],
   na /css/zacky.css. Bewegen alleen via transform; niets begint onzichtbaar. Contract: scratchpad/partials/README.md */
.premiere{background:var(--dark);color:var(--d-text);overflow:hidden;isolation:isolate}
.pr-glow{position:absolute;left:50%;top:44%;width:1000px;height:1000px;margin:-500px 0 0 -500px;background:radial-gradient(circle,rgba(191,138,60,.30) 0%,rgba(191,138,60,.08) 40%,transparent 64%);transform:scale(.8);pointer-events:none;z-index:-1}
.pr-head{max-width:680px}
.pr-logo{height:22px;width:auto;filter:brightness(0) invert(1);margin-bottom:22px}
.pr-head h2{margin-top:10px;color:#fff}
.pr-head p{margin-top:12px;font-size:17px;color:var(--d-muted)}

/* simulator */
.sim{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:34px;align-items:center}
@media(min-width:960px){.sim{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:44px}}
.sim-stage{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:#0a0806}
.sim-car{position:absolute;inset:0;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 52% 55%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 52% 55%,#000 55%,transparent 100%);will-change:transform}
.sim-car img,.sim-car svg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.sim-car img{object-fit:cover;filter:brightness(.55) saturate(.72);transition:filter 1.3s ease .1s}
.sim.lit .sim-car img{filter:brightness(1) saturate(1)}
.sim-lights{pointer-events:none;overflow:visible}
.sim-lights .bl{stroke:#fff1d6;stroke-width:12;filter:url(#simBloom)}
.sim-lights .co{stroke:#fff;stroke-width:3.6}
.sim-lights .seg{opacity:0;transition:opacity .16s ease;transition-delay:calc(var(--i) * 26ms)}
.sim.lit .sim-lights .seg{opacity:1;transition-delay:calc(var(--i) * 60ms + 120ms)}
.sim-lights .pool{opacity:0;transition:opacity 1s ease .5s}
.sim.lit .sim-lights .pool{opacity:.55}
.sim-amb{position:absolute;left:50%;bottom:-30%;width:120%;height:80%;margin-left:-60%;background:radial-gradient(ellipse at 50% 40%,rgba(255,70,40,.55),rgba(191,138,60,.18) 45%,transparent 70%);opacity:0;pointer-events:none;mix-blend-mode:screen}
.sim-badge{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:rgba(10,8,6,.62);border:1px solid rgba(255,255,255,.14);color:var(--d-text);font-size:13px;font-weight:600;letter-spacing:.04em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sim-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:#5c5248;transition:background-color .3s,box-shadow .3s}
.sim.lit .sim-badge::before{background:var(--gold-light);box-shadow:0 0 10px var(--gold-light)}
.sim-cockpit{display:grid;justify-items:center;gap:14px;padding:22px 18px;border-radius:24px;background:linear-gradient(180deg,#17120d,#0d0a07);border:1px solid rgba(226,184,102,.18)}
.sim-leds{display:flex;gap:7px}
.sim-leds i{width:13px;height:13px;border-radius:50%;background:#2a221a;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);transition:background-color .06s,box-shadow .06s}
.sim-leds i.on{background:var(--gold-light);box-shadow:0 0 10px var(--gold-light)}
.sim-leds i.on:nth-child(n+6){background:#ff9d3c;box-shadow:0 0 10px #ff9d3c}
.sim-leds i.on:nth-child(n+9){background:#ff3b30;box-shadow:0 0 12px #ff3b30}
.sim.max .sim-leds i{background:#ff3b30;box-shadow:0 0 14px #ff3b30;animation:simBlink .16s steps(2) infinite}
@keyframes simBlink{50%{background:#3a1410;box-shadow:none}}
.sim-tach{width:min(280px,100%)}
.sim-tach svg{display:block;width:100%;height:auto;overflow:visible}
.t-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:8;stroke-linecap:round}
.t-red{fill:none;stroke:#ff3b30;stroke-width:8;opacity:.75}
.t-fill{fill:none;stroke:url(#tGrad);stroke-width:8;stroke-linecap:round}
.t-ticks line{stroke:rgba(255,255,255,.25);stroke-width:2;stroke-linecap:round}
.t-ticks line.big{stroke:rgba(255,255,255,.5);stroke-width:3}
.t-needle{stroke:#fff;stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,120,80,.8))}
.t-hub{fill:#120e0a;stroke:var(--gold-light);stroke-width:2}
.t-gear{fill:var(--d-text);font:700 22px/1 var(--sans);text-anchor:middle}
.t-lab{fill:#8c8172;font:600 8px/1 var(--sans);letter-spacing:.18em;text-anchor:middle}
.sim-status{min-height:22px;font-size:14px;color:#cdbfaa;text-align:center;font-weight:500}
.sim-ctrl{display:flex;align-items:flex-end;justify-content:center;gap:30px;margin-top:4px}
.sim-start{position:relative;width:112px;height:112px;border-radius:50%;border:0;padding:0;cursor:pointer;color:#fff;background:radial-gradient(circle at 50% 30%,#3a3026,#110d09 72%);box-shadow:0 0 0 2px rgba(226,184,102,.55),0 0 0 7px #1c1610,0 0 0 8px rgba(226,184,102,.25),0 18px 40px -14px rgba(0,0,0,.9);-webkit-tap-highlight-color:transparent;transition:transform .15s ease,box-shadow .3s ease}
.sim-start:active{transform:scale(.95)}
.sim-start b{display:block;font:700 19px/1 var(--sans);letter-spacing:.14em}
.sim-start small{display:block;margin-top:5px;font-size:10px;letter-spacing:.2em;color:var(--d-muted);text-transform:uppercase}
.sim-start[aria-pressed="true"]{box-shadow:0 0 0 2px #ff5a3c,0 0 0 7px #1c1610,0 0 0 8px rgba(255,90,60,.45),0 0 34px -4px rgba(255,90,60,.65),0 18px 40px -14px rgba(0,0,0,.9)}
.sim-start[aria-pressed="true"] b{color:#ffd9cc}
.sim[data-state="off"] .sim-start:not(.used)::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(226,184,102,.55);animation:simPulse 1.8s ease-out infinite;pointer-events:none}
@keyframes simPulse{0%{transform:scale(.9)}100%{transform:scale(1.18);border-color:rgba(226,184,102,0)}}
.sim-start.nudge{animation:simNudge .5s ease}
@keyframes simNudge{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.sim-pedal{position:relative;display:grid;justify-items:center;gap:8px;border:0;padding:0;background:none;cursor:pointer;color:var(--d-muted);font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;perspective:420px}
.sim-pedal__plate{display:block;width:84px;height:138px;border-radius:16px 16px 22px 22px;background:repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 5px,transparent 5px 13px),linear-gradient(160deg,#4a4038,#1b1612 60%,#0e0b08);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 2px rgba(226,184,102,.35),0 16px 30px -10px rgba(0,0,0,.9);transform-origin:50% 100%;transition:transform .09s ease,box-shadow .09s ease}
.sim-pedal.down .sim-pedal__plate{transform:rotateX(24deg) translateY(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 2px var(--gold-light),0 6px 14px -6px rgba(0,0,0,.9),0 0 26px -6px rgba(226,184,102,.7)}
.sim-pedal:focus-visible,.sim-start:focus-visible{outline:2px solid var(--gold-light);outline-offset:6px}
.sim[data-state="off"] .sim-pedal__plate{opacity:.72}
.sim-help{font-size:12.5px;color:#8c8172;text-align:center;max-width:330px}
.sim .pr-src{font-size:13px;color:var(--d-muted);text-align:center;max-width:330px;letter-spacing:.02em}
html:not(.js) .sim-ctrl,html:not(.js) .sim-help,html:not(.js) .sim-status{display:none}
@media(max-width:520px){.sim-start{width:100px;height:100px}.sim-pedal__plate{width:78px;height:124px}.sim-ctrl{gap:26px}}
@media(prefers-reduced-motion:reduce){.sim[data-state="off"] .sim-start:not(.used)::after,.sim.max .sim-leds i,.sim-start.nudge{animation:none}}

/* citaat en eindregel */
.pr-quote{margin:46px auto 0;max-width:900px;text-align:center}
.pr-quote p{font-family:var(--serif);font-size:clamp(24px,3.4vw,40px);line-height:1.25;color:var(--d-soft)}
.pr-quote .w{transition:color .2s}
.pr-quote .w.on{color:var(--gold-hi)}
.pr-quote cite{display:block;margin-top:12px;font-style:normal;font-size:13.5px;color:var(--d-soft);letter-spacing:.06em}
.pr-end{margin:34px auto 0;text-align:center;max-width:720px;padding:22px;border-radius:20px;border:1px solid rgba(255,255,255,.12);transition:border-color .4s,box-shadow .4s,background-color .4s}
.pr-endline{font-family:var(--serif);font-size:clamp(24px,3vw,32px);color:var(--d-text);transition:color .4s,text-shadow .4s}
.pr-end.lit{border-color:rgba(226,184,102,.6);background:rgba(191,138,60,.08);box-shadow:0 0 60px -20px rgba(226,184,102,.55)}
.pr-end.lit .pr-endline{color:var(--gold-hi);text-shadow:0 0 26px rgba(243,199,118,.45)}
.pr-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.pr-disc{text-align:center;font-size:13px;color:var(--d-soft);margin-top:16px;letter-spacing:.04em}