/* ==========================================================================
   NorthByte · basis.css  (optioneel)
   Een kleine, neutrale basis die een conceptsite MAG gebruiken, niet moet.
   Geen kleuren, geen lettertypen, geen opmaak van de zaak zelf: dat doet
   elke conceptsite in haar eigen stylesheet.

   Bevat: reset, beelden, formulieren, focus, schermlezer-hulpklasse,
   skip-link, en de verschijn-bij-scrollen-hulp voor in-beeld.js.
   ========================================================================== */

/* Alles in :where() zodat de specificiteit 0 is: je eigen CSS wint altijd. */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--vb-scroll-top, 80px); }
:where(body) { margin: 0; min-height: 100svh; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset) { margin: 0; }
:where(ul[class], ol[class]) { padding: 0; list-style: none; }
:where(fieldset) { padding: 0; border: 0; min-width: 0; }
:where(legend) { padding: 0; }
:where(img, svg, video, picture) { display: block; max-width: 100%; }
:where(img) { height: auto; }
:where(a) { color: inherit; }
:where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(button) { cursor: pointer; }
:where(table) { border-collapse: collapse; }
[hidden] { display: none !important; }
:where(:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; }

/* Alleen voor schermlezers */
.vb-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;
}

/* Skip-link: zichtbaar bij focus */
.vb-skip {
  position: fixed; top: 8px; left: 8px; z-index: 9100;
  padding: 10px 16px; border-radius: 8px; background: #0a0a0a; color: #fff; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s;
}
.vb-skip:focus { transform: none; }

/* Verschijnen bij scrollen (in-beeld.js). Zonder JavaScript of met
   prefers-reduced-motion staat alles er gewoon. Vertraging per element met
   style="--vb-d: 120ms". */
@media (prefers-reduced-motion: no-preference) {
  .vb-js [data-in] {
    opacity: 0; transform: translate3d(0, 28px, 0);
    transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--vb-d, 0ms);
  }
  .vb-js [data-in="links"] { transform: translate3d(-28px, 0, 0); }
  .vb-js [data-in="rechts"] { transform: translate3d(28px, 0, 0); }
  .vb-js [data-in="schaal"] { transform: scale(.96); }
  /* Op smalle schermen alleen verticaal: zijwaarts zou horizontaal scrollen geven */
  @media (max-width: 759px) {
    .vb-js [data-in="links"], .vb-js [data-in="rechts"] { transform: translate3d(0, 28px, 0); }
  }
  .vb-js [data-in].is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}