/* ==========================================================
   Forty · beweging (homepage)
   Eén curve, één ritme. Per scherm beweegt maar één ding.
   Alle beweging staat uit bij prefers-reduced-motion.
   ========================================================== */

:root {
  --curve: cubic-bezier(.2, .7, .2, 1);
  --curve-uit: cubic-bezier(.16, 1, .3, 1);
  --t-kort: .2s;
  --t-midden: .45s;
}

/* ---------- 1. Eén overgangsritme voor alle hovers ---------- */
.btn { transition: transform var(--t-kort) var(--curve), box-shadow var(--t-kort) var(--curve), background-color var(--t-kort) var(--curve); }
.herken, .casekaart, .verhaalkaart { transition: border-color var(--t-kort) var(--curve), transform var(--t-kort) var(--curve); }
.casekaart__beeld img { transition: transform var(--t-midden) var(--curve); }
.kop__nav a:not(.btn) { transition: color var(--t-kort) var(--curve); }

/* ---------- 2. Woorden die opkomen ---------- */
.woorden { display: block; }
.woord { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.woord__in { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: start bij laden, zonder JavaScript */
  .hero .woord__in { transform: translateY(105%); animation: woord-op .9s var(--curve-uit) forwards; animation-delay: calc(.15s + var(--i, 0) * 70ms); }
  .hero .woorden + .woorden .woord__in { animation-delay: calc(.5s + var(--i, 0) * 70ms); }
  .hero .eyebrow, .hero__lead, .hero__acties { opacity: 0; transform: translateY(12px); animation: zacht-op .8s var(--curve-uit) forwards; }
  .hero .eyebrow { animation-delay: .05s; }
  .hero__lead { animation-delay: .85s; }
  .hero__acties { animation-delay: 1s; }

  /* Paginakop op de overige pagina's: zelfde opbouw als de hero */
  .paginakop .woord__in { transform: translateY(105%); animation: woord-op .9s var(--curve-uit) forwards; animation-delay: calc(.15s + var(--i, 0) * 60ms); }
  .paginakop__in > :not(h1) { opacity: 0; transform: translateY(12px); animation: zacht-op .8s var(--curve-uit) .7s forwards; }
  .paginakop__in > .eyebrow, .paginakop__in > .kruimel { animation-delay: .05s; }
  .paginakop__in > :not(h1):not(.eyebrow):not(.kruimel) ~ :not(h1) { animation-delay: .85s; }

  /* Slot: start zodra de band in beeld komt (script zet .in-beeld) */
  .beweeg-klaar .band .woord__in { transform: translateY(105%); transition: transform .9s var(--curve-uit); transition-delay: calc(var(--i, 0) * 70ms); }
  .beweeg-klaar .band.in-beeld .woord__in { transform: none; }
}
@keyframes woord-op { to { transform: none; } }
@keyframes zacht-op { to { opacity: 1; transform: none; } }

/* ---------- 3. Signatuurbeeld: lagen schuiven één voor één op ---------- */
.hero__laag { translate: 0 var(--parallax, 0px); }
@media (prefers-reduced-motion: no-preference) {
  .hero__laag { opacity: 0; transform: translateY(14%); animation: laag-op 1.6s var(--curve-uit) forwards; }
  .hero__laag--1 { animation-delay: .1s; }
  .hero__laag--2 { animation-delay: .3s; }
  .hero__laag--3 { animation-delay: .5s; }
}
@keyframes laag-op { to { opacity: 1; transform: none; } }

/* ---------- 4. Vlakken die openvouwen tot volle breedte ---------- */
[data-ontvouw] { clip-path: inset(0 var(--ox, 0px) round var(--or, 0px)); }

/* ---------- 5. Kop: verdwijnt bij omlaag, komt terug bij omhoog ---------- */
.kop { position: fixed; transition: transform var(--t-midden) var(--curve), background-color var(--t-midden) var(--curve), box-shadow var(--t-midden) var(--curve); }
.kop.kop--weg { transform: translateY(-110%); }
.kop.kop--vast { background: rgba(244, 243, 239, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--lijn); }
.kop.kop--vast .kop__in { height: 80px; transition: height var(--t-midden) var(--curve); }
.kop.kop--vast .kop__nav { background: rgba(255, 255, 255, .6); border-color: var(--lijn); }
.kop.kop--vast .kop__nav a:not(.btn) { color: var(--inkt); }
.kop.kop--vast .kop__nav a:not(.btn):hover { color: var(--ultramarijn); }
.kop.kop--vast .kop__nav .btn--lijn { color: var(--inkt); }
.kop.kop--vast .kop__menu-knop { background: rgba(255, 255, 255, .6); color: var(--inkt); }
.kop.kop--vast .kop__logo .logo-licht { display: none; }
.kop.kop--vast .kop__logo .logo-donker { display: block; }
@media (max-width: 1080px) { .kop.kop--vast .kop__in { height: 64px; } }

/* ---------- 6. Vaste actiebalk (mobiel) ---------- */
.actiebalk { display: none; }
@media (max-width: 760px) {
  .actiebalk {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 20px; border-radius: var(--r-rond);
    background: rgba(23, 20, 61, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    color: var(--wolk); box-shadow: 0 12px 32px rgba(23, 20, 61, .28);
    transform: translateY(calc(100% + 24px)); visibility: hidden;
    transition: transform var(--t-midden) var(--curve), visibility 0s linear var(--t-midden);
  }
  .actiebalk.zichtbaar { transform: none; visibility: visible; transition: transform var(--t-midden) var(--curve), visibility 0s; }
  .actiebalk__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .actiebalk__naam { font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .actiebalk__meta { font-size: 13px; color: var(--lila-licht); line-height: 1.2; white-space: nowrap; }
  .actiebalk .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
  body.menu-open .actiebalk { visibility: hidden; }
}

/* ---------- 7. Vragen klappen zacht open ---------- */
.faq summary { transition: color var(--t-kort) var(--curve); }
.faq summary:hover { color: var(--ultramarijn); }
.faq summary::after { transition: transform var(--t-midden) var(--curve-uit); }
.faq details.bezig .antwoord { overflow: hidden; }