/* ======================= MOTION API (kort, volledige uitleg: research/MOTION_API.md) =======================
   HERO VISUAL     .hero-vis (container) met kinderen: .hv-in (schuift binnen, optioneel .hv-links .hv-rechts .hv-zoom),
                   .hv-pop (kaartje poppt op), .hv-float (zweeft rustig), .hv-pulse (zachte puls), .hv-line (lijn tekent, scaleX),
                   .hv-draw (svg path met pathLength="1" tekent). Volgorde via --i of automatisch. Start bij in beeld, loops enkel in beeld.
   TIJDLIJN        .tl > .tl-lijn + .tl-item (items lichten op, lijn vult mee tijdens het scrollen, gsm en desktop)
   STICKY WISSEL   .sticky-wissel > .sw-beeld > .sw-vis (meerdere) en .sw-stappen > .sw-stap (even veel); data-actief op de wrapper
   TELLERS         data-count="160" data-suffix="+" data-dec="0" (tekst in de HTML blijft de eindwaarde)
   Titels          .bt-h1, .bt-kop h2, .hv-titel (extra) worden regel per regel onthuld.
   ================================================================================================== */
/* Motion laag voor werkversneller.be
   Regels: enkel transform, opacity, clip-path (en de losse eigenschappen translate en scale).
   Verborgen beginstaten enkel onder html.js en enkel zonder reduced motion.
   Eén easing (--ease), intro's 0,7 tot 1,2 s, hover 0,25 tot 0,4 s. */

/* ---------- terugval zonder JS: na 1 s staat alles zichtbaar, nooit onzichtbaar blijven ---------- */
@keyframes m-fb{to{opacity:1;transform:none;clip-path:none}}
@keyframes m-fb-w{to{opacity:1;transform:none}}
html:not(.js) .rv,html:not(.js) .ed-onthul{animation:m-fb .01s linear 1s forwards}
html:not(.js) .wr>span{animation:m-fb-w .01s linear 1s forwards}

/* afdruk: alles zichtbaar */
@media print{.rv,.mv,.mk-s,.ft,.ck2,.wr>span{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}}

/* ---------- gedeeld, geen beweging nodig ---------- */
.cf3 b,.gu-c b,.hu-c b,.v-cij b,[data-tel]{font-variant-numeric:tabular-nums}
.lg-rij{overflow:clip}
.cr{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px}
.bt-hero>.bt-w{position:relative;z-index:1}

/* hero achtergrond: een extra laag achter de hero, enkel transform animeert */
.bt-hero::after{content:"";position:absolute;inset:-22% -12%;z-index:0;pointer-events:none;
  background:radial-gradient(38% 46% at 24% 38%,rgba(23,90,245,.13),transparent 70%),radial-gradient(34% 42% at 76% 28%,rgba(130,176,255,.20),transparent 70%),radial-gradient(40% 40% at 62% 88%,rgba(23,90,245,.08),transparent 70%)}
.bt-hero::before{z-index:0}

@media (prefers-reduced-motion:no-preference){

@keyframes m-mesh{0%{transform:translate3d(-3%,-2%,0) scale(1)}50%{transform:translate3d(3%,2%,0) scale(1.08)}100%{transform:translate3d(-1.5%,4%,0) scale(1.03)}}
@keyframes m-rise{from{opacity:0;transform:translate3d(0,30px,0) scale(.985)}to{opacity:1;transform:none}}

.bt-hero::after{animation:m-mesh 28s ease-in-out infinite alternate}
html.js .bt-hero:not(.live)::after{animation-play-state:paused}
@media (max-width:700px){.bt-hero::after{inset:-12% -30%;background:radial-gradient(60% 50% at 30% 40%,rgba(23,90,245,.13),transparent 70%),radial-gradient(55% 45% at 78% 70%,rgba(130,176,255,.20),transparent 70%)}}

/* ---------- 1. titels regel per regel uit een masker ---------- */
html.js .m-sp.rv{opacity:1;transform:none}
html.js .wr{padding:.07em .04em .17em;margin:-.07em -.04em -.17em}
html.js .wr>span{transform:translate3d(0,112%,0);opacity:0;transition:transform .4s var(--ease),opacity .25s ease-out}
html.js .zie .wr>span,html.js .wr.zie>span{transform:none;opacity:1}

/* em pil in de h1: pil en woord komen samen binnen, pil zet zich daarna recht (alles binnen 500 ms) */
html.js .bt-h1 em,html.js .bt-kop h2 em{position:relative;isolation:isolate;background:none;box-shadow:none;transform:rotate(-3deg);transition:transform .45s var(--ease)}
html.js .bt-h1 em::before,html.js .bt-kop h2 em::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:.32em;background:var(--blauw);box-shadow:0 14px 34px -16px rgba(23,90,245,.8);opacity:0;transform:scale(.94);transition:opacity .25s ease-out,transform .4s var(--ease)}
html.js .bt-h1.zie em,html.js .bt-kop h2.zie em{transform:rotate(-1.5deg)}
html.js .bt-h1.zie em::before,html.js .bt-kop h2.zie em::before{opacity:1;transform:none}

/* ---------- 2. beelden schuiven open ---------- */
html.js .ft.rv,html.js .bt-visual.foto,html.js .ck2.mv{opacity:0;transform:none;clip-path:none;transition:opacity .7s var(--ease)}
html.js .ft.rv.zie,html.js .bt-visual.foto.zie,html.js .ck2.mv.zie{opacity:1}
html.js .ft.rv img,html.js .bt-visual.foto img,html.js .ck2.mv .ck-dev{scale:1;clip-path:none}
html.js .bt-visual.foto{overflow:clip}

/* hero visual komt iets later en iets groter binnen */
html.js .bt-visual.rv:not(.foto){transform:translate3d(0,44px,0) scale(.97);transition:opacity 1.1s var(--ease) .1s,transform 1.4s var(--ease) .1s}
html.js .bt-visual.rv.zie{transform:none}

/* ---------- 3. gestaffelde opkomst per rij ---------- */
html.js .mk-s:not(.zie),html.js .mv:not(.zie):not(.ck2){opacity:0;transform:none}
html.js .mk-s.zie,html.js .mv.zie:not(.ck2){opacity:1;animation:m-rise .95s var(--ease) calc(var(--i,0)*75ms) backwards}
html.js .mv:not(.zie):not(.ck2){transition:none}
/* de basis .rv overgang niet laten botsen met de animatie */
html.js .mk-s.rv{transition-property:box-shadow,background-color,background}
html.js .bk2.mk-s{transition-property:transform,box-shadow}
html.js .tg.mk-s{transition-property:background,transform}
html.js .mk-s.zie{transition-delay:0s}

/* stappen: kaarten komen na elkaar, lijn tekent zich erboven */
html.js .st2>div{opacity:0;visibility:hidden;transform:translate3d(0,26px,0);transition:opacity .9s var(--ease),transform 1s var(--ease),visibility 0s linear .9s}
html.js .st2.zie>div{opacity:1;visibility:visible;transform:none;transition:opacity .9s var(--ease),transform 1s var(--ease),visibility 0s}
html.js .st2.zie>div:nth-child(2){transition-delay:.12s}
html.js .st2.zie>div:nth-child(3){transition-delay:.24s}
html.js .st2.zie>div:nth-child(4){transition-delay:.36s}
html.js .st2.zie>div:nth-child(5){transition-delay:.48s}

/* voortgangslijn boven de stappen: vult zich tijdens het scrollen */
html.js .st2{position:relative;margin-top:22px}
html.js .st2::before,html.js .st2::after{content:"";position:absolute;left:0;right:0;top:-16px;height:3px;border-radius:3px;pointer-events:none}
html.js .st2::before{background:var(--lijn)}
html.js .st2::after{background:var(--blauw);transform:scaleX(var(--v,0));transform-origin:0 50%}

/* ---------- 12. haarlijnen die zich tekenen ---------- */
html.js .mw>div{position:relative}

/* ---------- 7. logostrook: rustig, pauzeert buiten beeld ---------- */
html.js .lg-rij:not(.live) .lg-band{animation-play-state:paused}
.lg-band{animation-duration:calc(var(--n,10)*4.6s)}

/* ---------- 13. FAQ klapt zacht open ---------- */
@supports (interpolate-size:allow-keywords){
  html.js .faq,html.js .v3h .faq{interpolate-size:allow-keywords}
  html.js .fq::details-content{block-size:0;overflow:clip;transition:block-size .55s var(--ease),content-visibility .55s allow-discrete}
  html.js .fq[open]::details-content{block-size:auto}
}

/* gsm: rustige indruk bij aanraken */
.btn-p:active{scale:.98}

} /* einde no-preference */

/* ---------- alles wat een muis nodig heeft: enkel desktop ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){

/* spotlight op kaarten */
html.js .bk2,html.js .mw>div,html.js .pr2>div,html.js .cf3>div{isolation:isolate}
html.js .bk2::before,html.js .mw>div::before,html.js .pr2>div::before,html.js .cf3>div::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(23,90,245,.10),transparent 60%)}
html.js .bk2.blauw::before,html.js .pr2>div:first-child::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.20),transparent 60%)}
html.js [data-glow]:hover::before{opacity:1}

/* glazen tegels met lichtrand die de muis volgt */
html.js .tg{position:relative;isolation:isolate}
html.js .tg::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 65%)}
html.js .tg::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.95),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.js .tg:hover::before,html.js .tg:hover::after{opacity:1}

/* magnetische primaire knop */
html.js .btn-p{transition:transform .4s var(--ease),box-shadow .4s,background .3s,translate .35s var(--ease)}
html.js .btn-p .ico{transition:transform .4s var(--ease),translate .35s var(--ease)}

/* logostrook pauzeert bij hover */
.lg-rij:hover .lg-band{animation-play-state:paused}
}

@supports not (backdrop-filter:blur(1px)){.tg{background:rgba(255,255,255,.16)}}

/* =================== RONDE 3 =================== */
/* sticky wissel: functioneel, ook zonder animatie */
.sticky-wissel{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;position:relative}
.sw-beeld{display:grid;position:sticky;top:76px;z-index:2;background:#fff;border-radius:22px;box-shadow:0 0 0 1px var(--lijn),0 24px 40px -28px rgba(11,47,168,.35);padding:12px;max-height:44vh;overflow:clip}
.sw-vis{grid-area:1/1;display:grid;place-items:center;min-width:0;min-height:0}
.sw-vis>*{max-width:100%;max-height:calc(44vh - 24px)}
.sw-vis img{width:auto;height:auto;object-fit:contain;border-radius:14px}
.sw-stappen{display:grid;gap:0}
.sw-stap{min-height:38vh;display:flex;flex-direction:column;justify-content:center;padding-block:18px}
.sw-stap h3{font-size:clamp(24px,3vw,38px);font-weight:750;letter-spacing:-.045em;line-height:1.08}
.sw-stap p{color:var(--grijs);margin-top:10px;max-width:30em}
html.js .sw-vis:not(.aan){opacity:0;pointer-events:none}
html:not(.js) .sw-vis:not(:first-child){display:none}
@media (min-width:860px){
  .sticky-wissel{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:start}
  .sw-beeld{top:110px;max-height:none;min-height:min(520px,68vh);padding:clamp(16px,2vw,28px);border-radius:28px;align-content:center}
  .sw-vis>*{max-height:min(480px,62vh)}
  .sw-stap{min-height:62vh}
}

/* tijdlijn */
.tl{position:relative;display:grid;gap:clamp(20px,3vw,34px);padding-left:42px}
.tl-lijn{position:absolute;left:11px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--lijn);overflow:hidden;pointer-events:none}
.tl-lijn::after{content:"";position:absolute;inset:0;background:var(--blauw);transform:scaleY(var(--v,1));transform-origin:50% 0}
.tl-item{position:relative;min-width:0}
.tl-item::before,.tl-item::after{content:"";position:absolute;left:-39px;top:5px;width:17px;height:17px;border-radius:50%}
.tl-item::before{background:#fff;box-shadow:inset 0 0 0 3px var(--lijn)}
.tl-item::after{background:var(--blauw);box-shadow:0 0 0 4px #fff;transform:scale(1)}
.tl-item h3{font-size:clamp(20px,2.2vw,26px);font-weight:750;letter-spacing:-.04em;line-height:1.15}
.tl-item p{color:var(--grijs);margin-top:6px;max-width:34em}
html.js .tl{--v:0}

@media (prefers-reduced-motion:no-preference){
/* hero visual */
html.js .hero-vis .hv-in,html.js .hero-vis .hv-pop{opacity:0;transform:translate3d(0,28px,0) scale(.97);transition:opacity .9s var(--ease) calc(var(--i,0)*120ms + 120ms),transform 1.3s var(--ease) calc(var(--i,0)*120ms + 120ms)}
html.js .hero-vis .hv-in.hv-links{transform:translate3d(-36px,0,0)}
html.js .hero-vis .hv-in.hv-rechts{transform:translate3d(36px,0,0)}
html.js .hero-vis .hv-in.hv-zoom{transform:scale(.88)}
html.js .hero-vis .hv-pop{transform:scale(.6)}
html.js .hero-vis.zie .hv-in,html.js .hero-vis.zie .hv-pop{opacity:1;transform:none}
html.js .hero-vis .hv-line{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--ease) calc(var(--i,0)*120ms + 300ms)}
html.js .hero-vis.zie .hv-line{transform:none}
html.js .hero-vis .hv-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) calc(var(--i,0)*120ms + 300ms)}
html.js .hero-vis.zie .hv-draw{stroke-dashoffset:0}
@keyframes hv-float{from{translate:0 0}to{translate:0 -10px}}
@keyframes hv-pulse{0%,100%{scale:1}50%{scale:1.045}}
.hero-vis.zie.live .hv-float{animation:hv-float 6.5s ease-in-out calc(var(--i,0)*-1.7s) infinite alternate}
.hero-vis.zie.live .hv-pulse{animation:hv-pulse 3.4s ease-in-out calc(var(--i,0)*-.9s) infinite}

/* tijdlijn: items dimmen tot de lijn ze bereikt */
html.js .tl-item>*{transition:opacity .6s var(--ease)}
html.js .tl:not(.zie) .tl-item:not(.aan)>*{opacity:.38}
html.js .tl-item::after{transition:transform .5s var(--ease)}
html.js .tl:not(.zie) .tl-item:not(.aan)::after{transform:scale(0)}
html.js .tl.zie .tl-lijn::after{transform:none}

/* sticky wissel */
html.js .sw-vis{transition:opacity .6s var(--ease),transform .9s var(--ease);transform:scale(.97)}
html.js .sw-vis.aan{transform:none}
html.js .sw-stap>*{transition:opacity .5s var(--ease)}
html.js .sticky-wissel:not(.zie) .sw-stap:not(.aan)>*{opacity:.35}
}

/* algemene regel: verborgen gestapelde kaarten zijn echt verborgen, nooit twee teksten over elkaar */
html.js .sw-vis:not(.aan),html.js .sw-vi:not(.on):not(.aan){visibility:hidden}
html.js .sw-vis.aan,html.js .sw-vi.on,html.js .sw-vi.aan{visibility:visible}
@media (prefers-reduced-motion:no-preference){html.js .sw-vis,html.js .sw-vi{transition-property:opacity,transform,visibility}html.js .sw-vis:not(.aan),html.js .sw-vi:not(.on):not(.aan){transition-delay:0s,0s,.6s}}

/* gsm: onder 860 px geen sticky beeld. Werkers hun eigen .sw-v en .hw-v gaan in de stroom, hun eigen mobiele variant (display:none) blijft gelden */
@media (max-width:859.98px){
  .sw-v,.hw-v,.sw-stage-wrap{position:static!important}
  .sticky-wissel{display:block}
  .sticky-wissel .sw-beeld{display:none}
  .sticky-wissel.sw-mob .sw-vis{display:grid;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto;margin-top:14px;background:#fff;border-radius:20px;box-shadow:0 0 0 1px var(--lijn);padding:12px;max-height:none}
  .sticky-wissel.sw-mob .sw-vis>*{max-height:min(300px,40vh)}
  .sticky-wissel .sw-stap{min-height:0;padding-block:20px}
  html.js .sticky-wissel .sw-stap>*{opacity:1!important}
}

/* titelwoorden van pagina's met eigen .x-wd animatie: geen blur, korter (max 500 ms) */
@keyframes m-xwd{from{opacity:0;transform:translateY(.45em)}}
@media (prefers-reduced-motion:no-preference){.x-wd{animation-name:m-xwd!important;animation-duration:.4s!important;animation-delay:calc(var(--i,0)*20ms)!important}}