/* =====================================================================
   beweging.css — de bewegingswetten van klyo.nl (zie DESIGN.md).

   Eén gedeelde bron voor micro-interactie op alle pagina's:
   drukfeedback op alles wat je kunt indrukken, met de stevige
   ease-out-curve en binnen de 160 ms-band voor knopfeedback.
   Naar het animatiewerk van Emil Kowalski (MIT).
   ===================================================================== */
:root {
  --k-ease-uit: cubic-bezier(0.23, 1, 0.32, 1);
  --k-ease-verplaats: cubic-bezier(0.77, 0, 0.175, 1);
  --k-ease-lade: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Mobiel-wet (DESIGN.md): iOS-Safari blaast tekst die het "te klein"
   vindt zelf op ("text inflation"), waardoor pagina's op een iPhone
   breder worden dan elke geteste breedte. Dit bestand laadt op alle
   sitepagina's, dus hier staat de wet één keer voor allemaal. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Drukfeedback: de interface bevestigt dat hij je gehoord heeft.
   Alleen transform (GPU), 160 ms, subtiel — en nooit op een knop die
   uitstaat. De :not(.nav-hamburger) voorkomt dat het menu-icoon
   meeschaalt terwijl het naar een kruisje vouwt. */
@media (prefers-reduced-motion: no-preference) {
  button:not([disabled]):not(.nav-hamburger),
  .btn, .nav-cta, .ck-btn, .mm-cta {
    transition-property: transform;
    transition-duration: 160ms;
    transition-timing-function: var(--k-ease-uit);
  }
  /* !important is hier bewust: de pagina-stijlen laden ná dit bestand en
     hun hover-transform zou anders altijd van de drukfeedback winnen.
     Geldt alleen tijdens het indrukken zelf. */
  button:not([disabled]):not(.nav-hamburger):active,
  .btn:active, .ck-btn:active, .mm-cta:active {
    transform: scale(0.97) !important;
  }
  /* De nav-CTA heeft een hover-lift; druk combineert met die lift. */
  .nav-cta:active { transform: translateY(-1px) scale(0.97) !important; }
}