/* Beweging in Tools (docs/beweging.md). Zelfde tokens als de analytics-app (app/tokens.css).
   Staat hier en niet in huisstijl.css: dat bestand is byte-gelijk met het andere platform.
   Alleen transform/opacity (en kleur/schaduw bij hover); geen layoutwijzigingen; geen lussen
   behalve de bestaande laad-iconen. Alle duren via tokens, dus prefers-reduced-motion zet alles uit. */

:root {
  /* v2 (21-10): Apple-achtig, iets trager en zachter; uitgang ≈ 70 % van de ingang. */
  --duur-xs: 120ms;         /* indrukken, kleine statuswissel */
  --duur-hover: 200ms;      /* hover van knoppen en links (alleen aanwijsapparaten) */
  --duur-sm: 220ms;         /* uitgang van vensters en lagen (≈ 70 % van 320) */
  --duur-md: 320ms;         /* inhoud na laden, wizardstap, venster in, voortgangsbalk */
  --duur-lg: 450ms;         /* drawer in */
  --duur-uit: 320ms;        /* drawer uit (≈ 70 % van 450) */
  --duur-teller: 700ms;
  --vertraging-stap: 50ms;
  --curve-standaard: cubic-bezier(.22,1,.36,1);
  --curve-nadruk: cubic-bezier(.32,.72,0,1);
  --curve-uit: cubic-bezier(.4,0,.2,1);
  --beweeg-1: 8px;          /* verschuiving van inhoud en venster */
  --beweeg-2: 12px;
  --schaal-druk: .98;       /* knop indrukken */
  --schaal-venster: .97;    /* venster komt binnen */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duur-xs: 0ms;
    --duur-hover: 0ms;
    --duur-sm: 0ms;
    --duur-md: 0ms;
    --duur-lg: 0ms;
    --duur-uit: 0ms;
    --duur-teller: 0ms;
    --vertraging-stap: 0ms;
    --beweeg-1: 0px;
    --beweeg-2: 0px;
    --schaal-druk: 1;
    --schaal-venster: 1;
  }
}

/* ── Knoppen en tabs: kleur/schaduw vloeien, indrukken = schaal .98 ── */
.btn, .btn-primary-sm, .btn-ghost-sm, .wz-balk-stap button, .wz-chip, .wz-tegel, .wz-link, .wz-geavanceerd-knop,
.rail-item, .topnav-crumbs a, .login-mod-tab a, .modus-toggle button, .fav-btn, .gebruikersmenu-item {
  transition: background-color var(--duur-xs) var(--curve-standaard), border-color var(--duur-xs) var(--curve-standaard),
    color var(--duur-xs) var(--curve-standaard), box-shadow var(--duur-xs) var(--curve-standaard),
    transform var(--duur-xs) var(--curve-standaard);
}
/* Hover alleen op aanwijsapparaten: op touch blijft hover anders "plakken". */
@media (hover: hover) and (pointer: fine) {
  .btn, .btn-primary-sm, .btn-ghost-sm, .wz-balk-stap button, .wz-chip, .wz-tegel, .wz-link, .wz-geavanceerd-knop,
  .rail-item, .topnav-crumbs a, .login-mod-tab a, .modus-toggle button, .fav-btn, .gebruikersmenu-item {
    transition: background-color var(--duur-hover) var(--curve-standaard), border-color var(--duur-hover) var(--curve-standaard),
      color var(--duur-hover) var(--curve-standaard), box-shadow var(--duur-hover) var(--curve-standaard),
      transform var(--duur-xs) var(--curve-standaard);
  }
}
.btn:active:not(:disabled), .btn-primary-sm:active:not(:disabled), .btn-ghost-sm:active:not(:disabled),
.wz-balk-stap button:active:not(:disabled), .wz-chip:active:not(:disabled), .wz-tegel:active:not(:disabled),
.rail-item:active:not(.disabled), .login-mod-tab a:active, .modus-toggle button:active, .fav-btn:active {
  transform: scale(var(--schaal-druk));
}
.card-hoverable {
  transition: transform var(--duur-md) var(--curve-standaard), border-color var(--duur-hover) var(--curve-standaard),
    box-shadow var(--duur-hover) var(--curve-standaard);
}

/* ── Inhoud komt binnen: één keer, 320 ms, fill backwards (eindstand = gewone stand) ── */
@keyframes bw-inhoud {
  from { opacity: 0; transform: translateY(var(--beweeg-1)); }
  to   { opacity: 1; transform: none; }
}
.bw-resultaat, .fade-up { animation: bw-inhoud var(--duur-md) var(--curve-standaard) backwards; }

/* ── Wizard: stapwissel fade/rise. Twee gelijke keyframes met een andere naam herstarten de animatie
   bij elke stap zonder de stap opnieuw te mounten (geen verloren veldstand of focus). ── */
@keyframes bw-stap-a { from { opacity: 0; transform: translateY(var(--beweeg-1)); } to { opacity: 1; transform: none; } }
@keyframes bw-stap-b { from { opacity: 0; transform: translateY(var(--beweeg-1)); } to { opacity: 1; transform: none; } }
.wz-kaart.bw-stap-a { animation: bw-stap-a var(--duur-md) var(--curve-standaard) backwards; }
.wz-kaart.bw-stap-b { animation: bw-stap-b var(--duur-md) var(--curve-standaard) backwards; }
/* Voortgangsbalk: vult zacht via schaal (transform) in plaats van breedte. */
.wz-voortgang span { width: 100%; transform-origin: 0 50%; transition: transform var(--duur-md) var(--curve-standaard); }
/* Run-balk: geen breedte-overgang meer (alleen het bestaande laad-lusje beweegt). */
.bar > div { transition: none; }

/* ── Vensters en lagen: in vanaf .97 + 8 px (320 ms), uit in 220 ms ── */
@keyframes bw-laag-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bw-laag-uit { from { opacity: 1; } to { opacity: 0; } }
@keyframes bw-venster-in  { from { opacity: 0; transform: translateY(var(--beweeg-1)) scale(var(--schaal-venster)); } to { opacity: 1; transform: none; } }
@keyframes bw-venster-uit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(var(--beweeg-1)) scale(var(--schaal-venster)); } }
.bw-laag { animation: bw-laag-in var(--duur-md) var(--curve-standaard) backwards; }
.bw-venster { animation: bw-venster-in var(--duur-md) var(--curve-nadruk) backwards; }
.bw-laag.bw-sluit { animation: bw-laag-uit var(--duur-sm) var(--curve-uit) forwards; pointer-events: none; }
.bw-venster.bw-sluit { animation: bw-venster-uit var(--duur-sm) var(--curve-uit) forwards; }

/* ── Mobiele menu-drawer: in 450 ms (iOS-sheetcurve), uit 320 ms ── */
@media (max-width: 767px) {
  .rail { transition: transform var(--duur-uit) var(--curve-uit); }
  .rail.open { transition: transform var(--duur-lg) var(--curve-nadruk); }
  .rail-overlay { transition: opacity var(--duur-uit) var(--curve-uit); }
  .rail-overlay.open { transition: opacity var(--duur-lg) var(--curve-standaard); }
}