/* Beweging: alles wat op scroll of bij het laden in beeld komt.
   Enkel actief als de bezoeker geen "minder beweging" heeft ingesteld;
   zonder beweging staat alles gewoon meteen op zijn plaats.

   De secties krijgen .is-visible van js/main.js zodra ze in beeld komen
   (voor de lijnen); elk tekstblok krijgt .tekst en apart .is-in. */

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Tekst schuift omhoog en wordt zichtbaar ----------
     js/main.js geeft elk tekstblok onder de hero de klasse .tekst en zet
     .is-in zodra het in beeld komt. Blokken die samen in beeld komen,
     krijgen daar een oplopende vertraging bij, zodat ze na elkaar volgen. */
  .tekst {
    opacity: 0;
    transform: translateY(2.5rem);
    transition:
      opacity var(--duur-tekst) var(--ease-uit),
      transform var(--duur-tekst) var(--ease-uit);
  }

  .tekst.is-in {
    opacity: 1;
    transform: none;
  }

  /* ---------- Titels: de letters komen één voor één uit hun woord omhoog ----------
     js/main.js (setupKoppen) splitst elke .kop in woorden en letters en zet
     .is-in zodra de titel in beeld komt; --i is de plaats van de letter. */
  .kop.is-gesplitst .kop__letter {
    transform: translateY(110%) rotate(6deg);
    transform-origin: 0 100%;
    transition: transform var(--duur-kop) var(--ease-uit);
    transition-delay: calc(var(--i, 0) * var(--stap-letter));
  }

  .kop.is-gesplitst.is-in .kop__letter {
    transform: none;
  }

  /* ---------- Statement: de woorden lichten op terwijl je scrolt ----------
     js/main.js (setupStatement) zet per woord --aan (0 tot 1). */
  .statement.is-gesplitst .statement__woord {
    opacity: calc(0.15 + 0.85 * var(--aan, 0));
    transition: opacity 120ms linear;
  }

  /* ---------- Beelden: openen van onder naar boven en zoomen uit ---------- */
  .reveal .beeld--onthul {
    clip-path: inset(100% 0 0 0 round var(--radius-md));
    transition: clip-path calc(var(--duur-tekst) * 1.2) var(--ease-uit) 150ms;
  }

  .reveal .beeld--onthul img {
    transform: scale(1.25);
    transition: transform calc(var(--duur-tekst) * 1.6) var(--ease-uit) 150ms;
  }

  .reveal.is-visible .beeld--onthul {
    clip-path: inset(0 0 0 0 round var(--radius-md));
  }

  .reveal.is-visible .beeld--onthul img {
    transform: none;
  }

  /* daarna weer de gewone hover-zoom */
  .reveal.is-visible .nieuws-item:hover .beeld--onthul img {
    transform: scale(1.04);
    transition-delay: 0s;
    transition-duration: var(--duur-beeld);
  }

  /* ---------- Lijnen trekken zich van links naar rechts ---------- */
  .reveal .merkgroep h3,
  .reveal .galerij__groep h3,
  .reveal .contact__uren {
    border-color: transparent;
    background-image: linear-gradient(var(--lijn-sterk), var(--lijn-sterk));
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size calc(var(--duur-tekst) * 1.4) var(--ease-uit) 300ms;
  }

  .reveal .merkgroep h3 {
    background-image: linear-gradient(var(--lijn-op-oranje), var(--lijn-op-oranje));
  }

  .reveal .merkgroep h3,
  .reveal .galerij__groep h3 {
    background-position: left bottom;
  }

  .reveal .contact__uren {
    background-position: left top;
  }

  .reveal.is-visible .merkgroep h3,
  .reveal.is-visible .galerij__groep h3,
  .reveal.is-visible .contact__uren {
    background-size: 100% 1px;
  }

  /* ---------- Cadeaubon: de bonnen waaieren open ----------
     Ze liggen eerst recht op elkaar, in het midden tussen hun eindplaatsen, en
     schuiven uit elkaar zodra het beeld .is-in krijgt (js/main.js, setupTekst). */
  .cadeaubon__beeld.tekst .bon {
    transition: transform calc(var(--duur-tekst) * 1.3) var(--ease-uit) 250ms;
  }

  .cadeaubon__beeld.tekst:not(.is-in) .bon {
    --bon-hoek: 0deg;
  }

  .cadeaubon__beeld.tekst:not(.is-in) .bon--omslag {
    --bon-x: 20.5cqi;
    --bon-y: 19cqi;
  }

  .cadeaubon__beeld.tekst:not(.is-in) .bon--kaart {
    --bon-x: -20.5cqi;
    --bon-y: -19cqi;
  }

  /* ---------- Merken: de banden schuiven traag voorbij ----------
     js/main.js zet de lijst tweemaal in het spoor en geeft --n (aantal merken)
     mee; één lijstlengte verschuiven = één lus. Stilstaan bij hover of focus. */
  .merkband__spoor {
    animation: merkband calc(var(--n, 12) * var(--merk-tempo)) linear infinite;
  }

  .merkband--rechts .merkband__spoor {
    animation-direction: reverse;
  }

  .no-js .merkband__spoor,
  .merkband__spoor.is-stil {
    animation: none;
  }

  .merkband:hover .merkband__spoor,
  .merkband:focus-within .merkband__spoor {
    animation-play-state: paused;
  }

  @keyframes merkband {
    to {
      transform: translateX(-50%);
    }
  }

  /* ---------- Carrousel: vloeiend schuiven ---------- */
  .carrousel__spoor {
    scroll-behavior: smooth;
  }

  /* ---------- Open: de stip ademt ---------- */
  .status.is-open .status__stip::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--succes);
    animation: stip 2s var(--ease) infinite;
  }

  @keyframes stip {
    to {
      opacity: 0;
      transform: scale(3);
    }
  }

  /* ---------- Hero bij het laden: de intro van het logo ----------
     Keyframes bevatten enkel de beginstand; de eindstand is de gewone stijl. */

  /* 1. de letters van de naam komen één voor één van onder op uit hun masker */
  .hero__logo .teken {
    animation: logo-teken var(--t-letter) var(--ease-uit) both;
    animation-delay: calc(var(--t-letter-start) + var(--i, 0) * var(--t-letter-stap));
  }

  /* 2. de slogan loopt open vanuit het midden: elk teken schuift van --dx naar
     zijn plaats (de afstand staat in het pad, gezet door tools/maak-logo.py) */
  .hero__logo .slogan-teken {
    animation: logo-slogan var(--t-slogan) var(--ease-uit) var(--t-slogan-start) both;
  }

  /* 3. het videovenster komt omhoog, 4. de hoeken faden in */
  .hero__venster {
    animation: hero-venster var(--t-venster) var(--ease-uit) var(--t-venster-start) both;
  }

  .hero__hoek {
    animation: hero-hoek var(--t-hoek) var(--ease-uit) var(--t-hoek-start) both;
  }

  .hero__hoek + .hero__hoek {
    animation-delay: calc(var(--t-hoek-start) + 120ms);
  }

  /* de korrel trilt zachtjes, zoals op film */
  .hero__korrel {
    animation: korrel 900ms steps(5) infinite;
  }

  @keyframes logo-teken {
    from {
      transform: translateY(115%);
    }
  }

  @keyframes logo-slogan {
    from {
      opacity: 0;
      transform: translateX(calc(var(--dx, 0) * 1px));
    }
  }

  @keyframes hero-venster {
    from {
      opacity: 0;
      transform: translateY(3rem);
    }
  }

  @keyframes hero-hoek {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
  }

  @keyframes korrel {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-1rem, 0.5rem); }
    40% { transform: translate(0.75rem, -1rem); }
    60% { transform: translate(-0.5rem, 1rem); }
    80% { transform: translate(1rem, 0.25rem); }
  }
}

/* Zonder beweging: geen hero die blijft staan, het venster blijft klein; het menu
   verschijnt meteen, zonder schuiven of vertraging; de band staat stil */
@media (prefers-reduced-motion: reduce) {
  .hero {
    height: auto;
  }

  .hero__plak {
    position: relative;
  }

  .band__rij {
    transform: none !important;
  }

  .nav__paneel,
  .nav__link,
  .nav__voet,
  .nav__toggle-lijnen i,
  .nav__toggle-tekst span {
    transition: none !important;
  }
}

/* Zonder JavaScript: geen scroll die het venster opent, dus ook geen lange hero */
.no-js .hero {
  height: auto;
}

.no-js .hero__plak {
  position: relative;
}