/* ── Beweging: paginaovergangen, openingsanimaties en scroll-animaties ──
   Demo 22-09-2026. Puur decoratief en volledig optioneel: zonder
   browserondersteuning of met prefers-reduced-motion: reduce staat alles
   direct en stil in beeld. Geen bibliotheek, geen build-stap.

   Afspraken voor deze laag:
   - Animeer alleen translate / scale / opacity (goedkoop voor de browser).
     Hover-effecten gebruiken transform; die blijven daardoor werken.
   - Scroll-animaties alleen binnen @supports (animation-timeline: view()),
     zodat browsers zonder ondersteuning de inhoud gewoon tonen.
   - js/beweging.js voegt alleen de richting "terug" toe aan een overgang. */

:root {
  --schuif: cubic-bezier(.16, 1, .3, 1);   /* snel vertrek, zachte landing */
  --weg: cubic-bezier(.7, 0, .84, 0);      /* rustige start, snel weg */
  --bereik-in: entry 0% cover 38%;         /* scroll-afstand van een onthulling */
}

@media (prefers-reduced-motion: no-preference) {

  /* ═══ 1. Paginaovergang: de nieuwe pagina schuift als een plaat over de oude ═══ */
  @view-transition { navigation: auto; }

  ::view-transition-group(root) { animation-duration: 720ms; }
  ::view-transition-old(root) { animation: pagina-wijkt 720ms var(--schuif) both; }
  ::view-transition-new(root) {
    animation: pagina-komt 720ms var(--schuif) both;
    box-shadow: -8px 0 0 var(--actie), -40px 0 80px rgba(23, 24, 21, .45);
  }

  /* Terug in de geschiedenis: de huidige plaat schuift weg naar rechts */
  html:active-view-transition-type(terug)::view-transition-old(root) {
    z-index: 1;
    animation-name: pagina-terug-weg;
    box-shadow: -8px 0 0 var(--actie), -40px 0 80px rgba(23, 24, 21, .45);
  }
  html:active-view-transition-type(terug)::view-transition-new(root) {
    animation-name: pagina-terug-komt;
    box-shadow: none;
  }

  /* Op brede schermen blijft de vaste header staan terwijl de pagina schuift */
  @media (min-width: 921px) {
    .site-header { view-transition-name: site-kop; }
    ::view-transition-group(site-kop) { animation: none; }
    ::view-transition-old(site-kop) { display: none; }
    ::view-transition-new(site-kop) { animation: none; }
  }

  @keyframes pagina-komt { from { translate: 100% 0; } }
  @keyframes pagina-wijkt { to { translate: -22% 0; filter: brightness(.55); } }
  @keyframes pagina-terug-weg { to { translate: 100% 0; } }
  @keyframes pagina-terug-komt { from { translate: -22% 0; filter: brightness(.55); } }


  /* ═══ 2. Opening: hero en paginakop schuiven bij het laden in beeld ═══ */
  .hero::before { animation: vlak-in 1100ms var(--schuif) both; }
  .hero .kicker { animation: van-links 700ms var(--schuif) 80ms both; }
  .hero h1 { animation: omhoog 950ms var(--schuif) 160ms both; }
  .hero .markering::after {
    transform-origin: left;
    animation: balk-groeit 700ms var(--schuif) 850ms both;
  }
  .hero .intro { animation: omhoog 900ms var(--schuif) 300ms both; }
  .hero .knoppenrij { animation: omhoog 900ms var(--schuif) 420ms both; }
  .hero-feiten { animation: van-rechts 1000ms var(--schuif) 380ms both; }
  .hero-feiten li { animation: van-rechts 700ms var(--schuif) both; }
  .hero-feiten li:nth-child(1) { animation-delay: 620ms; }
  .hero-feiten li:nth-child(2) { animation-delay: 710ms; }
  .hero-feiten li:nth-child(3) { animation-delay: 800ms; }
  .hero-feiten li:nth-child(4) { animation-delay: 890ms; }

  .pagina-kop::before { animation: vlak-in 1100ms var(--schuif) both; }
  .pagina-kop .kicker { animation: van-links 700ms var(--schuif) 80ms both; }
  .pagina-kop h1 { animation: omhoog 950ms var(--schuif) 160ms both; }
  .pagina-kop .intro { animation: omhoog 900ms var(--schuif) 300ms both; }
  .pagina-kop .knoppenrij { animation: omhoog 900ms var(--schuif) 420ms both; }


  /* ═══ 3. Scrollen: secties onthullen zich terwijl u scrolt ═══ */
  @supports (animation-timeline: view()) {

    /* Leesvoortgang: okerbalk onder de header groeit mee met de pagina */
    .site-header::before {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 4px;
      background: var(--actie);
      transform-origin: left;
      animation: voortgang linear both;
      animation-timeline: scroll(root);
    }

    /* Hero: inhoud en okervlak wijken met verschillende snelheid (diepte) */
    .hero > .kader {
      animation: hero-wijkt linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    .hero::before {
      animation: vlak-in 1100ms var(--schuif) both, vlak-wijkt linear both;
      animation-timeline: auto, view();
      animation-range: normal, exit 0% exit 100%;
    }

    /* Sectiekoppen: kicker schuift in, kop komt omhoog, okerbalk trekt uit */
    .sectie:not(.hero, .pagina-kop) .kicker,
    .sectie:not(.hero, .pagina-kop) .kicker + h2,
    .sectie:not(.hero, .pagina-kop) .kicker ~ .intro,
    .sectie:not(.hero, .pagina-kop) .kicker + h2::after,
    .merkbelofte h2,
    .merkbelofte p {
      animation: omhoog linear both;
      animation-timeline: view();
      animation-range: var(--bereik-in);
    }
    .sectie:not(.hero, .pagina-kop) .kicker { animation-name: van-links; }
    .sectie:not(.hero, .pagina-kop) .kicker + h2::after {
      animation-name: balk-groeit;
      animation-range: entry 40% cover 45%;
      transform-origin: left;
    }
    .merkbelofte { overflow: clip; } /* geen horizontale scroll tijdens het inschuiven */
    .merkbelofte h2 { animation-name: van-links-ver; }
    .merkbelofte p { animation-name: van-rechts-ver; }

    /* Kaarten: schuiven schuin binnen, op donker vanaf de andere kant */
    .situatiekaart,
    .blok,
    .voorbeeld {
      animation: kaart-rechts linear both;
      animation-timeline: view();
      animation-range: var(--bereik-in);
    }
    .sectie--donker .situatiekaart { animation-name: kaart-links; }
    .blok, .voorbeeld { animation-name: omhoog-ver; }

    /* Aanpak: drie stappen komen na elkaar op, een okerlijn verbindt ze */
    .werkwijze-kort-rij { position: relative; }
    .werkwijze-kort-rij::before {
      content: "";
      position: absolute;
      z-index: 1;
      top: -1px; left: -1px; right: -1px;
      height: 6px;
      background: var(--actie);
      transform-origin: left;
      animation: balk-groeit linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 55%;
    }
    .stap-kort,
    .stap-kort .nummer::after {
      animation: omhoog-ver linear both;
      animation-timeline: view();
      animation-range: var(--bereik-in);
    }
    .stap-kort .nummer::after {
      animation-name: balk-groeit;
      transform-origin: left;
    }

    /* Werkwijze-pagina: stappen schuiven om en om van links en rechts */
    .stap {
      animation: van-links-ver linear both;
      animation-timeline: view();
      animation-range: var(--bereik-in);
    }
    .stap:nth-child(even) { animation-name: van-rechts-ver; }

    /* Garantie: grote kop zoomt aan, het raster schuift langzaam mee */
    .afspraken:has(.knoppenrij) {
      animation: raster-schuift linear both;
      animation-timeline: view();
    }
    .afspraken:has(.knoppenrij) .kicker + h2 { animation-name: aanzoomen; transform-origin: left bottom; }
    .afspraken li {
      animation: van-links-ver linear both;
      animation-timeline: view();
      animation-range: var(--bereik-in);
    }

    /* Contact: kop van links, knop van rechts */
    .contact .knoppenrij {
      animation: van-rechts-ver linear both;
      animation-timeline: view();
      animation-range: var(--bereik-in);
    }

    /* Rijen met drie kaarten: op brede schermen een zichtbare wachtrij */
    @media (min-width: 901px) {
      :is(.herkenning-rij, .blokken, .werkwijze-kort-rij) > :nth-child(2) { animation-range: entry 12% cover 48%; }
      :is(.herkenning-rij, .blokken, .werkwijze-kort-rij) > :nth-child(3) { animation-range: entry 24% cover 58%; }
    }
  }

  @keyframes omhoog { from { opacity: 0; translate: 0 48px; } }
  @keyframes omhoog-ver { from { opacity: 0; translate: 0 110px; } }
  @keyframes van-links { from { opacity: 0; translate: -64px 0; } }
  @keyframes van-rechts { from { opacity: 0; translate: 64px 0; } }
  @keyframes van-links-ver { from { opacity: 0; translate: -18vw 0; } }
  @keyframes van-rechts-ver { from { opacity: 0; translate: 18vw 0; } }
  @keyframes kaart-rechts { from { opacity: 0; translate: 22vw 60px; rotate: 3deg; } }
  @keyframes kaart-links { from { opacity: 0; translate: -22vw 60px; rotate: -3deg; } }
  @keyframes aanzoomen { from { opacity: 0; scale: .82; } }
  @keyframes balk-groeit { from { scale: 0 1; } }
  @keyframes voortgang { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes vlak-in { from { translate: 70% 0; } }
  /* transform i.p.v. translate: vlak-in animeert translate al op hetzelfde vlak */
  @keyframes vlak-wijkt { to { transform: translateY(-28vh); } }
  @keyframes hero-wijkt { to { opacity: .1; translate: 0 -14vh; } }
  @keyframes raster-schuift { from { background-position: 0 0; } to { background-position: 0 -216px; } }
}