/* =====================================================================================================
   RONDE 4 (ADDENDUM-edc-5.md): Brians oordeel op de homepage.
   Regels (scroll-craft + frontend-references):
   - NIETS wordt vastgezet of overgenomen: geen sticky-pin, geen scroll-hijack, geen scroll-snap. Alle beweging is
     transform/opacity en hangt aan --p (0..1): hoe ver de sectie door het scherm is gescrold (home-r4.js).
   - tekst vervaagt nooit; hij beweegt hooguit zijwaarts met een groot, rustig bereik en blijft altijd volledig leesbaar
   - elke sectie heeft een eigen achtergrond of beweging; losse lussen (CSS-animatie) zijn traag (>= 9 s) en alleen transform/opacity
   - prefers-reduced-motion en ?still=1 (class .calm) en ?freeze=1: alle lussen en scroll-gekoppelde verschuivingen staan stil
   ===================================================================================================== */
@keyframes drift{from{transform:translate3d(-4%,-3%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.12)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sonar{0%{transform:scale(.62);opacity:0}18%{opacity:.9}100%{transform:scale(1.3);opacity:0}}
@keyframes eq{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.14)}}
@keyframes swap{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes ringpulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}}

/* ---------------------------------------------------------------- 1. ÉÉN HEADER: kop, intro, knoppen en cijfers met de video erachter */
.h4{align-items:flex-end;padding-block:clamp(48px,6vw,96px) clamp(40px,5vw,72px)}
.h4 .hv-shade{background:linear-gradient(90deg,rgba(21,10,34,.94) 0,rgba(21,10,34,.88) 46%,rgba(21,10,34,.78) 100%),linear-gradient(0deg,rgba(21,10,34,.55),rgba(21,10,34,0) 60%)}
.h4 h1{font-size:clamp(2.25rem,4.2vw + .9rem,5.25rem)}
@media(max-width:860px){
 .h4{align-items:flex-start}
}

/* ---------------------------------------------------------------- 2. LANDENWIEL: niet vastgezet, draait mee terwijl je er langs scrolt */
.w4{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,112px) clamp(72px,10vw,150px);background:linear-gradient(180deg,var(--ground),var(--ground))}
.w4 .wgrid{position:relative;z-index:1}
.w4-bg{position:absolute;inset:0;pointer-events:none}
.w4-bg i{position:absolute;width:46vmax;aspect-ratio:1;border-radius:50%;filter:blur(40px);opacity:.5;animation:drift 22s ease-in-out infinite alternate}
.w4-bg i:nth-child(1){left:-12vmax;top:-8vmax;background:radial-gradient(closest-side,rgba(102,45,145,.8),transparent)}
.w4-bg i:nth-child(2){right:-14vmax;top:14%;background:radial-gradient(closest-side,rgba(238,42,123,.34),transparent);animation-duration:27s;animation-delay:-8s}
.w4-bg i:nth-child(3){left:20%;bottom:-20vmax;background:radial-gradient(closest-side,rgba(109,204,167,.26),transparent);animation-duration:31s;animation-delay:-14s}
.w4-bg i.glow{display:none}
.w4 .whead h2{font-size:clamp(2.25rem,3.4vw + 1rem,4.25rem)}
.w4 .whead .lead{font-size:1.125rem;max-width:30ch}
.w4 .wheelbox{width:min(100%,700px);max-width:700px;margin-inline:auto}
.wheelbox::before,.wheelbox::after{content:"";position:absolute;inset:-3%;border:2px solid rgba(255,206,0,.34);border-radius:50%;pointer-events:none;animation:sonar 10s linear infinite;opacity:0}
.wheelbox::after{border-color:rgba(238,42,123,.4);animation-delay:-5s}
/* de foto in elk vak draait mee, het vak krijgt een lichte donkere laag zodat de naam leesbaar blijft */
body[data-v] .w4 .sector .shape{fill:rgba(21,10,34,.36);stroke:var(--c);stroke-width:4}
body[data-v] .w4 .sector.on .shape{fill:rgba(21,10,34,.1);stroke:var(--ma-white);stroke-width:7}
body[data-v] .w4 .sector text{fill:var(--ma-white);paint-order:stroke;stroke:rgba(21,10,34,.92);stroke-width:5px;stroke-linejoin:round}
.w4 .sector.on{filter:drop-shadow(0 0 18px var(--c))}
/* de foto blijft rechtop terwijl het wiel draait (zoals een reuzenrad): tegendraaiing om het eigen midden */
.w4 .sph{transform:rotate(calc(-1deg*(var(--ang) + var(--rot,0))));transform-origin:360px 124px}
.w4 .wheel .rot{transform:rotate(calc(var(--rot,0)*1deg))}
/* uitleg bij het wiel: foto, land, steden, volgende avond */
.w4 .wread{display:block;padding:0;overflow:hidden;max-width:34rem;margin:0 0 22px;border:3px solid var(--ma-white);border-top:10px solid var(--c);background:var(--ma-surface);box-shadow:var(--shadow)}
.wph{margin:0;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ma-ink)}
.wph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wph img.sw{animation:swap 700ms var(--ease) both}
.wph figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 10px;font:600 .875rem/1.3 var(--f-body);color:var(--ma-white);background:linear-gradient(0deg,rgba(21,10,34,.92),rgba(21,10,34,0))}
.wtxt{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:16px 20px;min-height:9.5rem}
.w4 .wread .cc{width:58px;height:58px;background:var(--c);color:var(--ma-ink);display:grid;place-items:center;font:800 1.5rem/1 var(--f-body)}
.w4 .wread b{display:block;font:800 1.5rem/1.2 var(--f-body);text-transform:none}
.w4 .wread span[data-r=n]{display:block;font-size:1.0625rem;line-height:1.5;color:var(--ma-lilac)}
.w4 .wread p{margin:6px 0 0;font:600 1.125rem/1.45 var(--f-body);font-variant-numeric:var(--tnum)}
@media(max-width:860px){
 .w4{padding-block:40px 72px}
 .w4 .wgrid{grid-template-columns:1fr;grid-template-areas:"head" "read" "wheel" "btn";grid-template-rows:none;gap:14px}
 .w4 .whead .eyebrow{display:block}
 .w4 .whead h2{font-size:2.25rem}.w4 .whead .lead{font-size:1rem;margin-top:10px}
 .w4 .wheelbox{width:min(100%,360px)}
 .w4 .wread span[data-r=n]{display:block;font-size:.9375rem}
 .w4 .wread .cc{width:46px;height:46px;font-size:1.25rem}.w4 .wread b{font-size:1.25rem}
 .wtxt{padding:12px 14px;gap:12px;min-height:11.5rem}
}

/* ---------------------------------------------------------------- 3. NEXT STOP: groot label, geen ticketblok, foto's schuiven over de rand van de vorige sectie */
.n4{position:relative;padding-block:clamp(72px,9vw,128px);background:linear-gradient(180deg,var(--ground) 0,#24103D 14%,#24103D 86%,var(--ground) 100%)}
.n4-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.n4-bg::before{content:"";position:absolute;inset:-30%;background:var(--wax);background-size:88px 88px;opacity:.09;transform:translate3d(calc((var(--p,.5) - .5)*-220px),calc((var(--p,.5) - .5)*110px),0) rotate(-8deg)}
.n4-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:center}
.n4-stop{display:flex;flex-wrap:nowrap;align-items:center;gap:.2em .3em;margin:0 0 clamp(14px,2vw,26px);max-width:none}
.n4-w,.n4-dot{font:800 clamp(2.25rem,4.4vw,4.5rem)/.95 var(--f-display);text-transform:uppercase;color:var(--ma-white);letter-spacing:.005em}
.n4-dot{color:var(--ma-yellow);text-shadow:var(--glow-y)}
.n4-cc{font:800 clamp(2.75rem,5.6vw,5.5rem)/1 var(--f-display);background:var(--ma-yellow);color:var(--ma-ink);padding:.08em .22em .02em;border:3px solid var(--ma-white);box-shadow:var(--shadow),0 0 36px rgba(255,206,0,.35);transform:rotate(-3deg)}
.n4 h2{font-size:clamp(1.75rem,2.6vw + .8rem,3.5rem)}
.n4 .factline{margin-top:14px;font-size:1.125rem}
.n4-photos{position:relative;padding-bottom:12%;margin-top:calc(-1*clamp(48px,8vw,128px))}
.n4-p1{width:90%;transform:rotate(calc(2.5deg - var(--p,.5)*5deg)) translate3d(0,calc((var(--p,.5) - .5)*-48px),0)}
.n4-p2{position:absolute;right:0;bottom:0;width:44%;transform:rotate(calc(-4deg + var(--p,.5)*7deg)) translate3d(0,calc((var(--p,.5) - .5)*-96px),0)}
.n4-tag{position:absolute;left:-2%;top:6%;z-index:2;background:var(--ma-yellow);color:var(--ma-ink);border:3px solid var(--ma-white);padding:8px 12px;font:800 .9375rem/1.05 var(--f-display);text-transform:uppercase;transform:rotate(-6deg);box-shadow:var(--shadow)}
@media(max-width:860px){
 .n4-grid{grid-template-columns:1fr}.n4-stop{flex-wrap:wrap}
 .n4-photos{margin-top:8px;padding-bottom:16%}
 .n4-p1{width:88%}.n4-p2{width:46%}
}

/* ---------------------------------------------------------------- 4. EDITIES: kaarten staan verspringend, het reuzenwoord schuift erachter door */
.wax4{position:relative;overflow:hidden;background:none}
.wax4 i{position:absolute;left:-12%;top:0;width:124%;height:100%;background:var(--wax);background-size:44px 44px;transform:translate3d(calc((var(--p,.5) - .5)*-176px),0,0)}
.e4{overflow-x:clip;background:linear-gradient(180deg,#24103D 0,var(--ground) 22%)}
.e4-word{position:absolute;left:0;top:4%;font:800 clamp(7rem,21vw,21rem)/.82 var(--f-display);text-transform:uppercase;color:transparent;-webkit-text-stroke:2px rgba(234,223,247,.17);white-space:nowrap;pointer-events:none;transform:translate3d(calc(10vw - var(--p,.5)*34vw),0,0)}
.e4 .wrap{position:relative}
.e4{padding-bottom:clamp(40px,5vw,72px)}.e4 .cards-4{padding-bottom:40px}
.e4 .cards-4 .ed{--ky:-56;transform:translate3d(0,calc((var(--p,.5) - .5)*var(--ky)*1px),0) rotate(-.8deg)}
.e4 .cards-4 .ed:nth-child(even){--ky:56;transform:translate3d(0,calc((var(--p,.5) - .5)*var(--ky)*1px),0) rotate(.8deg)}
.e4 .cards-4 .ed:hover{transform:translate3d(0,-4px,0) rotate(0)}
.e4 .ed .slot img.ph{object-fit:cover}
@media(max-width:1000px){.e4 .cards-4{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:40px}.e4 .cards-4 .ed{--ky:-24}.e4 .cards-4 .ed:nth-child(even){--ky:24}}
@media(max-width:560px){.e4 .cards-4{grid-template-columns:1fr}.e4 .cards-4 .ed,.e4 .cards-4 .ed:nth-child(even){--ky:0}}

/* ---------------------------------------------------------------- 5. WHERE WE DANCE: een muur van echte avonden op echte plekken */
.d4{overflow-x:clip;background:linear-gradient(180deg,var(--ground) 0,#2a1250 14%,#2a1250 88%,var(--ground) 100%)}
.d4-word{position:absolute;right:-1vw;top:1%;font:800 clamp(10rem,31vw,31rem)/.8 var(--f-display);text-transform:uppercase;color:transparent;-webkit-text-stroke:2px rgba(255,206,0,.15);pointer-events:none;transform:translate3d(calc((var(--p,.5) - .5)*-20vw),0,0)}
.d4-glow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.d4-glow::before,.d4-glow::after{content:"";position:absolute;width:60vmax;aspect-ratio:1;border-radius:50%;animation:drift 26s ease-in-out infinite alternate}
.d4-glow::before{left:-20vmax;top:10%;background:radial-gradient(closest-side,rgba(238,42,123,.2),transparent)}
.d4-glow::after{right:-22vmax;bottom:6%;background:radial-gradient(closest-side,rgba(109,204,167,.16),transparent);animation-duration:33s;animation-delay:-11s}
.d4 .wrap{position:relative}
.d4-note{margin:0;max-width:26ch;color:var(--ma-lilac);font-size:1.0625rem;line-height:1.5}
.vgrid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(44px,4.6vw,66px);gap:14px}
.vt{position:relative;display:block;text-decoration:none;color:var(--ma-white);transform:translate3d(0,calc((var(--p,.5) - .5)*var(--ky,0)*1px),0);transition:filter .3s}
.vt .slot{height:100%;aspect-ratio:auto;border-color:var(--ma-white)}
.vt:hover,.vt:focus-visible{z-index:5;filter:drop-shadow(0 0 22px var(--c))}
.vt .slot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,10,34,.9) 0,rgba(21,10,34,.45) 38%,rgba(21,10,34,0) 66%);pointer-events:none}
.vt-cc{position:absolute;left:0;top:0;z-index:2;background:var(--c);color:var(--ma-ink);font:800 .9375rem/1 var(--f-body);letter-spacing:.06em;padding:8px 11px 7px;border:3px solid var(--ma-white);border-top:0;border-left:0}
.vt-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px 13px;display:flex;flex-direction:column;gap:3px}
.vt-cap b{font:800 clamp(1.05rem,.9vw + .8rem,1.7rem)/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.005em;text-shadow:0 2px 12px rgba(8,2,20,.7)}
.vt-cap i{font:600 .875rem/1.3 var(--f-body);font-style:normal;color:var(--ma-lilac)}
.vt.v1{grid-column:1/8;grid-row:1/6;z-index:2}.vt.v2{grid-column:8/13;grid-row:2/8;z-index:3}
.vt.v3{grid-column:1/6;grid-row:6/11}.vt.v4{grid-column:6/9;grid-row:8/12;z-index:2}.vt.v5{grid-column:9/13;grid-row:8/12}
.vt.v6{grid-column:1/5;grid-row:11/15;z-index:2}.vt.v7{grid-column:5/9;grid-row:12/16}.vt.v8{grid-column:9/13;grid-row:12/16;z-index:2}
.vt.v1 .vt-cap b{font-size:clamp(1.6rem,2.4vw,2.6rem)}
.vstamp{grid-column:6/8;grid-row:6/8;align-self:center;justify-self:center;margin:0;max-width:none;background:var(--ma-yellow);color:var(--ma-ink);border:3px solid var(--ma-white);padding:12px 18px;text-align:center;font:700 .875rem/1.25 var(--f-body);letter-spacing:.1em;text-transform:uppercase;transform:rotate(-5deg);box-shadow:var(--shadow);z-index:4}
.vstamp b{display:block;font:800 clamp(1.5rem,2.4vw,2.25rem)/1 var(--f-display);letter-spacing:0}
.chips4{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vw,52px);position:relative}
.chip4{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 16px 6px 8px;border:2px solid var(--c);background:rgba(21,10,34,.7);color:var(--ma-white);text-decoration:none;transition:transform .2s var(--ease),background .2s}
.chip4:hover,.chip4:focus-visible{background:var(--c);color:var(--ma-ink);transform:translateY(-3px)}
.chip4 b{font:800 1rem/1.1 var(--f-body)}.chip4 i{font:500 .9375rem/1.2 var(--f-body);font-style:normal;color:var(--ma-lilac)}
.chip4:hover i,.chip4:focus-visible i{color:var(--ma-ink)}
@media(max-width:700px){
 .vgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:12px}
 .vt,.vt.v1,.vt.v2,.vt.v3,.vt.v4,.vt.v5,.vt.v6,.vt.v7,.vt.v8{grid-column:auto;grid-row:auto;--ky:0}
 .vt .slot{height:auto;aspect-ratio:4/5}
 .vt.v1,.vt.v4,.vt.v8{grid-column:1/-1}.vt.v1 .slot,.vt.v4 .slot,.vt.v8 .slot{aspect-ratio:16/10}
 .vt.v2,.vt.v5{margin-top:26px}
 .vstamp{grid-column:auto;grid-row:auto;justify-self:center;margin:0;order:1}.vt.v8{order:2}
 .vt-cap{padding:10px 12px}.vt-cap b{font-size:1.05rem}.vt.v1 .vt-cap b{font-size:1.5rem}
 .d4-note{display:none}
}
@media(max-width:560px){.chip4{min-height:46px;padding:4px 12px 4px 6px;gap:8px}.chip4 i{display:none}.chips4{gap:10px}}

/* ---------------------------------------------------------------- 6. LINE-UP: foto als affiche, de namen schuiven tegen elkaar in */
.l4{overflow:hidden;isolation:isolate;padding-block:clamp(72px,10vw,150px)}
.l4-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--ma-ink)}
.l4-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.55) saturate(1.25);transform:scale(calc(1.2 - var(--p,.5)*.14)) translate3d(0,calc((var(--p,.5) - .5)*-5%),0)}
.l4-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--ground) 0,rgba(21,10,34,.62) 22%,rgba(21,10,34,.56) 78%,var(--ground) 100%),linear-gradient(90deg,rgba(102,45,145,.45),rgba(238,42,123,.18))}
.l4 .sticker{z-index:1}.l4 .s-a{right:5%;top:10%;width:80px}.l4 .s-b{left:4%;bottom:9%;width:84px}
.l4-names{max-width:1180px}
.l4-names .day{font:800 clamp(1rem,1vw + .8rem,1.4rem)/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;margin:6px 0 clamp(14px,2vw,28px)}
.l4-names .nm{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.05em .28em;max-width:none;margin:.04em 0;font:800 clamp(2.25rem,6.4vw,5.75rem)/.98 var(--f-display);text-transform:uppercase;color:var(--ma-mint);text-shadow:0 0 28px rgba(109,204,167,.45),0 3px 18px rgba(8,2,20,.7)}
.l4-names .nm .alt{color:var(--ma-pink);text-shadow:0 0 28px rgba(255,174,211,.45),0 3px 18px rgba(8,2,20,.7)}
.l4-names .nm .dot{color:var(--ma-yellow);text-shadow:var(--glow-y)}
.l4-names .nm1{transform:translate3d(calc((var(--p,.5) - .5)*-10vw),0,0)}
.l4-names .nm2{transform:translate3d(calc((var(--p,.5) - .5)*10vw),0,0)}
.l4-names .tba{margin:clamp(14px,2vw,26px) auto 0;font:700 1.25rem/1.4 var(--f-body);color:var(--ma-white)}
.l4-names .last{margin-top:clamp(18px,2.4vw,34px)}
.l4-names .note{display:inline-block;margin-top:22px;font:500 .9375rem/1.4 var(--f-body);color:var(--ma-lilac);background:rgba(21,10,34,.7);padding:6px 12px}
@media(max-width:700px){.l4 .s-a{width:54px}.l4 .s-b{width:56px}.l4-names .nm1,.l4-names .nm2{transform:translate3d(calc((var(--p,.5) - .5)*-5vw),0,0)}.l4-names .nm2{transform:translate3d(calc((var(--p,.5) - .5)*5vw),0,0)}}

/* ---------------------------------------------------------------- 7. AFTERMOVIES: bioscooplicht dat langzaam rondgaat, tegels met een lichte scrollverschuiving */
.am4{overflow:hidden;background:linear-gradient(180deg,#150A22,#1d0d34 50%,#150A22)}
.am4-beam{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 8%,rgba(255,206,0,.11) 10%,transparent 14% 36%,rgba(238,42,123,.13) 39%,transparent 43% 68%,rgba(109,204,167,.1) 71%,transparent 75%);animation:spin 80s linear infinite}
.am4 .wrap{position:relative}
.am4 .stag>div:nth-child(2){transform:translate3d(0,calc((var(--p,.5) - .5)*-64px),0)}
.am4 .stag>div:nth-child(3){transform:translate3d(0,calc((var(--p,.5) - .5)*-28px),0)}
.am4 .vtile .play::after{content:"";position:absolute;inset:-3px;border:3px solid var(--ma-yellow);animation:ringpulse 3.2s ease-out infinite;pointer-events:none}
@media(max-width:700px){.am4 .stag>div:nth-child(2),.am4 .stag>div:nth-child(3){transform:none}}

/* ---------------------------------------------------------------- 8. DANCE FLOOR MEMORIES: twee filmstroken schuiven tegen elkaar in terwijl je scrolt */
.m4{overflow:hidden;background:linear-gradient(180deg,#150A22 0,#201035 40%,#150A22)}
.m4-grain{position:absolute;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.m4 .wrap{position:relative}
.reel{position:relative;margin-top:clamp(12px,1.6vw,22px)}
.reel-in{display:flex;gap:clamp(10px,1.4vw,18px);width:max-content;padding-inline:var(--gut);transform:translate3d(var(--tx,0px),0,0);will-change:transform}
.fr{margin:0;flex:none;height:clamp(150px,19vw,290px);aspect-ratio:var(--a,16/10)}
.reel+.reel .fr{height:clamp(130px,16vw,240px)}
.fr .slot{height:100%;aspect-ratio:auto}
.fr:nth-child(even) .slot{transform:translateY(8%)}
@media(max-width:700px){.fr{height:150px}.reel+.reel .fr{height:130px}}

/* ---------------------------------------------------------------- 9. SINDS 2017: reuzencijfer schuift, twee foto's liggen over elkaar */
.s4{overflow:hidden}
.s4-num{position:absolute;left:-2vw;bottom:-5%;font:800 clamp(11rem,36vw,34rem)/.8 var(--f-display);color:transparent;-webkit-text-stroke:2px rgba(255,206,0,.2);pointer-events:none;transform:translate3d(calc((var(--p,.5) - .5)*-24vw),0,0)}
.s4-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
.s4-ph{position:relative;padding-bottom:14%}
.s4-a{width:74%;transform:rotate(-3deg) translate3d(0,calc((var(--p,.5) - .5)*-34px),0)}
.s4-b{position:absolute;right:0;bottom:0;width:54%;transform:rotate(4deg) translate3d(0,calc((var(--p,.5) - .5)*64px),0)}
.s4-tx .lead{margin-bottom:18px}
@media(max-width:860px){.s4-grid{grid-template-columns:1fr}.s4-ph{order:2;padding-bottom:18%}.s4-a{width:80%}.s4-b{width:56%}}

/* ---------------------------------------------------------------- 10. PLAYLIST: een plaat die uit de hoes schuift en draait, equalizer bij de knop */
.p4{overflow:hidden;background:var(--ma-ink)}
.p4-glow{position:absolute;left:50%;top:50%;width:70vmax;aspect-ratio:1;margin:-35vmax 0 0 -35vmax;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(238,42,123,.2),rgba(102,45,145,.12) 55%,transparent);animation:drift 24s ease-in-out infinite alternate}
.p4 .wrap{position:relative}
.p4-disc{position:relative;width:min(100%,440px);padding-right:16%}
.sleeve{position:relative;z-index:1;width:100%;transform:rotate(-3deg)}
.vinyl{position:absolute;z-index:0;right:0;top:8%;width:82%;aspect-ratio:1;border-radius:50%;border:3px solid rgba(255,255,255,.55);box-shadow:var(--shadow);background:radial-gradient(circle,var(--ma-yellow) 0 13%,#0c0614 13.5% 15%,transparent 15.5%),repeating-radial-gradient(circle,#0c0614 0 3px,#201233 4px 5px);translate:calc((var(--p,.5) - .3)*22%) 0;animation:spin 9s linear infinite}
.p4-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.eq{display:inline-flex;align-items:flex-end;gap:5px;height:36px}
.eq i{width:6px;height:100%;background:var(--ma-yellow);transform-origin:bottom;animation:eq 1.1s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-duration:.8s;animation-delay:-.3s;background:var(--ma-pink)}.eq i:nth-child(3){animation-duration:1.3s;animation-delay:-.6s;background:var(--ma-mint)}
.eq i:nth-child(4){animation-duration:.95s;animation-delay:-.2s;background:var(--ma-orange)}.eq i:nth-child(5){animation-duration:1.2s;animation-delay:-.8s}

/* ---------------------------------------------------------------- 11. COMMUNITY: gezichten van onze dansvloer, wax-print die langzaam meeschuift */
.c4{overflow:hidden}
.c4-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.c4-bg::before{content:"";position:absolute;inset:-20%;background:var(--wax);background-size:96px 96px;opacity:.08;transform:translate3d(calc((var(--p,.5) - .5)*160px),calc((var(--p,.5) - .5)*-80px),0) rotate(6deg)}
.c4 .wrap{position:relative}
.faces{display:flex;padding-left:18px}
.faces span{flex:none;width:clamp(84px,11vw,128px);aspect-ratio:1;margin-left:-18px;border-radius:50%;overflow:hidden;border:3px solid var(--ma-white);background:var(--ma-surface);box-shadow:var(--shadow);transform:translate3d(0,calc((var(--p,.5) - .5)*(var(--i)*-22px + 34px)),0)}
.faces img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------------------------------------------------------------- 12. CONTACT: een foto met rustige Ken Burns, licht dat langzaam verschuift */
.k4{overflow:hidden}
.k4-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.k4-bg::before{content:"";position:absolute;width:60vmax;aspect-ratio:1;right:-20vmax;top:-10vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(102,45,145,.55),transparent);animation:drift 28s ease-in-out infinite alternate}
.k4 .wrap{position:relative}
.k4-photo{margin-top:28px;max-width:30rem}
.k4-photo img.ph{animation:kb 20s ease-in-out infinite alternate}
.lb-still{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lb-note{display:flex;flex-direction:column;gap:2px;padding:12px 0 0}.lb-note i{font-style:normal;color:var(--ma-lilac);font-size:.9375rem}

/* ---------------------------------------------------------------- rustig: nergens beweging, alles leesbaar en op zijn plek */
.calm .w4-bg i,.calm .wheelbox::before,.calm .wheelbox::after,.calm .d4-glow::before,.calm .d4-glow::after,.calm .am4-beam,.calm .am4 .play::after,.calm .p4-glow,.calm .vinyl,.calm .eq i,.calm .k4-bg::before,.calm .k4-photo img.ph,.calm .wph img.sw,
.freeze .w4-bg i,.freeze .wheelbox::before,.freeze .wheelbox::after,.freeze .d4-glow::before,.freeze .d4-glow::after,.freeze .am4-beam,.freeze .am4 .play::after,.freeze .p4-glow,.freeze .vinyl,.freeze .eq i,.freeze .k4-bg::before,.freeze .k4-photo img.ph{animation:none}
.calm .eq i{transform:scaleY(.7)}.calm .wheelbox::before,.calm .wheelbox::after{display:none}
.calm .reel-in{width:auto;flex-wrap:wrap;transform:none;justify-content:center}
.calm .fr{height:auto;width:calc(33.333% - 14px);aspect-ratio:var(--a)}.calm .fr:nth-child(even) .slot{transform:none}
.calm .wph img.sw{animation:none}
@media(prefers-reduced-motion:reduce){
 .w4-bg i,.wheelbox::before,.wheelbox::after,.d4-glow::before,.d4-glow::after,.am4-beam,.am4 .play::after,.p4-glow,.vinyl,.eq i,.k4-bg::before,.k4-photo img.ph,.wph img.sw{animation:none}
 .eq i{transform:scaleY(.7)}.wheelbox::before,.wheelbox::after{display:none}
 .reel-in{width:auto;flex-wrap:wrap;transform:none;justify-content:center}
 .fr{height:auto;width:calc(33.333% - 14px);aspect-ratio:var(--a)}.fr:nth-child(even) .slot{transform:none}
 .sticker{animation:none}
}
@media(prefers-reduced-motion:reduce){.calm .fr,.fr{width:calc(50% - 10px)}}
@media(max-width:700px){.calm .fr{width:calc(50% - 10px)}}

/* =====================================================================================================
   RONDE 5 (prompt-edc-ronde5.md): echte video in de header, kaft bij Next stop, wiel zonder tikmarkering, Spotify-speler
   ===================================================================================================== */

/* 1. Header: de video blijft overal helder; alleen links loopt een verlooplaag van de achtergrondkleur naar niets,
   zodat de tekst leesbaar blijft zonder de hele video donker te maken. */
.h4 .hv-shade{background:
  linear-gradient(90deg,rgba(21,10,34,.97) 0,rgba(21,10,34,.93) 24%,rgba(21,10,34,.62) 44%,rgba(21,10,34,.16) 66%,rgba(21,10,34,0) 82%),
  linear-gradient(0deg,rgba(21,10,34,.7) 0,rgba(21,10,34,0) 34%)}
.h4 .hv-poster,.h4 .hv-video{object-position:62% 40%}
@media(max-width:860px){
 /* smal scherm: de tekst loopt over de hele breedte, dus de laag loopt van boven (video open) naar onder (tekst) */
 .h4 .hv-shade{background:linear-gradient(180deg,rgba(21,10,34,0) 0,rgba(21,10,34,.22) 40%,rgba(21,10,34,.6) 68%,rgba(21,10,34,.88) 100%)}
 .h4 h1,.h4 .lead,.h4 .eyebrow{text-shadow:0 2px 16px rgba(21,10,34,.85),0 0 3px rgba(21,10,34,.6)}
}

/* 2. Next stop: de kaft van het event, uit media/events.json (home-r5.js) */
.n4-cover{margin:0;width:100%;border:3px solid var(--ma-white);box-shadow:var(--shadow),0 0 40px rgba(238,42,123,.3);background:var(--ma-ink);transform:rotate(calc(2deg - var(--p,.5)*4deg))}
.n4-cover img{display:block;width:100%;height:auto}
.n4-covers{position:relative;padding-bottom:6%}
.n4-covers .n4-tag{left:-2%;top:-4%}
.calm .n4-cover{transform:rotate(1.5deg)}
@media(prefers-reduced-motion:reduce){.n4-cover{transform:rotate(1.5deg)}}

/* 3. Wiel: geen blauwe tikmarkering en geen focusrand na een tik; toetsenbordfocus blijft zichtbaar (:focus-visible) */
.wheelbox,.wheel,.sector{-webkit-tap-highlight-color:transparent}
.sector:focus:not(:focus-visible){outline:none}
.sector:focus-visible{outline:none}
body[data-v] .w4 .sector:focus-visible .shape,body[data-v] .w4 .sector.on:focus-visible .shape{stroke:var(--ma-yellow);stroke-width:10}
body[data-v] .w4 .sector:focus-visible,.w4 .sector.on:focus-visible{filter:drop-shadow(0 0 4px var(--ma-white)) drop-shadow(0 0 16px var(--ma-yellow))}

/* 4. Spotify-speler: eigen omlijsting, Spotify-speler pas na een klik */
.p5{position:relative;margin-top:28px;border:3px solid var(--ma-white);background:var(--ma-surface);box-shadow:var(--shadow),8px 8px 0 var(--ma-pink);transform:rotate(-1deg);max-width:560px}
.p5-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--ma-yellow);color:var(--ma-ink);border-bottom:3px solid var(--ma-white);font:800 .8125rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.06em}
.p5-bar .eq{height:18px}.p5-bar .eq i{width:4px;background:var(--ma-ink)}
.p5-stage{position:relative;height:352px;background:var(--ma-ink)}
.p5-play{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;border:0;cursor:pointer;color:var(--ma-white);font:inherit;background:linear-gradient(180deg,rgba(21,10,34,.35),rgba(21,10,34,.88)),var(--p5-img) center/cover}
.p5-disc{display:grid;place-items:center;width:92px;aspect-ratio:1;border-radius:50%;background:var(--ma-yellow);color:var(--ma-ink);border:3px solid var(--ma-white);box-shadow:var(--shadow),0 0 36px rgba(255,206,0,.45);transition:transform .25s var(--ease)}
.p5-disc svg{width:38px;height:38px;margin-left:5px;fill:currentColor}
.p5-lab{font:800 clamp(1.4rem,2.4vw,1.9rem)/1.05 var(--f-display);text-transform:uppercase;text-shadow:0 2px 12px rgba(21,10,34,.8)}
.p5-sub{max-width:30ch;font-size:.875rem;line-height:1.35;color:var(--ma-lilac);text-align:center}
.p5-play:hover .p5-disc{transform:scale(1.08) rotate(-6deg)}
.p5-play:focus-visible{outline:4px solid var(--ma-magenta);outline-offset:-8px}
.p5-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--ma-ink)}
.p4-row{margin-top:26px}
@media(max-width:700px){.p5{transform:none;box-shadow:var(--shadow),6px 6px 0 var(--ma-pink)}.p5-stage{height:352px}}
.calm .p5,.calm .p5-disc{transform:none}
@media(prefers-reduced-motion:reduce){.p5{transform:none}.p5-play:hover .p5-disc{transform:none}}