/* =========================================================================
   ASY · asy.nl
   Eén pagina, drie kleurwerelden. De basis is donker; elke app brengt zijn eigen
   wereld mee, en de pagina kleurt mee terwijl je scrolt (zie [data-wereld]).
   ========================================================================= */

:root {
  --basis: #07080c;
  --basis-2: #0c0e15;
  --inkt: #f4f3ef;
  --inkt-zacht: rgba(244, 243, 239, .62);
  --inkt-dim: rgba(244, 243, 239, .38);
  --lijn: rgba(255, 255, 255, .09);

  /* Kleuren van de drie werelden, ook gebruikt in de hero. */
  --roze: #ff2d7a;
  --oranje: #ff7a1a;
  --cyaan: #22d3ee;
  --lime: #b6f02e;
  --paars: #8b5cf6;
  --abrikoos: #f3a183;
  --poeder: #b7d0ec;
  --salie: #dde6dd;
  --groen: #2e5a3c;
  --groen-diep: #1f3d2b;
  --navy: #16253f;

  /* De actieve wereld. Standaard: ASY zelf. */
  --w-bg: var(--basis);
  --w-inkt: var(--inkt);
  --w-zacht: var(--inkt-zacht);
  --w-accent: var(--roze);
  --w-accent-2: var(--oranje);
  --w-kaart: rgba(255, 255, 255, .04);
  --w-lijn: var(--lijn);

  --display: 'Syne', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r: 28px;
  --wrap: 1240px;
  --gutter: clamp(18px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-uit: cubic-bezier(.16, 1, .3, 1);
}

/* De werelden. Een sectie draagt data-wereld; het script zet hetzelfde attribuut op
   <html> zodra de sectie in beeld is, en de achtergrond van de hele pagina gaat mee. */
[data-wereld="7k"] {
  --w-bg: var(--salie);
  --w-inkt: var(--groen-diep);
  --w-zacht: rgba(31, 61, 43, .66);
  --w-accent: #e07a2e;
  --w-accent-2: var(--groen);
  --w-kaart: rgba(255, 255, 255, .55);
  --w-lijn: rgba(31, 61, 43, .14);
}
[data-wereld="kadans"] {
  --w-bg: #0b0d14;
  --w-inkt: #f6f5ff;
  --w-zacht: rgba(246, 245, 255, .6);
  --w-accent: var(--roze);
  --w-accent-2: var(--oranje);
  --w-kaart: rgba(255, 255, 255, .05);
  --w-lijn: rgba(255, 255, 255, .1);
}
[data-wereld="deelsom"] {
  --w-bg: var(--navy);
  --w-inkt: #fbf7f2;
  --w-zacht: rgba(251, 247, 242, .64);
  --w-accent: var(--abrikoos);
  --w-accent-2: var(--poeder);
  --w-kaart: rgba(255, 255, 255, .06);
  --w-lijn: rgba(255, 255, 255, .12);
}

/* ------------------------------------------------------------------ basis */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--w-inkt);
  background: var(--w-bg);
  transition: background-color 1.1s var(--ease), color .9s var(--ease);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1; text-wrap: balance; }
p { margin: 0; }
::selection { background: var(--w-accent); color: var(--basis); }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Korrel over alles: subtiel, maakt de vlakken minder digitaal. */
.korrel {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .07; mix-blend-mode: overlay;
  animation: korrel 1.2s steps(4) infinite;
}
@keyframes korrel {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -1%); } 100% { transform: translate(0, 0); }
}

/* De lichtvlek die de muis volgt. Alleen met een echte muis. */
.spot {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--w-accent) 18%, transparent), transparent 60%);
  transition: opacity .6s;
}
@media (pointer: fine) { .spot { opacity: 1; } }

/* -------------------------------------------------------------------- kop */

.kop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  mix-blend-mode: difference; color: #fff;
}
.merk {
  font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .08em;
  display: inline-flex; align-items: center; gap: 10px;
}
.merk-teken { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.merk-teken path:last-child { transform-origin: 32px 40px; animation: wenk 3.2s ease-in-out infinite; }
@keyframes wenk { 0%, 70%, 100% { transform: translateY(0); } 82% { transform: translateY(-4px); } }
.kop nav { display: flex; gap: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.kop nav a { position: relative; padding: 6px 0; }
.kop nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: #fff; transition: right .4s var(--ease-uit); }
.kop nav a:hover::after { right: 0; }

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative; min-height: 100svh; display: grid; align-items: end;
  padding: 140px 0 clamp(40px, 8vh, 90px); overflow: hidden; isolation: isolate;
  color: var(--inkt);
}
.hero canvas, .hero .schader-fallback { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero .schader-fallback { z-index: -3; }
.schader-fallback {
  background:
    radial-gradient(60% 50% at 20% 30%, color-mix(in oklab, var(--roze) 55%, transparent), transparent 70%),
    radial-gradient(50% 60% at 80% 20%, color-mix(in oklab, var(--cyaan) 45%, transparent), transparent 70%),
    radial-gradient(60% 60% at 60% 90%, color-mix(in oklab, var(--oranje) 50%, transparent), transparent 70%),
    var(--basis);
  animation: drijf 18s ease-in-out infinite alternate;
}
@keyframes drijf { to { background-position: 10% 20%, -10% 10%, 5% -10%; } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7, 8, 12, .15) 0%, rgba(7, 8, 12, 0) 40%, rgba(7, 8, 12, .85) 100%);
}
.hero .wrap { display: grid; gap: 28px; }
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px; color: var(--inkt-zacht);
}
.kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.hero h1 {
  font-size: clamp(36px, 9.4vw, 136px); line-height: .92; max-width: 11ch;
}
/* De tekst in de hero staat in het eerste scherm; die hoeft niet op een observer te
   wachten en komt mee zodra de hero zelf `in` krijgt. */
.hero.in [data-reveal] { opacity: 1; transform: none; }
.hero h1 .glans {
  display: inline-block;
  background: linear-gradient(92deg, var(--roze), var(--oranje) 38%, var(--abrikoos) 62%, var(--cyaan));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  background-size: 200% 100%; animation: glans 9s linear infinite;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .glans { background: none; color: var(--abrikoos); -webkit-text-fill-color: currentColor; }
}
@keyframes glans { to { background-position: 200% 0; } }
.hero-onder { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: end; }
.hero-acties { display: grid; gap: 22px; }
.hero-onder p { max-width: 46ch; font-size: clamp(17px, 1.6vw, 21px); color: var(--inkt-zacht); text-wrap: pretty; }
.woorden { font-family: var(--mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--inkt-zacht); display: flex; gap: 14px; align-items: center; }
.woorden .wissel { position: relative; display: inline-block; min-width: 15ch; height: 1.4em; line-height: 1.4em; vertical-align: bottom; overflow: hidden; color: var(--inkt); }
.woorden .wissel span { position: absolute; left: 0; top: 0; line-height: 1.4em; opacity: 0; transform: translateY(100%); transition: transform .7s var(--ease-uit), opacity .5s; }
.woorden .wissel span.aan { opacity: 1; transform: translateY(0); }
.woorden .wissel span.weg { opacity: 0; transform: translateY(-100%); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.knop {
  --k: var(--inkt);
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
  font-weight: 600; font-size: 15px; letter-spacing: .01em; color: var(--k);
  background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .5s var(--ease-uit), background .3s, border-color .3s;
  will-change: transform;
}
.knop:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.knop-vol { background: var(--inkt); color: var(--basis); border-color: transparent; }
.knop-vol:hover { background: #fff; }
.knop svg { width: 16px; height: 16px; }
.scrollhint {
  position: absolute; right: var(--gutter); bottom: 32px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--inkt-dim); display: none; align-items: center; gap: 12px;
}
.scrollhint::after { content: ""; width: 1px; height: 54px; background: linear-gradient(var(--inkt-dim), transparent); animation: zak 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes zak { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* --------------------------------------------------------------- cijfers */

.cijfers { border-top: 1px solid var(--w-lijn); border-bottom: 1px solid var(--w-lijn); background: var(--basis-2); color: var(--inkt); }
.cijfers .wrap { display: grid; grid-template-columns: repeat(2, 1fr); }
.cijfer { padding: 30px 18px 30px 0; border-right: 1px solid var(--lijn); display: grid; gap: 6px; }
.cijfer:nth-child(2n) { padding-left: 18px; border-right: 0; }
.cijfer:nth-child(n+3) { border-top: 1px solid var(--lijn); }
.cijfer b { font-family: var(--display); font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.cijfer b small { font-size: .5em; color: var(--w-accent); margin-left: 2px; }
.cijfer span { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-zacht); }

/* ---------------------------------------------------------------- marquee */

.band { overflow: hidden; padding: 22px 0; border-bottom: 1px solid var(--lijn); background: var(--basis); color: var(--inkt);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.band-spoor { display: flex; gap: 48px; width: max-content; animation: loop 38s linear infinite; font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--inkt-zacht); }
.band-spoor span { display: inline-flex; align-items: center; gap: 48px; white-space: nowrap; }
.band-spoor span::after { content: "◆"; font-size: 8px; color: var(--roze); }
.band:hover .band-spoor { animation-play-state: paused; }
@keyframes loop { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- secties */

section.blok { padding: clamp(80px, 12vw, 160px) 0; position: relative; }
.sectie-kop { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 80px); }
.sectie-kop h2 { font-size: clamp(36px, 6vw, 84px); line-height: .95; }
.sectie-kop p { font-size: clamp(17px, 1.5vw, 20px); color: var(--w-zacht); max-width: 52ch; text-wrap: pretty; }
.kicker.wereld { color: var(--w-accent); }

/* Manifest: drie kaarten met glas */
.manifest { display: grid; gap: 16px; grid-template-columns: 1fr; }
.kaart {
  position: relative; padding: 30px 28px 32px; border-radius: var(--r);
  background: var(--w-kaart); border: 1px solid var(--w-lijn);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: grid; gap: 14px; overflow: hidden; isolation: isolate;
  transition: transform .6s var(--ease-uit), border-color .4s;
}
.kaart::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; opacity: 0;
  background: radial-gradient(420px circle at var(--kx, 50%) var(--ky, 0%), color-mix(in oklab, var(--w-accent) 22%, transparent), transparent 60%);
  transition: opacity .5s;
}
.kaart:hover::before { opacity: 1; }
.kaart:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--w-accent) 40%, var(--w-lijn)); }
.kaart .nr { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--w-accent); }
.kaart h3 { font-size: clamp(26px, 2.6vw, 36px); }
.kaart p { color: var(--w-zacht); text-wrap: pretty; }

/* --------------------------------------------------------------- de apps */

.app { position: relative; padding: clamp(90px, 13vw, 170px) 0; overflow: clip; }
.app .wrap { display: grid; gap: 44px; grid-template-columns: 1fr; }
.app-tekst { display: grid; gap: 22px; align-content: start; min-width: 0; }
.app-tekst h2 { hyphens: manual; }
.app-kop { display: flex; align-items: center; gap: 16px; }
.app-icoon { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .5), 0 0 0 1px var(--w-lijn); }
.app-naam { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--w-accent); display: grid; gap: 4px; }
.app-naam b { font-family: var(--display); font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--w-inkt); }
.app h2 { font-size: clamp(36px, 4.2vw, 64px); line-height: .96; }
.app h2 em { font-style: normal; color: var(--w-accent); }
.app-tekst > p { font-size: clamp(17px, 1.4vw, 19px); color: var(--w-zacht); max-width: 48ch; text-wrap: pretty; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--w-lijn); background: var(--w-kaart); }
.app-feiten { display: grid; gap: 12px; margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--w-lijn); }
.app-feiten li { list-style: none; display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--w-zacht); text-wrap: pretty; }
.app-feiten ul { margin: 0; padding: 0; display: grid; gap: 12px; }
.app-feiten li::before { content: "→"; color: var(--w-accent); font-family: var(--mono); }
.app .knop { --k: var(--w-inkt); border-color: var(--w-lijn); background: var(--w-kaart); backdrop-filter: none; }
.app .knop-vol { background: var(--w-inkt); color: var(--w-bg); }
.app .knop-vol:hover { background: var(--w-accent); color: var(--w-bg); }

/* De galerij: tall posters, op mobiel horizontaal te scrollen, op desktop
   schuift het spoor mee met de pagina (scroll-driven animation). */
.galerij { position: relative; min-width: 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
/* Op mobiel staan de posters dicht op elkaar en steekt de volgende ruim uit, zodat je
   ziet dat je kunt swipen. De snap pakt steeds de volgende poster bij de linkerkantlijn. */
.spoor {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-right: var(--gutter);
}
.spoor::-webkit-scrollbar { display: none; }
.swipehint {
  display: flex; align-items: center; gap: 10px; margin-top: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--w-zacht);
}
.swipehint::after { content: ""; width: 34px; height: 1px; background: currentColor; animation: swipe 1.6s ease-in-out infinite; transform-origin: left; }
@keyframes swipe { 0% { transform: scaleX(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.poster {
  flex: 0 0 min(58vw, 300px); margin: 0; aspect-ratio: 920 / 2000; border-radius: 22px; overflow: hidden;
  scroll-snap-align: start; position: relative; background: var(--w-kaart);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px var(--w-lijn);
  transform-style: preserve-3d; will-change: transform;
  transition: transform .6s var(--ease-uit), box-shadow .6s;
}
.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }
.poster:hover { box-shadow: 0 40px 100px -30px color-mix(in oklab, var(--w-accent) 60%, transparent), 0 0 0 1px color-mix(in oklab, var(--w-accent) 50%, transparent); }

/* Decoratie per wereld */
.app .deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.app .wrap { position: relative; z-index: 1; }
.ring { position: absolute; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--w-accent) 35%, transparent); animation: draai 60s linear infinite; }
.ring::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--w-accent); box-shadow: 0 0 18px var(--w-accent); }
.ring.r2 { animation-duration: 90s; animation-direction: reverse; border-color: color-mix(in oklab, var(--cyaan) 35%, transparent); }
.ring.r2::before { background: var(--cyaan); box-shadow: 0 0 18px var(--cyaan); }
.ring.r3 { animation-duration: 130s; border-color: color-mix(in oklab, var(--lime) 30%, transparent); }
.ring.r3::before { background: var(--lime); box-shadow: 0 0 18px var(--lime); }
@keyframes draai { to { transform: rotate(360deg); } }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.raster-lijnen {
  position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(var(--w-lijn) 1px, transparent 1px), linear-gradient(90deg, var(--w-lijn) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent); -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent);
}

/* ---------------------------------------------------------------- aanpak */

.aanpak { background: var(--basis); color: var(--inkt); }
.stappen { position: relative; display: grid; gap: 0; counter-reset: stap; }
.stappen::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 1px; background: var(--lijn); }
.stappen .lijn {
  position: absolute; left: 11px; top: 0; width: 1px; height: 100%; transform-origin: top;
  background: linear-gradient(var(--roze), var(--oranje), var(--cyaan)); transform: scaleY(var(--vorder, 0));
}
.stap { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 22px; padding: 26px 0 34px; }
.stap::before {
  counter-increment: stap; content: ""; width: 23px; height: 23px; border-radius: 50%;
  background: var(--basis); border: 1px solid var(--lijn); margin-top: 6px;
  box-shadow: 0 0 0 0 var(--roze); transition: box-shadow .6s, border-color .6s, background .6s;
}
.stap.aan::before { border-color: var(--roze); background: var(--roze); box-shadow: 0 0 24px var(--roze); }
.stap > div { display: grid; gap: 10px; }
.stap .nr { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--inkt-dim); }
.stap h3 { font-size: clamp(26px, 3vw, 40px); }
.stap p { color: var(--inkt-zacht); max-width: 52ch; text-wrap: pretty; }

/* ------------------------------------------------------------------ slot */

.slot { position: relative; padding: clamp(40px, 6vw, 90px) 0 60px; background: var(--basis); color: var(--inkt); overflow: hidden; text-align: center; }
.slot .reus {
  font-family: var(--display); font-weight: 800; font-size: clamp(96px, 26vw, 440px); line-height: .8; letter-spacing: -.06em;
  max-width: 100%;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .28);
  position: relative; display: inline-block;
}
/* Het vulmasker krijgt boven en onder ruimte: met regelhoogte .8 steken de letters
   buiten hun vak, en een masker op het vak zelf knipt de bovenkant van de Y af. */
.slot .reus::before {
  content: attr(data-tekst); position: absolute; inset: 0; -webkit-text-stroke: 0;
  background: linear-gradient(92deg, var(--roze), var(--oranje), var(--abrikoos), var(--cyaan), var(--roze));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  clip-path: inset(-40% 100% -40% 0);
  /* Eerst vult het woord zich van links naar rechts, daarna blijven de kleuren erdoorheen stromen. */
  animation: vul 2.4s var(--ease-uit) .3s forwards, stroom 7s linear infinite;
}
@keyframes vul { to { clip-path: inset(-40% 0 -40% 0); } }
@keyframes stroom { to { background-position: 300% 0; } }
.slot-teken { width: 72px; height: 72px; margin: 0 auto 28px; filter: drop-shadow(0 0 24px rgba(255, 122, 26, .35)); }
.slot p { margin-top: 28px; font-size: clamp(18px, 2vw, 24px); color: var(--inkt-zacht); }
.slot p b { color: var(--inkt); font-weight: 600; }
.voet { margin-top: 90px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-dim); border-top: 1px solid var(--lijn); padding-top: 24px; }

/* ---------------------------------------------------------------- reveal */

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-uit), transform 1s var(--ease-uit); transition-delay: var(--vertraging, 0s); }
[data-reveal].in { opacity: 1; transform: none; }
.woord { display: inline-block; overflow: hidden; vertical-align: top; }
.woord > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease-uit); transition-delay: calc(var(--i) * 70ms + .15s); }
.in .woord > span, .hero.in .woord > span { transform: none; }

/* -------------------------------------------------------- vanaf tablet */

@media (min-width: 720px) {
  .cijfers .wrap { grid-template-columns: repeat(4, 1fr); }
  .cijfer { padding: 40px 24px; border-right: 1px solid var(--lijn); }
  .cijfer:first-child { padding-left: 0; }
  .cijfer:last-child { border-right: 0; }
  .cijfer:nth-child(n+3) { border-top: 0; }
  .cijfer:nth-child(2n) { padding-left: 24px; border-right: 1px solid var(--lijn); }
  .manifest { grid-template-columns: repeat(3, 1fr); }
  .hero-onder { grid-template-columns: 1.3fr 1fr; }
}
@media (min-width: 1200px) { .scrollhint { display: flex; } }

/* ------------------------------------------------------- vanaf desktop */

@media (min-width: 980px) {
  /* De sectie is hoger dan het scherm en tekst én galerij plakken vast. Zo blijft alles
     in beeld terwijl de posters in hun geheel voorbijschuiven, en gaat de pagina pas
     verder als de laatste poster aan de rechterrand staat. */
  .app { view-timeline-name: --app; view-timeline-axis: block; }
  .app .wrap { grid-template-columns: minmax(380px, 1fr) 1.3fr; gap: 56px; align-items: start; min-height: 175vh; }
  .app-tekst, .galerij { position: sticky; top: 96px; }
  /* De galerij is een container: het spoor weet via cqw hoe breed zijn kolom is en
     schuift precies zo ver dat de laatste poster aan de rechterrand eindigt. Links wordt
     geknipt zodat de posters nooit over de tekstkolom heen lopen. */
  .galerij { margin-inline: 0; padding-inline: 0; container-type: inline-size; clip-path: inset(-140px -100vw -140px 0); }
  .spoor { overflow: visible; scroll-snap-type: none; padding: 32px 0 48px; gap: 24px; }
  /* De poster past in de hoogte van het scherm, met ruimte voor kop en stagger. */
  .poster { flex-basis: clamp(210px, calc((100vh - 270px) / 2.17), 300px); border-radius: 26px; }
  .swipehint { display: none; }
  /* Het spoor volgt de sectie via het script (zie startSpoor in site.js): dat meet de
     werkelijke sectie en doet het in elke browser hetzelfde. */
  .spoor { will-change: transform; }
  .poster:nth-child(2n) { translate: 0 28px; }
  .poster:nth-child(3n) { translate: 0 -16px; }
}

/* ------------------------------------------------------- minder beweging */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .woord > span { transform: none; }
  .korrel { display: none; }
  .spoor { animation: none; transform: none; }
}