/* =========================================================
   Animaties voor alle pagina's
   1. Pagina-overgang: oude pagina vervaagt kort, nieuwe vloeit in.
   2. Scroll-reveal: blokken komen één keer zacht in beeld.
   Bij "minder beweging" (prefers-reduced-motion) staat alles uit.
   ========================================================= */

/* 1. Pagina-overgang (moderne browsers: View Transitions tussen pagina's) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: rvPageOut .18s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: rvPageIn .38s cubic-bezier(0, 0, .2, 1) .05s both; }
@keyframes rvPageOut { to { opacity: 0; } }
@keyframes rvPageIn { from { opacity: 0; } }

/* Andere browsers: zachte fade-in bij laden, fade-out bij wegklikken */
@supports not (view-transition-name: none) {
  body { animation: rvPageIn .38s cubic-bezier(0, 0, .2, 1) both; }
}
html.rv-leaving body { opacity: 0; transition: opacity .18s cubic-bezier(.4, 0, 1, 1); }

/* 2. Scroll-reveal (klassen worden door animaties.js gezet) */
[data-rv] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--rv-delay, 0ms);
}
[data-rv].rv-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  body { animation: none !important; }
  html.rv-leaving body { opacity: 1 !important; }
  [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media print {
  [data-rv] { opacity: 1 !important; transform: none !important; }
}