/* Basis: reset, lopende tekst, scroll-entrees en minder beweging */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: 400 var(--text-basis) / var(--regelafstand-tekst) var(--font-body);
  font-kerning: normal;
  border-top: var(--balk-dikte) solid var(--color-accent);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { max-width: var(--regellengte); text-wrap: pretty; hyphens: auto; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; hyphens: none; }
h2 {
  font-size: var(--text-kop);
  font-weight: 600;
  line-height: var(--regelafstand-kop);
  letter-spacing: var(--letterafstand-kop);
  max-width: 18ch;
}
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.intro { font-size: var(--text-intro); line-height: 1.35; max-width: 40ch; }
/* Bijschrift: klein en rustig onder de foto */
figcaption { font-size: var(--text-klein); font-weight: 500; line-height: 1.4; margin-top: 0.6rem; }
.klein { font-size: var(--text-klein); line-height: 1.45; }

/* Markering voor wat de klant nog moet bevestigen; gaat er vóór livegang uit */
.check { background: var(--color-check); color: var(--color-text-inverse); padding: 0 0.25em; font-size: 1em; font-weight: 500; letter-spacing: 0; }

:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 3px; }
::selection { background: var(--color-accent); color: var(--color-text-inverse); }

/* Scroll-entrees: alleen verborgen als JS draait én er geen "minder beweging" is ingesteld */
@media (prefers-reduced-motion: no-preference) {
  .js [data-animeer] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity calc(var(--duur-onthul) * 0.8) var(--curve-uit),
      transform var(--duur-onthul) var(--curve-expo);
    transition-delay: calc(var(--volgorde, 0) * var(--vertraging-item));
  }
  /* Een foto blijft altijd zichtbaar (ook als de entree niet afgaat); alleen het beeld zakt naar zijn plek */
  .js [data-animeer="beeld"] { opacity: 1; transform: none; overflow: clip; }
  .js [data-animeer="beeld"] img {
    transform: scale(1.08);
    transition: transform calc(var(--duur-open) + 300ms) var(--curve-zacht);
  }
  .js [data-animeer].in-beeld { opacity: 1; transform: none; }
  .js [data-animeer="beeld"].in-beeld img { transform: none; }
}

/* Minder beweging: alles uit. !important is hier de enige uitzondering, de *-selector moet winnen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js [data-animeer], .js [data-animeer] img { opacity: 1; transform: none; clip-path: none; }
}