/* =====================================================================================================
   RONDE 3: video in de banner, rustig landenwiel (vastgezet, draait mee met de scroll), echte foto's en
   scroll-gedreven beweging per sectie. Eigen code, standaard CSS. De scrollvoortgang van een sectie komt als
   --p (0..1) op het element; CSS doet de rest. Regels:
   - tekst vervaagt nooit (geen opacity-animatie op tekst): hij schuift of wordt onthuld met een clip, en is vanaf
     het eerste beeld van die stand volledig leesbaar
   - prefers-reduced-motion en ?still=1 (class .calm): geen pin, geen transform, alles meteen zichtbaar
   ===================================================================================================== */
:root{--hdr:80px;--ground:var(--ma-ink)}
@media(max-width:700px){:root{--hdr:68px}}
body{background:var(--ground)}

/* ---- tekst blijft altijd leesbaar: .rev schuift alleen, vervaagt niet ---- */
.rev{opacity:1;transform:translateY(22px);transition:transform 520ms var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.rev.in,.no-js .rev,.still .rev,.calm .rev{transform:none}
/* tegels met beeld: onthuld met een clip, in een rustige trap */
.stag>.sg{clip-path:inset(0 0 99% 0);transition:clip-path 700ms var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.stag>.sg.in{clip-path:inset(-4% -4% -4% -4%)}
.no-js .stag>.sg,.still .stag>.sg,.calm .stag>.sg{clip-path:none}

/* ---- hero met video ---- */
.hero-v{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(560px,calc(100svh - var(--hdr)),880px);padding-block:clamp(56px,8vw,120px) clamp(72px,10vw,140px);overflow:hidden;background:var(--ma-ink)}
.hv{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ma-ink)}
.hv-poster,.hv-video{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;transform:translate3d(0,calc(var(--p,0)*14%),0) scale(1.06);will-change:transform}
.hv-video{opacity:0;transition:opacity 900ms ease}.hv-video.on{opacity:1}
/* donkere laag: links het zwaarst waar de tekst staat, overal minstens .72; gemeten in RESULT-edc-3.md */
.hv-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,10,34,.94) 0,rgba(21,10,34,.88) 46%,rgba(21,10,34,.74) 100%)}
/* de onderste rand lost op in de sectie eronder */
.hero-v::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(26%,200px);background:linear-gradient(to bottom,rgba(21,10,34,0),var(--ground));pointer-events:none;z-index:0}
.hero-in{position:relative;z-index:1;width:100%}
.hero-v h1{font-size:clamp(2.25rem,4.6vw + 1rem,5.5rem);max-width:none;margin:14px 0 0}
.hero-v h1 .hl{display:block}
.hero-v .lead{margin-top:22px;max-width:34em}
.hero-v .btn-row{margin-top:30px}
.hero-v .hl{animation:wipeup 800ms var(--ease) both;animation-delay:calc(var(--l,0)*110ms + 120ms)}
@keyframes wipeup{from{clip-path:inset(0 0 100% 0);transform:translateY(26px)}to{clip-path:inset(-40% -12% -40% -12%);transform:none}}
.hero-v h1 .hl:nth-child(2){transform:translate3d(0,calc(var(--p,0)*-26px),0)}

/* ---- landenwiel: vastgezet, scroll draait het wiel ---- */
.wsec{position:relative;background:linear-gradient(180deg,var(--ground),var(--ground))}
.wtrack{height:calc(100svh + 10*30svh)}
.wpin{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;align-items:center;overflow:hidden}
.wgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"head wheel" "read wheel" "btn wheel";grid-template-rows:auto auto 1fr;column-gap:clamp(24px,4vw,64px);align-items:start;width:100%}
.whead{grid-area:head;align-self:end}.wread{grid-area:read}.wbtn{grid-area:btn;justify-self:start;align-self:start}.wheelbox{grid-area:wheel;align-self:center}
.whead h2{font-size:clamp(2rem,2.6vw + 1rem,3.5rem);margin:12px 0 0}
.whead .proof{margin:24px 0 22px}
.wheelbox{position:relative;width:min(100%,calc(100svh - var(--hdr) - 90px));max-width:640px;margin-inline:auto}
.wheel .rot{transform:rotate(calc(var(--rot,0)*1deg));transform-origin:360px 360px}
.wheel .pointer{fill:var(--ma-yellow);stroke:var(--ma-ink);stroke-width:4;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(255,206,0,.6))}
.sector{transition:filter .25s;cursor:pointer}
.sector:hover,.sector:focus-visible{transform:none;filter:none}
.sector.on{transform:none;filter:drop-shadow(0 0 14px var(--c))}
.sector.on .shape{stroke:var(--ma-white);stroke-width:7}
.sector .tb,.sector.flip .tt{display:none}.sector.flip .tb{display:inline}
.sector:focus-visible .shape{stroke:var(--ma-white);stroke-width:7}
/* uitleg bij het wiel: één regel, geen verborgen hover */
.wread{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin:0 0 22px;width:100%;padding:16px 20px;background:var(--ma-surface);border:3px solid var(--ma-white);box-shadow:var(--shadow);max-width:34rem;border-left:12px solid var(--c)}
.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)}
.wread b{display:block;font:800 1.5rem/1.2 var(--f-body);text-transform:none}
.wread span[data-r=n]{display:block;font-size:1.0625rem;line-height:1.5;color:var(--ma-lilac)}
.wread p{margin:6px 0 0;font:600 1.125rem/1.45 var(--f-body);font-variant-numeric:var(--tnum)}
.wread p strong{font-weight:800}
@media(max-width:860px){
 .wtrack{height:calc(100svh + 10*24svh)}
 .wgrid{grid-template-columns:1fr;grid-template-areas:"head" "read" "wheel" "btn";grid-template-rows:none;gap:12px}
 .whead{align-self:start}
 .whead h2{font-size:1.75rem;margin-top:6px}.whead .eyebrow{display:none}
 .whead .proof{margin:12px 0 0;gap:8px 20px}.whead .proof b{font-size:1.75rem}
 .wheelbox{width:min(100%,300px,calc(100svh - var(--hdr) - 400px))}
 .wread{margin:0;padding:10px 14px;gap:12px}.wread .cc{width:46px;height:46px;font-size:1.25rem}.wread b{font-size:1.25rem}
 .wread span[data-r=n]{display:none}
 .wbtn{min-height:48px;width:100%;justify-self:stretch}
}
@media(max-height:620px) and (max-width:860px){.wtrack{height:auto}.wpin{position:static;height:auto;padding-block:32px}}

/* ---- aftelling: blijft staan, de blokken komen in trap binnen ---- */
.nsec{padding:0}
.ntrack{height:calc(100svh + 70svh)}
.npin{position:sticky;top:var(--hdr);min-height:calc(100svh - var(--hdr));display:flex;align-items:center;padding-block:32px}
.nsec .count div{--t:clamp(0,calc(var(--p,1)*2.65 - var(--k,0)*.55),1);clip-path:inset(0 0 calc((1 - var(--t))*100%) 0);transform:translate3d(0,calc((1 - var(--t))*28px),0)}
.nsec .count div:nth-child(2){--k:1}.nsec .count div:nth-child(3){--k:2}.nsec .count div:nth-child(4){--k:3}
.nflyer .slot{transform:rotate(calc(2deg - var(--p,1)*3.5deg))}
@media(max-width:860px){.ntrack{height:calc(100svh + 40svh)}}
@media(max-height:560px){.ntrack{height:auto}.npin{position:static}}

/* ---- line-up: de regels bouwen het affiche op terwijl de sectie vaststaat ---- */
.lsec{padding:0}
.ltrack{height:calc(100svh + 140svh)}
.lpin{position:sticky;top:var(--hdr);min-height:calc(100svh - var(--hdr));display:flex;align-items:center;padding-block:32px;overflow:hidden}
.lineup .ls{--t:clamp(0,calc(var(--p,1)*6.4 - var(--k,0)*.9),1);display:inline-block;clip-path:inset(-8% calc((1 - var(--t))*100%) -8% 0);transform:translate3d(calc((1 - var(--t))*-24px),0,0)}
.lineup p.ls,.lineup p.last{display:block}
@media(max-width:860px){.ltrack{height:calc(100svh + 90svh)}}
@media(max-height:560px){.ltrack{height:auto}.lpin{position:static}}

/* ---- steden en landen: een baan die zijwaarts meebeweegt ---- */
.rsec{padding:0}
.rtrack{height:calc(100svh + var(--ov,700px)*var(--kk,1))}
.rpin{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vw,40px);overflow:hidden}
.rail{overflow:hidden}
.rail-in{display:flex;gap:20px;width:max-content;padding-inline:max(var(--gut),calc((100vw - 1200px)/2));transform:translate3d(calc(var(--p,0)*var(--rx,0px)*-1),0,0);will-change:transform}
.rail .cty{width:min(290px,76vw);flex:none;min-height:190px}
@media(max-width:860px){.rtrack{--kk:.8}.rail-in{gap:14px;padding-inline:16px}}

/* ---- foto's: het beeld beweegt langzamer dan de pagina, met een lichte schaal ---- */
.slot.has-img{background:var(--ma-surface)}
.slot img.ph{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;display:block;transform:translate3d(0,calc((var(--pp,.5) - .5)*-8%),0) scale(calc(1.1 - var(--pp,.5)*.07))}
.vtile .slot.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,10,34,.5),rgba(21,10,34,0) 45%);pointer-events:none}

/* ---- rustig voor wie dat vraagt (en voor schermafbeeldingen met ?still=1) ---- */
.calm .wtrack,.calm .ntrack,.calm .ltrack,.calm .rtrack,.calm-sec .wtrack,.calm-sec .ntrack,.calm-sec .ltrack,.calm-sec .rtrack{height:auto}
.calm .wpin,.calm .npin,.calm .lpin,.calm .rpin,.calm-sec .wpin,.calm-sec .npin,.calm-sec .lpin,.calm-sec .rpin{position:static;height:auto;min-height:0;padding-block:clamp(48px,7vw,96px);overflow:visible}
.calm .rail{overflow-x:auto;scrollbar-width:thin}.calm .rail-in{transform:none}
.calm .hv-video{display:none}.calm .hv-poster,.calm .hv-video,.calm .hero-v h1 .hl:nth-child(2){transform:none}
.calm .hero-v .hl{animation:none}
.calm .wheel .rot{transition:none}
.calm .nsec .count div,.calm .lineup .ls,.calm-sec .count div,.calm-sec .lineup .ls{clip-path:none;transform:none}
.calm .slot img.ph{transform:none;top:0;height:100%}
.calm .nflyer .slot{transform:none}
@media(prefers-reduced-motion:reduce){
 .wtrack,.ntrack,.ltrack,.rtrack{height:auto}
 .wpin,.npin,.lpin,.rpin{position:static;height:auto;min-height:0;padding-block:clamp(48px,7vw,96px);overflow:visible}
 .rail{overflow-x:auto}.rail-in{transform:none}
 .hv-video{display:none}.hv-poster,.hero-v h1 .hl:nth-child(2){transform:none}
 .hero-v .hl{animation:none}
 .nsec .count div,.lineup .ls{clip-path:none;transform:none}
 .slot img.ph{transform:none;top:0;height:100%}
 .stag>.sg{clip-path:none}.nflyer .slot{transform:none}
}

/* kaarten van het overzicht: kleine kop in DM Sans */
.dcard h2{font:800 1.75rem/1.2 var(--f-body);text-transform:none}