/* bio-grond — motion (fase 2, blok C)
   Kers, niet taart: begintoestanden bestaan alléén onder html.reveal, dus
   zonder JavaScript is alles direct zichtbaar. Duur/afstand komen uit de
   motion-tokens; reduced-motion heeft een dubbel slot (tokens op 0 in
   tokens.css én de overrides onderaan dit bestand én motion.js doet niets).

   WAAROM html.reveal EN NIET html.js
     Deze regels verbergen content tot JavaScript hem onthult. Ze hingen aan
     'js', de klasse die zegt "JavaScript staat aan" — maar dat is de verkeerde
     voorwaarde. JavaScript kan aanstaan terwijl motion.js niet draait, en dan
     bleef de pagina leeg: gemeten 100% van de content op /sdg en
     /kosten-en-baten. 'reveal' wordt gezet door dezelfde inline flip, maar gaat
     er automatisch weer af als motion.js zich niet binnen 1,2s meldt
     (SecurityHeaders::NOJS_FLIP). Verbergen mag alleen zolang er iets is dat
     kan onthullen. */

html.reveal [data-reveal],
html.reveal [data-reveal-group] > * {
  opacity: 0;
  translate: 0 var(--reveal-afstand);
  transition:
    opacity var(--dur-reveal) var(--ease-out-soft),
    translate var(--dur-reveal) var(--ease-out-soft);
}
html.reveal [data-reveal].is-visible,
html.reveal [data-reveal-group].is-visible > * {
  opacity: 1;
  translate: 0 0;
}

/* Stagger: kinderen van een groep na elkaar (--stagger-i zet motion.js) */
html.reveal [data-reveal-group] > * {
  transition-delay: calc(var(--stagger-i, 0) * 80ms);
}

/* SVG line-drawing: .draw-paden (pathLength=1) tekenen zich bij reveal */
html.reveal [data-draw] .draw path,
html.reveal [data-draw] path.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset calc(var(--dur-reveal) * 1.5) var(--ease-out-soft);
  transition-delay: calc(var(--stagger-i, 0) * 80ms + 150ms);
}
html.reveal [data-draw].is-visible .draw path,
html.reveal [data-draw].is-visible path.draw {
  stroke-dashoffset: 0;
}

/* Maaiveldlijn: dash-toestand alleen met JS (lijn.js stuurt de offset) */
html.reveal .landing-lijn path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 120ms linear;
}

/* Reduced motion: geen begintoestand, geen transitie — alles staat er */
@media (prefers-reduced-motion: reduce) {
  html.reveal [data-reveal],
  html.reveal [data-reveal-group] > *,
  html.reveal [data-draw] .draw path,
  html.reveal [data-draw] path.draw {
    opacity: 1;
    translate: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  html.reveal .landing-lijn path {
    stroke-dashoffset: 0;
    transition: none;
  }
}