/* Handwerk · kern.css: de gedeelde basis onder elke basis (reset, toegankelijkheid, motion-bouwstenen).
   Een basis zet zijn eigen tokens in zijn stijl.css (:root) en gebruikt deze klassen/attributen; de kern kent geen merkkleuren.
   Tokens die de kern leest (met terugval): --hw-focus, --hw-ease, --hw-marquee-duur, --hw-zweef-duur. */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; } /* smooth alleen via JS (screenshot-lus, lessen fabriek) */
body { margin: 0; min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"], .hw-lijst { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
[hidden] { display: none !important; }
:root { --hw-ease: cubic-bezier(.22, 1, .36, 1); --hw-ease-in-out: cubic-bezier(.65, 0, .35, 1); }

/* ---------- toegankelijkheid ---------- */
:focus-visible { outline: 2px solid var(--hw-focus, currentColor); outline-offset: 3px; border-radius: 4px; }
.hw-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hw-skip { position: fixed; left: 16px; top: 12px; z-index: 1000; padding: 12px 16px; border-radius: 8px; background: #111; color: #fff; transform: translateY(-160%); transition: transform .2s var(--hw-ease); }
.hw-skip:focus-visible { transform: none; }

/* ---------- marquee: <div class="hw-marquee" data-richting="terug?"><div class="hw-marquee__spoor"> items </div></div> ---------- */
.hw-marquee { overflow: hidden; width: 100%; contain: paint; }
.hw-marquee__spoor { display: flex; width: max-content; will-change: transform; }
.hw-marquee__set { display: flex; flex-shrink: 0; align-items: center; }
.hw-js .hw-marquee__spoor { animation: hw-marquee var(--hw-marquee-duur, 32s) linear infinite; }
.hw-marquee[data-richting="terug"] .hw-marquee__spoor { animation-direction: reverse; }
.hw-marquee:hover .hw-marquee__spoor, .hw-marquee:focus-within .hw-marquee__spoor { animation-play-state: paused; }
@keyframes hw-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- slider: <div class="hw-slider"><div class="hw-slider__baan"> kinderen </div> + [data-hw-vorige] [data-hw-volgende] .hw-slider__dots .hw-slider__voortgang ---------- */
.hw-slider { position: relative; }
.hw-slider__baan { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hw-slider__baan::-webkit-scrollbar { display: none; }
.hw-slider__baan > * { flex: 0 0 auto; scroll-snap-align: start; }
.hw-slider[data-uitlijning="midden"] .hw-slider__baan > * { scroll-snap-align: center; }
.hw-slider__baan.is-slepen { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.hw-slider__baan.is-slepen * { pointer-events: none; }
.hw-slider__dots { display: flex; gap: 8px; justify-content: center; }
.hw-slider__dot { width: 8px; height: 8px; border-radius: 99px; background: currentColor; opacity: .3; transition: opacity .2s var(--hw-ease), width .3s var(--hw-ease); position: relative; }
.hw-slider__dot::after { content: ''; position: absolute; inset: -18px; } /* raakvlak 44 px */
.hw-slider__dot[aria-current="true"] { opacity: 1; width: 22px; }
.hw-slider__voortgang { position: relative; height: 2px; background: color-mix(in srgb, currentColor 18%, transparent); overflow: hidden; }
.hw-slider__voortgang > span { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(var(--hw-voortgang, .2)); transition: transform .25s var(--hw-ease); }
[data-hw-vorige][disabled], [data-hw-volgende][disabled] { opacity: .35; cursor: default; }

/* ---------- tabs: [data-hw-tabs] > [role=tablist] > [role=tab] + [role=tabpanel] ---------- */
[data-hw-tabs] [role="tabpanel"] { animation: hw-in .35s var(--hw-ease) both; }
@keyframes hw-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- onthullen: [data-hw-onthul] (optioneel ="links|rechts|schaal|masker") + data-hw-vertraging="0.1" ---------- */
.hw-js:not(.hw-stil) [data-hw-onthul] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s var(--hw-ease), transform .9s var(--hw-ease); transition-delay: var(--hw-vertraging, 0s); }
.hw-js:not(.hw-stil) [data-hw-onthul="links"] { transform: translate3d(-36px, 0, 0); }
.hw-js:not(.hw-stil) [data-hw-onthul="rechts"] { transform: translate3d(36px, 0, 0); }
.hw-js:not(.hw-stil) [data-hw-onthul="schaal"] { transform: scale(.94); }
.hw-js:not(.hw-stil) [data-hw-onthul="masker"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--hw-ease); transition-delay: var(--hw-vertraging, 0s); }
.hw-js:not(.hw-stil) [data-hw-onthul].is-zichtbaar { opacity: 1; transform: none; }
.hw-js:not(.hw-stil) [data-hw-onthul="masker"].is-zichtbaar { clip-path: inset(0 0 -12% 0); }

/* ---------- zweven: [data-hw-zweef] (+ style="--hw-zweef-duur:7s; --hw-zweef-hoek:-8deg; --hw-zweef-vertraging:-2s") ---------- */
[data-hw-zweef] { --hw-zweef-hoek: 0deg; transform: rotate(var(--hw-zweef-hoek)); }
.hw-js:not(.hw-stil) [data-hw-zweef] { animation: hw-zweef var(--hw-zweef-duur, 6s) var(--hw-ease-in-out) var(--hw-zweef-vertraging, 0s) infinite alternate; }
@keyframes hw-zweef { from { transform: translate3d(0, -10px, 0) rotate(var(--hw-zweef-hoek)); } to { transform: translate3d(0, 12px, 0) rotate(calc(var(--hw-zweef-hoek) + 3deg)); } }
/* muis-parallax: ouder [data-hw-parallax], kind [data-hw-diepte="0.4"]: de kern zet --hw-px / --hw-py (px) op het kind */
[data-hw-diepte] { translate: var(--hw-px, 0px) var(--hw-py, 0px); transition: translate .6s var(--hw-ease); }

/* ---------- knop-micro-interactie (optioneel): .hw-druk krimpt bij indrukken ---------- */
.hw-druk { transition: transform .15s var(--hw-ease); }
.hw-druk:active { transform: scale(.97); }

/* ---------- beweging uit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hw-marquee__spoor { animation: none !important; }
  [data-hw-diepte] { translate: none !important; }
}
.hw-stil .hw-marquee__spoor { animation-duration: 120s; } /* screenshots (webdriver): marquee staat praktisch stil maar is gevuld */