/* ============================================================
   Reisregie — bewegingslaag
   ------------------------------------------------------------
   Eén set curves en duren voor de hele site, zodat alles hetzelfde
   ritme heeft. Regels die ik aanhoud:
     1. Alles beweegt dezelfde kant op: omhoog, met opacity.
     2. Niets stuitert. De uitloop is lang, de inzet kort.
     3. Beeld mag schalen, tekst nooit.
     4. Zonder JavaScript en met prefers-reduced-motion staat alles
        gewoon stil en zichtbaar.
   ============================================================ */

:root {
  /* duur */
  --ms-tik:   140ms;   /* hover, focus, indrukken */
  --ms-kort:  260ms;   /* kleine toestandswissels */
  --ms-basis: 520ms;   /* elementen die binnenkomen */
  --ms-lang:  900ms;   /* hele scènes, beeldwissels */

  /* curves */
  --uit:      cubic-bezier(.16, 1, .3, 1);     /* lange, zachte uitloop */
  --soepel:   cubic-bezier(.33, 1, .68, 1);
  --heen-weer:cubic-bezier(.76, 0, .24, 1);

  /* afstand waarover iets binnenkomt */
  --op: 22px;
}

/* ------------------------------------------------------------
   1. Paginaovergangen
   De browser vervaagt de oude pagina in de nieuwe. Het logo en de
   balk blijven staan, zodat het voelt als één doorlopend scherm.
   ------------------------------------------------------------ */
@view-transition { navigation: auto; }

/* De oude pagina blijft staan; de nieuwe komt eroverheen. Zo is er geen
   moment waarop het scherm leeg is, ook niet op een trage verbinding. */
::view-transition-old(root) { animation: none; opacity: 1; }
::view-transition-new(root) { animation: vt-komt 340ms var(--uit) both; }

@keyframes vt-komt { from { opacity: 0; transform: translateY(8px); } }

.nav      { view-transition-name: balk; }
.logo img { view-transition-name: merk; }
.footer   { view-transition-name: voet; }

/* De balk en de voet schuiven niet mee; ze blijven staan. */
::view-transition-group(balk),
::view-transition-group(voet) { animation-duration: var(--ms-kort); }
::view-transition-old(balk), ::view-transition-new(balk),
::view-transition-old(voet), ::view-transition-new(voet) { animation: none; opacity: 1; }

/* ------------------------------------------------------------
   2. De balk bovenaan
   Bij het scrollen wordt hij compacter, krijgt hij een matglazen
   achtergrond en tekent de gouden lijn de voortgang van de pagina.
   Dit loopt op de scroll-tijdlijn van de browser: geen JavaScript,
   dus geen haperingen.
   ------------------------------------------------------------ */
.nav {
  transition: background var(--ms-kort) var(--soepel),
              box-shadow var(--ms-kort) var(--soepel),
              backdrop-filter var(--ms-kort);
}

.nav::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px; width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-ink) 100%);
  opacity: .9;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .nav::after {
    animation: lijn-groeit linear both;
    animation-timeline: scroll(root block);
  }
  .nav {
    animation: balk-verdicht linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 140px;
  }
}
@keyframes lijn-groeit  { to { transform: scaleX(1); } }
@keyframes balk-verdicht {
  to {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(150%) blur(14px);
    box-shadow: 0 1px 0 var(--line), 0 12px 32px -24px rgba(15, 31, 75, .5);
  }
}

/* ------------------------------------------------------------
   3. De opening
   Kop, tekst, knoppen en beeld komen na elkaar op. De volgorde
   stuurt het oog: eerst wat er staat, dan wat je ermee doet.
   ------------------------------------------------------------ */
.js .hero .aan { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero .aan {
    animation: op-komen var(--ms-lang) var(--uit) both;
    animation-delay: calc(var(--d, 0) * 1ms);
  }
}

@keyframes op-komen {
  from { opacity: 0; transform: translateY(var(--op)); }
  to   { opacity: 1; transform: none; }
}

/* De twee regels van de kop komen los van elkaar. */
.hero h1 .regel { display: block; }

/* Het schuine woord krijgt een gouden streep die zich tekent. */
.hero h1 em { position: relative; }
.hero h1 em::after {
  content: "";
  position: absolute; left: .04em; right: .04em; bottom: .04em;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(201, 168, 76, .25) 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 em::after { animation: streep 900ms var(--uit) 900ms both; }
}
@keyframes streep { to { transform: scaleX(1); } }

/* Het beeld komt iets later en zakt op zijn plek. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-visual .device {
    animation: toestel-in 1200ms var(--uit) both;
    animation-delay: calc(var(--d, 0) * 1ms);
  }
}
@keyframes toestel-in {
  from { opacity: 0; transform: translateY(34px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Heel licht drijven, zodat het scherm leeft zonder af te leiden. */
@media (prefers-reduced-motion: no-preference) {
  .hero-visual .device-phone { animation: drijf 9s ease-in-out 2s infinite; }
}
@keyframes drijf {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* ------------------------------------------------------------
   4. Binnenkomen bij het scrollen
   De browser doet dit zelf op de view-tijdlijn. Werkt dat niet,
   dan zet site.js de klasse .in erop; dat is de oude weg.
   ------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal {
      opacity: 0;
      animation: op-komen var(--ms-basis) var(--uit) both;
      animation-timeline: view(block);
      animation-range: entry 8% cover 26%;
    }
    /* De waarnemer in site.js hoeft dan niets meer te doen. */
    .js .reveal.in { opacity: 1; }
  }
}

/* Groepen komen na elkaar op in plaats van tegelijk. */
.stapel > * { --i: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .stapel > * {
    animation: op-komen var(--ms-basis) var(--uit) both;
    animation-delay: calc(var(--i) * 70ms);
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .stapel > * {
      animation-timeline: view(block);
      animation-range: entry 4% cover 22%;
      animation-delay: 0s;
      animation-duration: calc(var(--ms-basis) + var(--i) * 90ms);
    }
  }
}

/* ------------------------------------------------------------
   5. Beeld dat meebeweegt
   Binnen zijn eigen kader schuift de foto een paar procent mee.
   Alleen als de browser scroll-tijdlijnen kent; anders staat hij stil.
   ------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gallery .cover img,
    .cell .beeld img {
      animation: schuif linear both;
      animation-timeline: view(block);
      animation-range: cover;
    }
  }
}
@keyframes schuif {
  from { transform: scale(1.06) translateY(-1.6%); }
  to   { transform: scale(1.06) translateY(1.6%); }
}

/* ------------------------------------------------------------
   6. Knoppen en links
   Kort, klein en meteen: dit is terugkoppeling, geen vertoning.
   ------------------------------------------------------------ */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform var(--ms-tik) var(--uit),
              background var(--ms-tik),
              border-color var(--ms-tik),
              color var(--ms-tik),
              box-shadow var(--ms-kort) var(--uit);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(15, 31, 75, .55);
}
.btn:active { transform: translateY(1px); box-shadow: none; }

/* Een lichtveeg over de donkere knop. Eén keer, bij aanwijzen. */
.btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover::after { animation: veeg 820ms var(--soepel); }
}
@keyframes veeg { to { transform: translateX(120%); } }

/* Menu-items krijgen een gouden lijn die van links uitrolt. Alleen op brede
   schermen; in het uitklapmenu zijn de lijnen scheidingen tussen de rijen. */
@media (min-width: 901px) {
  .nav-links a {
    position: relative;
    border-bottom-color: transparent;
  }
  .nav-links a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1.5px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--ms-kort) var(--uit);
  }
  .nav-links a:hover::after,
  .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
  .nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: transparent; }
}

/* ------------------------------------------------------------
   7. Kaarten
   Optillen mag, maar nauwelijks. De schaduw doet het werk.
   ------------------------------------------------------------ */
.cell, .dl, .gallery article {
  transition: transform var(--ms-kort) var(--uit),
              box-shadow var(--ms-kort) var(--uit),
              border-color var(--ms-kort);
}
.cell:hover, .dl:hover { transform: translateY(-3px); }

/* ------------------------------------------------------------
   8. De stappen met meelopend beeld
   Het beeld wisselt met een overvloeier in plaats van een sprong.
   ------------------------------------------------------------ */
.steps-media img {
  transition: opacity var(--ms-lang) var(--uit),
              transform var(--ms-lang) var(--uit);
  transform: scale(1.02);
}
.steps-media img.show { transform: none; }

.step {
  transition: background var(--ms-kort) var(--soepel),
              border-color var(--ms-kort);
}
.step::before {
  transition: color var(--ms-kort) var(--soepel),
              transform var(--ms-kort) var(--uit),
              opacity var(--ms-kort);
  opacity: .45;
}
.step.active::before { transform: scale(1.18); opacity: 1; }


/* ------------------------------------------------------------
   9. Vragen die open- en dichtklappen
   ------------------------------------------------------------ */
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--ms-kort) var(--uit), content-visibility var(--ms-kort) allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq summary { transition: color var(--ms-tik); }

/* ------------------------------------------------------------
   10. Het bedrag in de rekenaar
   Bij elke wijziging rolt het nieuwe bedrag van onder naar boven.
   ------------------------------------------------------------ */
.bedrag { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .bedrag.wissel { animation: rol var(--ms-kort) var(--uit); }
}
@keyframes rol {
  0%   { opacity: 1; transform: none; }
  40%  { opacity: 0; transform: translateY(-40%); }
  41%  { transform: translateY(40%); }
  100% { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   11. De EU-band: het schild tekent zich
   ------------------------------------------------------------ */
.eu-merk svg path,
.eu-merk svg circle { stroke-dasharray: 64; stroke-dashoffset: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .eu-merk svg path {
      animation: teken 1s var(--uit) both;
      animation-timeline: view(block);
      animation-range: entry 10% cover 30%;
    }
  }
}
@keyframes teken { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------
   12. Invoervelden
   ------------------------------------------------------------ */
.field input, .field textarea, .field select {
  transition: border-color var(--ms-kort) var(--soepel),
              box-shadow var(--ms-kort) var(--soepel),
              background var(--ms-kort);
}
.field input:focus, .field textarea:focus, .field select:focus {
  box-shadow: 0 0 0 4px rgba(15, 31, 75, .08);
}

/* ------------------------------------------------------------
   13. Alles uit
   Eén blok dat elke beweging hierboven stilzet. Wat zichtbaar
   hoorde te worden, is dan meteen zichtbaar.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .hero .aan,
  .js .reveal,
  .js .stapel > * { opacity: 1 !important; transform: none !important; }
  .hero h1 em::after,
  .nav::after { transform: scaleX(1); }
}

/* Zonder JavaScript staat er niets te wachten. */
html:not(.js) .hero .aan,
html:not(.js) .reveal,
html:not(.js) .stapel > * { opacity: 1; transform: none; animation: none; }

/* ------------------------------------------------------------
   14. Het scherm dat je loslaat
   Terwijl je van de opening wegscrollt, zakt het beeld iets terug
   en vervaagt het. Daardoor voelt de overgang naar de eerste
   sectie als één beweging in plaats van twee losse schermen.
   ------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    .hero-visual {
      animation: wegzakken linear both;
      animation-timeline: view(block);
      animation-range: exit-crossing 0% exit-crossing 100%;
    }
    .hero-copy {
      animation: mee-omhoog linear both;
      animation-timeline: view(block);
      animation-range: exit-crossing 0% exit-crossing 100%;
    }
  }
}
@keyframes wegzakken {
  from { transform: none;                     opacity: 1; }
  to   { transform: translateY(-38px) scale(.97); opacity: .35; }
}
@keyframes mee-omhoog {
  from { transform: none;                opacity: 1; }
  to   { transform: translateY(-18px);   opacity: .45; }
}

/* ------------------------------------------------------------
   15. Sectiekoppen
   Een korte gouden haarlijn tekent zich boven de kop zodra de
   sectie in beeld komt. Eén gebaar, op elke pagina hetzelfde.
   ------------------------------------------------------------ */
.section-head { position: relative; }
.section-head::before {
  content: "";
  position: absolute; left: 0; top: -18px;
  width: 44px; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head::before {
      animation: haarlijn var(--ms-basis) var(--uit) both;
      animation-timeline: view(block);
      animation-range: entry 10% cover 24%;
    }
  }
}
@keyframes haarlijn { to { transform: scaleX(1); } }

/* Staat er al een eigen kopregel boven de sectiekop, zoals het schildlabel in de
   EU-band op de homepage, dan loopt de haarlijn daar dwars doorheen: hij hangt op
   top:-18px en dat is precies de hoogte van dat label. Het label is daar het
   gebaar, dus de lijn kan weg. */
.eu-kop + .section-head::before { content: none; }

@media (prefers-reduced-motion: reduce) {
  .section-head::before { transform: scaleX(1); }
}

/* ------------------------------------------------------------
   16. De navy band ademt
   Het verloop verschuift langzaam terwijl je er doorheen scrollt.
   Geen animatie die op zichzelf opvalt, wel diepte.
   ------------------------------------------------------------ */
.band, .cell-navy .txt {
  background-image: radial-gradient(115% 80% at 22% 0%, var(--navy-2) 0%, var(--navy) 58%);
  background-size: 100% 190%;
  background-position: 50% 0%;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band, .cell-navy .txt {
      animation: diepte linear both;
      animation-timeline: view(block);
      animation-range: cover;
    }
  }
}
@keyframes diepte {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}

/* ------------------------------------------------------------
   17. Het uitklapmenu
   Het menu vouwt open in plaats van er ineens te staan, en de
   drie streepjes worden een kruis.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  @media (prefers-reduced-motion: no-preference) {
    .nav.open .nav-links { animation: menu-open var(--ms-kort) var(--uit) both; }
    .nav.open .nav-links li {
      --op: 9px;
      animation: op-komen var(--ms-kort) var(--uit) both;
      animation-delay: calc(var(--i, 0) * 34ms + 40ms);
    }
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    transition: transform var(--ms-kort) var(--uit), opacity var(--ms-tik);
  }
  .nav.open .nav-toggle span { transform: rotate(45deg); }
  .nav.open .nav-toggle span::before { transform: translateY(6px) rotate(-90deg); }
  .nav.open .nav-toggle span::after  { opacity: 0; }
}
@keyframes menu-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}