/* GEGENEREERD BESTAND, NIET HANDMATIG AANPASSEN.
   Kopie uit content/growthos-nl/design-system/, want de site wordt vanuit
   deze map gedeployed en kan niet buiten zijn eigen wortel lezen.
   Bijwerken: python scripts/sync-design-tokens.py
   ===================================================================== */

/* =====================================================================
   Ensemblo Design System — Beweging  (v1.0 · 2026-08-07)

   Eén bestand met het gedrag dat elke knop, link en kaart hoort te hebben.
   Laad het ná tokens.css; het gebruikt alleen var(--token), dus het werkt
   in elk merk zolang dat merk dezelfde tokennamen zet.

   Wat dit oplost: nu voelt elke property net iets anders aan, omdat elke
   codebase zijn eigen duur en easing verzon. Hierna voelt indrukken overal
   hetzelfde, ook al ziet elk merk er anders uit.

   De selectors zijn bewust breed (element + klasse). Zo werkt het bestand
   in een Next-app, in statische HTML en in een Squarespace-injectie zonder
   dat er ergens een class hernoemd hoeft te worden.

   Beweging uit? Onder aan tokens.css staat al één globale regel die alle
   transitions en animaties stilzet bij prefers-reduced-motion. Wat hier
   staat gaat daar automatisch in mee. De focusring blijft wél staan: dat
   is geen versiering maar een aanwijzing waar je bent.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Indrukbare dingen: knoppen, links-als-knop, tabs, kaarten met actie.
   --------------------------------------------------------------------- */
.btn,
button:not(:disabled),
[role='button'],
.knop,
input[type='submit'],
input[type='button'] {
  transition:
    background-color var(--dur-hover) var(--ease-inuit),
    border-color var(--dur-hover) var(--ease-inuit),
    color var(--dur-hover) var(--ease-inuit),
    box-shadow var(--dur-hover) var(--ease-inuit),
    transform var(--dur-druk) var(--ease-uit);
}

/* Indrukken. Dit is het gebaar dat Bart bedoelde: kort, klein, en het
   gebeurt tijdens het drukken en niet erna. Vandaar --dur-druk (90ms) en
   niet de hover-duur: feedback op je eigen vinger mag geen wachttijd
   hebben. De schaal blijft klein, want een knop die echt krimpt leest als
   speelgoed. */
.btn:active:not(:disabled),
button:not(:disabled):active,
[role='button']:active,
.knop:active,
input[type='submit']:active,
input[type='button']:active {
  transform: scale(var(--druk));
  /* Optillen en indrukken tegelijk kan niet: als hover een translateY zet,
     wint deze regel omdat hij specifieker is en later staat. */
}

/* Toetsenbord-focus. Nango heeft dit niet, en dat is precies waar hun
   afwerking ophoudt: met alleen een muis is hun site prachtig, met alleen
   een toetsenbord ben je kwijt waar je bent. Wij zetten er wel een ring
   omheen, en alleen bij toetsenbordgebruik (:focus-visible), zodat een
   muisklik geen ring achterlaat. */
:where(.btn, button, [role='button'], .knop, a, input, select, textarea, summary):focus-visible {
  outline: var(--ring) solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------------
   2. Links in lopende tekst. Kleur wisselt, verder niets: tekst die
      beweegt onder je muis maakt lezen moeilijker.
   --------------------------------------------------------------------- */
.leesbaar a,
p a,
li a {
  transition: color var(--dur-hover) var(--ease-inuit);
}

/* ---------------------------------------------------------------------
   3. Kaarten en panelen die je kunt aanklikken. Optillen mag, maar alleen
      als er ook echt iets gebeurt als je klikt.
   --------------------------------------------------------------------- */
.kaart-actie,
a.panel,
.panel--klikbaar {
  transition:
    transform var(--dur-hover) var(--ease-uit),
    box-shadow var(--dur-hover) var(--ease-uit),
    border-color var(--dur-hover) var(--ease-inuit);
}
.kaart-actie:hover,
a.panel:hover,
.panel--klikbaar:hover {
  transform: translateY(var(--til));
  box-shadow: var(--shadow-sm);
}
.kaart-actie:active,
a.panel:active,
.panel--klikbaar:active {
  transform: translateY(0) scale(var(--druk));
  transition-duration: var(--dur-druk);
}

/* ---------------------------------------------------------------------
   4. Iets komt binnen. Voor lijsten die na een handeling verschijnen.
      Zet --i op elk item voor een trapje; na het zesde item stopt de
      vertraging, want daarna wordt het wachten in plaats van richting.
   --------------------------------------------------------------------- */
.komt-binnen {
  animation: ds-komt-binnen var(--dur-paneel) var(--ease-land) backwards;
  animation-delay: calc(min(var(--i, 0), 6) * 55ms);
}

@keyframes ds-komt-binnen {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   5. Vouwt open. Voor details/summary en uitklapbare secties.
   --------------------------------------------------------------------- */
.vouw > summary::before,
.vouw-pijl {
  transition: transform var(--dur-hover) var(--ease-inuit);
}
.vouw[open] > summary::before,
.vouw-pijl--open {
  transform: rotate(90deg);
}

/* ---------------------------------------------------------------------
   6. Uitgeschakeld beweegt niet. Een knop die inzakt terwijl hij niets
      doet, belooft iets dat niet gebeurt.
   --------------------------------------------------------------------- */
.btn:disabled,
button:disabled,
[aria-disabled='true'] {
  transform: none !important;
}