/* Gedeeld door 28 t/m 33: scrollen door het cursorblokje heen. Kleuren en lettertypes staan per versie. */
.zoom { position: relative; height: 320vh; }
.zoom .podium { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.zoom .start { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 16px; }
.zoom .plek { display: inline-block; width: .55em; height: .12em; margin-left: .06em; }
/* De wereld ligt over het hele scherm en wordt uitgeknipt tot de vorm van het blokje */
.zoom .wereld { position: absolute; inset: 0; clip-path: inset(50%); }
.zoom .wereld.knipper { animation: knipper 1.1s steps(1) infinite; }
.zoom .wereld > picture { display: block; width: 100%; height: 100%; }
.zoom .wereld > img, .zoom .wereld > picture img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform: scale(calc(1.25 - .25 * var(--e, 0))); }
.zoom .na { position: absolute; inset: 0; display: grid; align-content: center; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .zoom { height: auto; }
  .zoom .podium { position: relative; height: auto; overflow: visible; }
  .zoom .start { position: relative; min-height: 100dvh; }
  .zoom .plek { background: var(--cursor, #2B3BFF); }
  .zoom .wereld { position: relative; clip-path: none; min-height: 100dvh; animation: none; }
  .zoom .wereld > img, .zoom .wereld > picture { position: absolute; inset: 0; } .zoom .wereld img { transform: none; }
  .zoom .na { opacity: 1; }
}

/* Met JavaScript: geen uitknippen, maar een blauw vlak dat met transform groeit (vloeiend op telefoons) */
.zoom.js-zoom .podium { height: 100vh; }
.zoom.js-zoom .wereld { clip-path: none; background: none; animation: none; pointer-events: none; }
.zoom.js-zoom .vlak { position: absolute; transform-origin: 0 0; background: var(--blauw, #2B3BFF); will-change: transform; pointer-events: auto; }
.zoom.js-zoom .vlak.knipper { animation: knipper 1.1s steps(1) infinite; }
.zoom.js-zoom .na { visibility: hidden; pointer-events: auto; will-change: opacity, transform; }

/* Scroll-gestuurde versie (Chrome 115+, Safari 26+). De browser koppelt de animatie zelf aan het scrollen, op hetzelfde
   spoor als je vinger. JavaScript zet alleen de maten (--zx, --zy, --zsx, --zsy) en de klasse .sd.
   Het bereik volgt data-zoom=".45" op de homepage: 0 tot 45% de zoom, 45 tot 65% de tekst en kaarten daarna. */
@supports (animation-timeline: view()) {
  .zoom.sd { view-timeline: --zoom block; }
  .zoom.sd .vlak, .zoom.sd .start, .zoom.sd .na { animation-timeline: --zoom; animation-fill-mode: both; animation-duration: 1ms; }
  .zoom.sd .vlak { animation-name: vlakGroei; animation-timing-function: cubic-bezier(.65, 0, .35, 1); animation-range: contain 0% contain 45%; }
  .zoom.sd .vlak.knipper { animation-name: vlakGroei, knipper; animation-timeline: --zoom, auto; animation-duration: 1ms, 1.1s;
    animation-timing-function: cubic-bezier(.65, 0, .35, 1), steps(1); animation-iteration-count: 1, infinite; animation-range: contain 0% contain 45%, normal; }
  .zoom.sd .start { animation-name: startWeg; animation-timing-function: linear; animation-range: contain 0% contain 45%; will-change: transform, opacity; }
  .zoom.sd .na { animation-name: naIn; animation-timing-function: linear; animation-range: contain 45% contain 65%; }
}
@keyframes vlakGroei { to { transform: translate3d(calc(var(--zx) * -1px), calc(var(--zy) * -1px), 0) scale(var(--zsx), var(--zsy)); } }
@keyframes startWeg { 0% { opacity: 1; transform: scale(1); } 62.5% { opacity: 0; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes naIn { from { opacity: 0; transform: translateY(30px); visibility: hidden; } to { opacity: 1; transform: none; visibility: visible; } }
/* Het blokje zelf beweegt niet mee met het opkomen van de letters: cursorzoom.js meet zijn plek, en een meting halverwege die animatie zette het blauwe vlak een stukje te laag */
.zoom .merk .plek { animation: none; }
/* Bovenaan is het blokje in de tekst zelf zichtbaar, net als de cursor in het logo. Het vlak verschijnt pas als je scrolt. */
.zoom .merk .plek { margin-left: .1em; }
.zoom.js-zoom .merk .plek { background: var(--blauw, #2B3BFF); visibility: hidden; animation: op .9s .4s var(--uit) backwards, knipper 1.1s 1.4s steps(1) infinite; }
.zoom.js-zoom.rust .merk .plek { visibility: visible; }
.zoom.js-zoom.rust .vlak { visibility: hidden; }