/* Beweging voor de hele site: een vocabulaire voor hover, een reveal bij scrollen. Eenmaal geladen door elke pagina (build.py),
   getagd door beweging.js. Waarden: website-kit RULES 5.3, 5.8, 5.9, 5.10 en rules/motion.md.
   Alles in :where(): specificiteit 0, dus een eigen regel van een sectie wint altijd en niets wordt dubbel gedaan. */

:root { --bw-ease: cubic-bezier(.22, .61, .36, 1); }

/* ---------- scroll-reveal (RULES 5.10) ----------
   De verborgen toestand bestaat alleen als beweging.js de klasse .bw zet (dus nooit zonder JS, nooit bij verminderde beweging).
   Een blok stijgt 22 px en komt in 0,7 s binnen; kinderen van een groep 16 px in 0,55 s, 60 ms na elkaar (max 300 ms).
   De beweging is een CSS-animatie op opacity en translate: er blijft niets achter op het element, dus hover (transform) en de
   eigen transities van een sectie blijven ongemoeid, en er komt geen vertraging op de hover. */
.js .bw:not(.bw-in) { opacity: 0; translate: 0 22px; }
.js .bw--k:not(.bw-in) { translate: 0 16px; }
.bw-in { animation: bw-blok .7s var(--bw-ease) var(--bw-d, 0s) backwards; }
.bw--k.bw-in { animation-name: bw-kind; animation-duration: .55s; }
@keyframes bw-blok { from { opacity: 0; translate: 0 22px; } }
@keyframes bw-kind { from { opacity: 0; translate: 0 16px; } }
/* veiligheid: geprint of verminderde beweging: alles staat er gewoon, zonder beweging (beweging.js laat bij zacht bewegen de klassen weg) */
@media print { .js .bw:not(.bw-in) { opacity: 1 !important; translate: none !important; } .bw-in { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .js .bw:not(.bw-in) { opacity: 1 !important; translate: none !important; } .bw-in { animation: none !important; } }

/* ---------- hover (RULES 5.3, 5.8) ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* knop: 2 px omhoog, kleur 0,2 s; terug bij :active */
  :where(.mv-knop) { transition: transform .25s var(--bw-ease), background-color .2s var(--bw-ease), border-color .2s var(--bw-ease), color .2s var(--bw-ease), box-shadow .2s var(--bw-ease); }
  :where(.mv-knop:is(:hover, :focus-visible)) { transform: translateY(-2px); }
  :where(.mv-knop:active) { transform: none; }

  /* kaart: 4 px omhoog met een zachte schaduw */
  :where(.mv-kaart) { transition: transform .3s var(--bw-ease), box-shadow .3s var(--bw-ease), background-color .25s var(--bw-ease), border-color .25s var(--bw-ease); }
  :where(.mv-kaart:is(:hover, :focus-within)) { transform: translateY(-4px); box-shadow: 0 14px 28px -10px rgb(0 0 0 / .5); }

  /* tab of chip die niet gekozen is: 2 px omhoog */
  :where(.mv-chip) { transition: transform .25s var(--bw-ease), background-color .2s var(--bw-ease), border-color .2s var(--bw-ease), color .2s var(--bw-ease); }
  :where(.mv-chip:not([aria-selected="true"], .is-actief, .is-active):is(:hover, :focus-visible)) { transform: translateY(-2px); }

  /* foto in een afgesneden lijst: zoom 1,04 binnen de lijst, ook als de kaart eromheen de hover krijgt */
  :where(.mv-foto img) { transition: scale .6s var(--bw-ease); }
  :where(.mv-foto:is(:hover, :focus-within) img, .mv-kaart:is(:hover, :focus-within) .mv-foto img) { scale: 1.04; }

  /* foto met uitsnede: een eenheid, foto en uitsnede bewegen samen met de lijst (2.14), nooit de uitsnede alleen */
  :where(.mv-eenheid) { transition: transform .3s var(--bw-ease); }
  :where(.mv-eenheid:is(:hover, :focus-within)) { transform: translateY(-4px); }

  /* gewone tekstlink: 0,2 s van kleur (iets lichter), geen streep (4.14) */
  :where(main a:not([class])) { transition: opacity .2s var(--bw-ease); }
  :where(main a:not([class]):is(:hover, :focus-visible)) { opacity: .75; }

  /* vraag in een uitklapper */
  :where(main summary) { transition: background-color .2s var(--bw-ease); }
  :where(main summary:is(:hover, :focus-visible)) { background-color: rgb(128 128 128 / .1); }
}

/* ---------- hover voor de secties die geen eigen hover hadden (gebruiker 2026-10-30: "add more hover effects to the sections")
   Een laag voor de blokken die beweging.js niet als kaart tagt (li, div, label met een eigen klassenaam). Bewogen wordt met
   de losse eigenschap translate (de sectie-eigen transform blijft vrij), kleur en rand via background-color, border-color en
   box-shadow: geen verschuiving van de lay-out, randdikte blijft --db-rand. Een uitsnede in zo'n blok beweegt als kind mee met
   het blok (2.14); er komt nergens overflow:hidden bij. Hover en focus gelijk; geen streep (4.14). ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* kaart met vlak en rand: 4 px omhoog, schaduw, roze rand (alleen kleur) */
  :is(.db-vd13__k, .db-vdoc14__stap, .db-vdoc14__lijstkaart, .db-wg6__loc, .db-wg6__kaartje, .db-hp12__gchip) {
    transition: translate .3s var(--bw-ease), box-shadow .3s var(--bw-ease), border-color .25s var(--bw-ease), background-color .25s var(--bw-ease);
  }
  :is(.db-vd13__k, .db-vdoc14__stap, .db-wg6__loc, .db-wg6__kaartje):is(:hover, :focus-within) { translate: 0 -4px; }
  :is(.db-vd13__k, .db-vdoc14__stap, .db-wg6__loc):is(:hover, :focus-within) { box-shadow: 0 14px 28px -10px rgb(0 0 0 / .5); }
  :is(.db-vd13__k, .db-vdoc14__stap, .db-vdoc14__lijstkaart, .db-wg6__loc):is(:hover, :focus-within) { border-color: var(--db-roze, #FF00FF); }
  :is(.db-vdoc14__lijstkaart, .db-hp12__gchip):is(:hover, :focus-within) { translate: 0 -2px; } /* eigen schaduw of ring blijft staan */

  /* blok zonder eigen vlak (stap, paneel, vermelding): 4 px omhoog met alles erin, zonder schaduw */
  :is(.db-vgb9__s1, .db-vgb9__s2, .db-vgb9__s3, .db-pg13__paneel, .db-hh17__gchip) { transition: translate .3s var(--bw-ease); }
  :is(.db-vgb9__s1, .db-vgb9__s2, .db-vgb9__s3, .db-pg13__paneel):is(:hover, :focus-within) { translate: 0 -4px; }
  .db-hh17__gchip:is(:hover, :focus-within) { translate: 0 -2px; }

  /* rij in een lijst: 4 px naar rechts, lichte tint, rand roze waar er een rand is */
  :is(.db-cr7__risico, .db-cr7__rij, .db-po2__rij, .db-vdoc14__rij) { transition: translate .25s var(--bw-ease), background-color .2s var(--bw-ease), border-color .2s var(--bw-ease); }
  :is(.db-cr7__risico, .db-cr7__rij, .db-po2__rij, .db-vdoc14__rij):is(:hover, :focus-within) { translate: 4px 0; background-color: rgb(128 128 128 / .12); }
  :is(.db-cr7__risico, .db-cr7__rij):is(:hover, :focus-within) { border-color: var(--db-roze, #FF00FF); }

  /* tabelrij: tint over de cellen heen, zonder de cellen te verschuiven */
  .db-vt16__rij:not(.db-vt16__rij--kop):hover > :is(th, td) { background-image: linear-gradient(rgb(128 128 128 / .14), rgb(128 128 128 / .14)); }

  /* pijl in een kaart of knop: 3 px naar rechts (de pijl van diensten-grid beweegt al zelf) */
  :is(.mv-kaart, .mv-knop):is(:hover, :focus-within) [class*="__pijl"]:not(.db-dg9__pijl) { translate: 3px 0; }
  :is(.mv-kaart, .mv-knop) [class*="__pijl"]:not(.db-dg9__pijl) { transition: translate .2s var(--bw-ease); }

  /* formulierveld: roze ring van 1 px bij hover (niet als het veld focus heeft; box-shadow, dus geen verspringing) */
  main :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="submit"]), select, textarea):not(:focus):hover { box-shadow: 0 0 0 1px var(--db-roze, #FF00FF); }
  main :is(input, select, textarea) { transition: box-shadow .2s var(--bw-ease), border-color .2s var(--bw-ease); }
}

/* ---------- rustige lus (RULES 5.9): hoogstens een per sectie, alleen op een eigen icoon, uit bij verminderde beweging ---------- */
@keyframes bw-zweef { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: -5deg; } }