/* Beweging: de gedeelde motionlaag (hoort bij beweging.js). Alles hangt aan
   .bw op <html>, dus zonder javascript staat de pagina er gewoon helemaal. */
:root {
  --bw-ease: cubic-bezier(.2, .75, .2, 1);
  --bw-veer: cubic-bezier(.34, 1.56, .64, 1);
}

/* Blokken die binnenkomen bij het scrollen */
.bw [data-rv] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--bw-ease), transform 1.05s var(--bw-ease), filter .9s var(--bw-ease);
  transition-delay: var(--d, 0s);
}
.bw [data-rv="links"] { transform: translateX(-56px); }
.bw [data-rv="rechts"] { transform: translateX(56px); }
.bw [data-rv="zoom"] { transform: scale(.94); filter: saturate(.4) brightness(.9); }
.bw [data-rv="kantel"] { transform: translateY(46px) rotate(1.6deg); }
.bw [data-rv].in { opacity: 1; transform: none; filter: none; }

/* Koppen die per woord binnenkomen */
.bw .bw-kop .bw-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotate(3deg);
  filter: blur(8px);
  transition: opacity .8s var(--bw-ease), transform .95s var(--bw-veer), filter .8s var(--bw-ease);
  transition-delay: var(--d, 0s);
}
.bw .bw-kop.in .bw-w { opacity: 1; transform: none; filter: none; }

/* Veer-hovers: kaarten en knoppen die een tikje terugveren. Via de losse
   translate-eigenschap, zodat het niet botst met de transform van de reveal. */
@media (hover: hover) {
  .bw .bw-veer { transition: opacity .9s var(--bw-ease), transform 1.05s var(--bw-ease), filter .9s var(--bw-ease), translate .5s var(--bw-veer), box-shadow .5s var(--bw-ease); transition-delay: var(--d, 0s), var(--d, 0s), var(--d, 0s), 0s, 0s; }
  .bw .bw-veer:hover { translate: 0 -6px; }
}

/* Beperkte beweging: korter en kleiner, maar nooit op nul (dat flikkert). */
@media (prefers-reduced-motion: reduce) {
  .bw [data-rv] { transform: translateY(14px); }
  .bw [data-rv="links"], .bw [data-rv="rechts"] { transform: translateY(14px); }
  .bw .bw-kop .bw-w { transform: translateY(.2em); filter: none; }
}