/* Sanor — motion layer (nebra.studio). Hoort bij assets/sanor-motion.js.
   Stylet uitsluitend de data-sm-* markers die het script zet, plus een paar
   toestanden (focus, FAQ-antwoord, navigatie) die geen JS nodig hebben.
   Let op: inline styles van de dc-runtime staan met spatie na de dubbele punt. */

[data-sm-hidden] { will-change: opacity, translate; }

/* Lenis (gladde scroll): de pagina's eigen scroll-behavior:smooth mag niet stapelen */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
[data-sm-group] > * { backface-visibility: hidden; }

/* Knoppen: lichte lift bij hover, druk-feedback bij klik */
[data-sm-btn] {
  transition: translate .35s cubic-bezier(.22,1,.36,1), scale .18s cubic-bezier(.22,1,.36,1),
              background .25s ease, color .25s ease, border .25s ease, box-shadow .35s ease !important;
}
[data-sm-btn]:hover  { translate: 0 -1px; }
[data-sm-btn]:active { scale: .97; translate: 0 0; }

/* Pijlen in tekstlinks en kaarten schuiven mee */
[data-sm-arrow] { display: inline-block; transition: translate .4s cubic-bezier(.22,1,.36,1); }
a:hover [data-sm-arrow] { translate: 4px 0; }

/* Kaarten zonder eigen hover-lift */
[data-sm-card] { transition: translate .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), border-color .25s ease, background .25s ease, color .25s ease !important; }
[data-sm-card]:hover { translate: 0 -3px; box-shadow: 0 22px 44px -26px rgba(14,36,51,.38); }

/* Desktopnavigatie: onderstreping loopt van links naar rechts vol */
.sanor-desktop-nav > a { position: relative; }
.sanor-desktop-nav > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.sanor-desktop-nav > a:hover::after { transform: scaleX(1); }

/* FAQ: antwoord fadet mee met het openklappen; vraag kleurt bij hover */
[style*="max-height: 0px"] > p { opacity: 0; translate: 0 -6px; transition: opacity .25s ease, translate .25s ease; }
[style*="max-height: 260px"] > p { opacity: 1; translate: 0 0; transition: opacity .45s ease .12s, translate .45s cubic-bezier(.22,1,.36,1) .12s; }
[style*="cursor: pointer"][style*="padding: 26px 4px"] > span:nth-child(2) { transition: color .25s ease; }
[style*="cursor: pointer"][style*="padding: 26px 4px"]:hover > span:nth-child(2) { color: #0076BE; }

/* "Zo werkt het": punten poppen op zodra de lijn ze bereikt */
[data-sm-line] { will-change: transform; }
[data-sm-dot]  { transition: scale .45s cubic-bezier(.22,1,.36,1); }

/* Formulier: duidelijke focus zonder harde browser-outline */
input:focus-visible, textarea:focus-visible {
  outline: none !important;
  border-color: #0076BE !important;
  box-shadow: 0 0 0 3px rgba(0,118,190,.14) !important;
}
input, textarea { transition: border-color .2s ease, box-shadow .25s ease; }
a:focus-visible, [data-sm-btn]:focus-visible { outline: 2px solid #0076BE; outline-offset: 3px; border-radius: 4px; }

/* Header leeft mee met de scrollrichting; toetsenbordfocus haalt hem altijd terug */
header { transition: translate .5s cubic-bezier(.22,1,.36,1), background .3s ease, box-shadow .3s ease, border-color .3s ease; }
html.sm-nav-hide header:not(:focus-within) { translate: 0 -105%; }

/* Scroll-voortgangslijn */
.sm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 61; pointer-events: none;
  background: #0076BE; transform: scaleX(0); transform-origin: left center; opacity: 0;
  transition: opacity .3s ease;
}

/* Pagina-overgang */
html.sm-leaving { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  header { transition: none; }
  html.sm-nav-hide header { translate: 0 0; }
  [data-sm-btn], [data-sm-arrow], [data-sm-card], [data-sm-dot], .sanor-desktop-nav > a::after,
  [style*="max-height: 0px"] > p, [style*="max-height: 260px"] > p { transition: none !important; }
  [data-sm-btn]:hover, [data-sm-card]:hover, a:hover [data-sm-arrow] { translate: 0 0; }
  [style*="max-height: 0px"] > p { opacity: 1; translate: 0 0; }
}