/* ============================================================
   Beweging — de animatielaag van Stukadoor Geregeld.

   Uitgangspunten:
   - alleen transform en opacity, zodat alles op de GPU draait en
     er geen enkele layoutverschuiving (CLS) ontstaat;
   - niets boven de vouw wordt verborgen, dus de LCP blijft gelijk;
   - alles onder de vouw komt pas in beweging als het in beeld komt;
   - wie in zijn systeem "minder beweging" heeft staan, krijgt alleen
     nog een zachte vervaging en geen verplaatsing meer.

   De inline stijlen van de pagina's staan ín de body en winnen bij
   gelijke specificiteit. Waar we die overschrijven, zetten we er
   daarom een element voor (html/body) om zwaarder te wegen.
   ============================================================ */

:root {
  --bw-uit: cubic-bezier(0.23, 1, 0.32, 1);      /* sterke ease-out */
  --bw-inuit: cubic-bezier(0.77, 0, 0.175, 1);   /* voor verplaatsing */
}

/* ---------------------------------------------- secties die invaren */
[data-anim] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
[data-anim].bw-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--bw-uit), transform .55s var(--bw-uit);
}

/* kaarten in een raster komen na elkaar binnen */
[data-anim] .sg-posten > *,
[data-anim] .sg-kaarten > *,
[data-anim] .sg-stap > *,
[data-anim] .sg-ook > *,
[data-anim] .sg-cats > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
[data-anim].bw-in .sg-posten > *,
[data-anim].bw-in .sg-kaarten > *,
[data-anim].bw-in .sg-stap > *,
[data-anim].bw-in .sg-ook > *,
[data-anim].bw-in .sg-cats > * {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--bw-uit), transform .5s var(--bw-uit);
}
[data-anim].bw-in .sg-posten > *:nth-child(1),
[data-anim].bw-in .sg-kaarten > *:nth-child(1),
[data-anim].bw-in .sg-stap > *:nth-child(1),
[data-anim].bw-in .sg-ook > *:nth-child(1),
[data-anim].bw-in .sg-cats > *:nth-child(1) { transition-delay: .06s }
[data-anim].bw-in .sg-posten > *:nth-child(2),
[data-anim].bw-in .sg-kaarten > *:nth-child(2),
[data-anim].bw-in .sg-stap > *:nth-child(2),
[data-anim].bw-in .sg-ook > *:nth-child(2),
[data-anim].bw-in .sg-cats > *:nth-child(2) { transition-delay: .12s }
[data-anim].bw-in .sg-posten > *:nth-child(3),
[data-anim].bw-in .sg-kaarten > *:nth-child(3),
[data-anim].bw-in .sg-stap > *:nth-child(3),
[data-anim].bw-in .sg-ook > *:nth-child(3),
[data-anim].bw-in .sg-cats > *:nth-child(3) { transition-delay: .18s }
[data-anim].bw-in .sg-posten > *:nth-child(4),
[data-anim].bw-in .sg-kaarten > *:nth-child(4),
[data-anim].bw-in .sg-stap > *:nth-child(4),
[data-anim].bw-in .sg-ook > *:nth-child(4),
[data-anim].bw-in .sg-cats > *:nth-child(4) { transition-delay: .24s }
[data-anim].bw-in .sg-posten > *:nth-child(n+5),
[data-anim].bw-in .sg-kaarten > *:nth-child(n+5),
[data-anim].bw-in .sg-ook > *:nth-child(n+5),
[data-anim].bw-in .sg-cats > *:nth-child(n+5) { transition-delay: .3s }

/* tabelrijen komen regel voor regel binnen */
[data-anim] .sg-tabelwrap tbody tr { opacity: 0 }
[data-anim].bw-in .sg-tabelwrap tbody tr {
  opacity: 1;
  transition: opacity .4s var(--bw-uit);
}
[data-anim].bw-in tbody tr:nth-child(2) { transition-delay: .05s }
[data-anim].bw-in tbody tr:nth-child(3) { transition-delay: .10s }
[data-anim].bw-in tbody tr:nth-child(4) { transition-delay: .15s }
[data-anim].bw-in tbody tr:nth-child(5) { transition-delay: .20s }
[data-anim].bw-in tbody tr:nth-child(6) { transition-delay: .25s }
[data-anim].bw-in tbody tr:nth-child(n+7) { transition-delay: .3s }

/* foto's op de dienstpagina's schuiven open in plaats van te verschijnen */
[data-anim] .sg-d-foto img { clip-path: inset(0 0 100% 0); transform: scale(1.04) }
[data-anim].bw-in .sg-d-foto img {
  clip-path: inset(0 0 0 0);
  transform: none;
  transition: clip-path .8s var(--bw-inuit), transform .9s var(--bw-uit);
}

/* ---------------------------------------------- de koperen streep onder de kop */
html .sg-root .sg-streek::after {
  transform-origin: left center !important;
  animation: bw-streek .7s var(--bw-inuit) .25s both;
}
@keyframes bw-streek {
  from { transform: rotate(-1deg) scaleX(0) }
  to   { transform: rotate(-1deg) scaleX(1) }
}

/* ---------------------------------------------- knoppen die reageren op een druk */
html body .sg-root a.sg-btn:active,
html body .sg-root .sg-btn:active,
html body .sg-root a.sg-btn-licht:active,
html body .sg-hd-cta:active,
html body .sg-ft-cta:active,
html body .sgrk-uit a:active,
html body .sgrk-hulpknop:active {
  transform: scale(.97) !important;
  transition: transform .1s var(--bw-uit) !important;
}

/* zweefstanden alleen op apparaten met een echte muisaanwijzer */
@media (hover: hover) and (pointer: fine) {
  html body .sg-root .sg-ook a { transition: transform .22s var(--bw-uit), border-color .18s, color .18s, box-shadow .22s !important }
  html body .sg-root .sg-post { transition: transform .22s var(--bw-uit), box-shadow .22s !important }
  html body .sg-root .sg-post:hover { transform: translateY(-3px) !important }
  html body .sg-card { transition: transform .25s var(--bw-uit), box-shadow .25s !important }
  html body .sg-card:hover { transform: translateY(-4px) !important }
  html body .sg-card img { transition: transform .5s var(--bw-uit) !important }
  html body .sg-card:hover img { transform: scale(1.045) !important }
}

/* ---------------------------------------------- de kopbalk krijgt diepte bij het scrollen */
html body .sg-hd {
  transition: box-shadow .25s ease, background-color .25s ease !important;
}
html body .sg-hd.bw-vast {
  box-shadow: 0 6px 24px rgba(34, 34, 38, .10) !important;
  background: rgba(244, 237, 231, .92) !important;
  backdrop-filter: saturate(1.4) blur(10px);
}

/* ---------------------------------------------- veelgestelde vragen */
html body .sg-root summary {
  position: relative !important;
  padding-right: 52px !important;
  transition: color .16s ease !important;
}
html body .sg-root summary::after {
  content: '';
  position: absolute;
  right: 20px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--sg-koper, #A8481A);
  border-bottom: 2px solid var(--sg-koper, #A8481A);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s var(--bw-uit);
}
html body .sg-root details[open] > summary::after {
  transform: translateY(-25%) rotate(-135deg);
}
html body .sg-root details { transition: box-shadow .2s ease, border-color .2s ease !important }
html body .sg-root details[open] {
  border-color: rgba(168, 72, 26, .35) !important;
  box-shadow: 0 8px 22px rgba(34, 34, 38, .11) !important;
}
html body .sg-root details[open] .a { animation: bw-vouw .32s var(--bw-uit) both }
@keyframes bw-vouw {
  from { opacity: 0; transform: translateY(-4px) }
  to   { opacity: 1; transform: none }
}

/* ---------------------------------------------- het bedrag in de rekenhulp */
html body .sgrk-bedrag { transition: filter .18s ease, opacity .18s ease !important }
html body .sgrk-bedrag.bw-wissel { filter: blur(3px); opacity: .55 }

/* ---------------------------------------------- links in lopende tekst */
html body .sg-root p a:not(.sg-btn) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .28s var(--bw-uit);
  text-decoration: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .sg-root p a:not(.sg-btn):hover { background-size: 100% 1px }
}

/* ---------------------------------------------- toetsenbordbediening zichtbaar houden */
html body a:focus-visible,
html body button:focus-visible,
html body summary:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
  outline: 3px solid #A8481A !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* ---------------------------------------------- ruimere aanraakvlakken op mobiel
   Losse links van 17 pixels hoog zijn met een duim lastig te raken. Alleen de
   verticale ruimte groeit, en dat gebeurt bij de eerste weergave — er ontstaat
   dus geen layoutverschuiving. Links midden in een lopende zin laten we met rust:
   die vallen onder de uitzondering van WCAG 2.5.8. */
@media (max-width: 900px) {
  html body .sg-ft ul li a,
  html body .sg-ft-bot-links a {
    display: inline-block !important;
    padding: 7px 0 !important;
  }
  html body .sg-root .sg-post h3 a,
  html body .sg-root .sg-post .bedrag a,
  html body .sg-root > div > a:not(.sg-btn):not(.sg-btn-licht),
  html body .sg-root .sg-tabelwrap td > a,
  html body .sg-card h3 {
    display: inline-block !important;
    padding: 5px 0 !important;
  }
  html body .sg-hd-mob a { padding-top: 12px !important; padding-bottom: 12px !important }
  html body input[type="checkbox"]:not(#sgMenu),
  html body input[type="radio"] { width: 22px !important; height: 22px !important }
}

/* ---------------------------------------------- sprong naar de inhoud */
.bw-sprong {
  position: fixed; top: 8px; left: 8px; z-index: 2000;
  background: #A8481A; color: #fff; font: 600 14px/1 'Inter', system-ui, sans-serif;
  padding: 12px 18px; border-radius: 8px; text-decoration: none;
  transform: translateY(-160%);
  transition: transform .22s var(--bw-uit);
}
.bw-sprong:focus { transform: translateY(0) }

/* het onzichtbare menuvinkje hoort op een groot scherm niet in de tabvolgorde */
@media (min-width: 961px) {
  html body .sg-hd input#sgMenu { display: none !important }
}

html { scroll-behavior: smooth }

/* ============================================================
   Minder beweging: alle verplaatsing eruit, de vervaging blijft.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  [data-anim],
  [data-anim] .sg-posten > *, [data-anim] .sg-kaarten > *,
  [data-anim] .sg-stap > *, [data-anim] .sg-ook > *, [data-anim] .sg-cats > * {
    transform: none !important;
  }
  [data-anim] .sg-d-foto img { clip-path: none !important; transform: none !important }
  [data-anim].bw-in, [data-anim].bw-in * { transition-duration: .2s !important; transition-delay: 0s !important }
  html .sg-root .sg-streek::after { animation: none !important; transform: rotate(-1deg) !important }
  html body .sg-root a.sg-btn:active, html body .sg-root .sg-btn:active { transform: none !important }
  @media (hover: hover) and (pointer: fine) {
    html body .sg-root .sg-post:hover, html body .sg-card:hover,
    html body .sg-card:hover img { transform: none !important }
  }
  html body .sg-root details[open] .a { animation: none !important }
}