/* ============================================================
   Coachgevraagd — bewegingslaag
   Contract: DESIGN.md §7. Drie harde regels, en deze laag houdt ze alle drie.

   1. ANIMATIE BEPAALT NOOIT ZICHTBAARHEID.
      Geen enkele keyframe hieronder start op `opacity: 0`. Waar we vervagen,
      vervagen we vanaf --reveal-vloer (0.42), nooit vanaf nul. Draait de
      animatie niet — oude browser, uitgezette animaties, een fout — dan staat
      de inhoud er gewoon, iets lager en iets lichter. Dat is het verschil
      tussen een pagina die minder mooi is en een pagina die leeg is.

      Dit is ook de reden dat hier geen JavaScript staat. De gangbare
      JS-bibliotheken voor scrollanimatie zetten inhoud eerst op opacity:0 en
      draaien hem daarna aan; faalt het script, dan blijft de pagina wit. De
      site draait met `script-src 'none'` en dat blijft zo.

   2. ALLEEN transform, opacity EN filter. Nooit width/height/top/left: die
      dwingen layout af en dat kost frames op een telefoon.

   3. prefers-reduced-motion ZET ALLES UIT. Onderaan, in één blok.

   Scroll-gedreven animatie (`animation-timeline: view()`) is progressieve
   verrijking. Waar de browser hem niet kent, valt alles terug op de gewone
   entree-animatie uit site.css.
   ============================================================ */

:root {
  /* De vloer waar een vervaging vanaf begint. Nooit 0 — zie regel 1. */
  --reveal-vloer: .42;
  --reveal-afstand: 18px;
}

/* ─────────── entree op scroll ───────────
   Elk .reveal-element komt van onderen omhoog terwijl het in beeld schuift.
   De timeline loopt van "de onderrand raakt de viewport" tot "het element
   staat 40% in beeld", zodat het klaar is vóór je het leest. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rijs {
      from { transform: translateY(var(--reveal-afstand)); opacity: var(--reveal-vloer); }
      to   { transform: none; opacity: 1; }
    }

    .reveal,
    .c-stap,
    .c-tier,
    .niche,
    .bezwaar,
    .gemeenten li {
      animation: rijs linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    /* De vertragingen uit site.css zijn tijdgebonden en betekenen niets op een
       scroll-timeline. Hier vertalen we ze naar een verschoven bereik: elk
       volgend element begint iets later in zijn eigen doorloop. Dat geeft de
       trapsgewijze intro zonder dat er iets op een klok wacht. */
    .reveal[data-vertraag="1"] { animation-range: entry 4% cover 44%; }
    .reveal[data-vertraag="2"] { animation-range: entry 8% cover 48%; }
    .reveal[data-vertraag="3"] { animation-range: entry 12% cover 52%; }
    .reveal[data-vertraag="4"] { animation-range: entry 16% cover 56%; }

    /* DE HERO VALT HIERBUITEN. Hij staat bij het laden al in beeld, dus een
       scroll-gedreven onthulling heeft er geen aanleiding voor — en erger:
       zijn bereik is dan nog niet doorlopen, waardoor de inhoud op een deel
       van zijn dekking blijft staan. Gemeten op 1280x900 vóór deze regel:
       .punten 0,914 en .acties 0,747. Een primaire knop op 75% leest als
       uitgeschakeld en haalt bovendien het contrast omlaag dat we elders
       precies hebben uitgerekend.

       De hero houdt dus de tijdgebonden entree uit site.css: die animeert
       alleen positie en raakt dekking nooit aan. */
    .hero .reveal {
      animation: binnen .6s var(--ease-out) both;
      animation-timeline: auto;
      animation-range: normal;
      opacity: 1;
    }

    /* Het nicheraster loopt per kolom in, niet allemaal tegelijk. */
    .niche:nth-child(3n + 2) { animation-range: entry 5% cover 45%; }
    .niche:nth-child(3n + 3) { animation-range: entry 10% cover 50%; }

    /* De gemeentelijst is dertig regels; die tellen we niet apart uit. Eén
       zachte doorloop over het hele blok leest als een register dat zich vult. */
    .gemeenten li { animation-range: entry 0% cover 25%; }
  }
}

/* ─────────── hero: het beeld ademt mee met de scroll ───────────
   Een lichte schaal terwijl de hero uit beeld loopt. Geen echte parallax met
   verschuivende lagen — dat trekt de aandacht naar de beweging in plaats van
   naar de tekst, en dit register is dicht, niet spectaculair. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hero-adem {
      from { transform: scale(1.06); }
      to   { transform: scale(1); }
    }
    [data-slot="hero"] .media__beeld {
      animation: hero-adem linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
      transform-origin: 50% 40%;
    }
  }
}

/* ─────────── kop: krijgt gewicht zodra je scrolt ───────────
   Op de eerste schermvulling zweeft de kop op de grond; daarna komt er een
   rand en een lichte schaduw onder. Zo weet je dat je in de pagina zit. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes kop-verankeren {
      from { box-shadow: 0 0 0 0 transparent; }
      to   { box-shadow: 0 1px 0 0 var(--border), 0 6px 20px -12px var(--accent-ink); }
    }
    .kop {
      animation: kop-verankeren linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120px;
    }
  }
}

/* ─────────── nichetegel: het beeld komt naar je toe ───────────
   Hover en focus doen hetzelfde, zodat een toetsenbordgebruiker dezelfde
   terugkoppeling krijgt. De rand onder de prijs is het merkdetail: hij loopt
   van grijs naar de actiekleur, wat het beslispunt markeert zonder een tweede
   knop te suggereren. */
.niche picture { transition: border-color var(--dur-base) var(--ease-out); }
.niche__beeld { transition: transform var(--dur-slow) var(--ease-out); }
.niche__prijs { transition: border-color var(--dur-base) var(--ease-out),
                            color var(--dur-base) var(--ease-out); }

.niche:hover .niche__beeld,
.niche:focus-within .niche__beeld { transform: scale(1.045); }
.niche:hover picture,
.niche:focus-within picture { border-color: var(--color-primary); }
.niche:hover .niche__prijs,
.niche:focus-within .niche__prijs { border-top-color: var(--color-cta); color: var(--color-cta); }

/* ─────────── sectiebeeld: dezelfde beweging, andere aanleiding ───────────
   Geen hover hier (het is geen doel), dus alleen de scrolldoorloop. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-slot="sectie"] .media__beeld {
      animation: hero-adem linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 70%;
      transform-origin: 50% 50%;
    }
  }
}

/* ─────────── prijskaart: lichte lift, en de uitgelichte staat al hoger ─────── */
.c-tier { transition: transform var(--dur-base) var(--ease-out),
                      border-color var(--dur-base) var(--ease-out),
                      box-shadow var(--dur-base) var(--ease-out); }
.c-tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.c-tier--uitgelicht:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }

/* ─────────── knop: indrukken voelt als indrukken ─────────── */
.c-knop { transition: background-color var(--dur-fast) var(--ease-out),
                      border-color var(--dur-fast) var(--ease-out),
                      color var(--dur-fast) var(--ease-out),
                      transform var(--dur-fast) var(--ease-out); }
.c-knop:active { transform: translateY(1px); }

/* ─────────── vraag-en-antwoord: de haarlijn licht op ───────────
   Het enige blok waar de pagina echt vertrouwen verdient, dus het mag reageren
   op aandacht — maar met een lijn, niet met een vlak. */
.bezwaar { transition: border-top-color var(--dur-base) var(--ease-out); }
.bezwaar:hover { border-top-color: var(--color-primary); }

/* ─────────── de merkregels in de kop tikken aan bij hover ───────────
   Drie regels, waarvan er één van jou is. Bij hover schuift de middelste
   minimaal uit — dezelfde gedachte als het merkteken zelf, in beweging. */
.merk__regel { transition: transform var(--dur-base) var(--ease-out); }
.merk:hover .merk__regel--jij { transform: translateX(3px); }

/* ─────────── alles uit bij reduced motion ───────────
   Eén blok, aan het eind, zonder uitzonderingen. Wat hierboven staat is
   verrijking; wie het niet wil of niet aankan, krijgt de pagina stil. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .c-stap, .c-tier, .niche, .bezwaar, .gemeenten li,
  .kop, [data-slot="hero"] .media__beeld, [data-slot="sectie"] .media__beeld {
    animation: none !important;
  }
  .niche__beeld, .niche picture, .niche__prijs, .c-tier, .c-knop,
  .bezwaar, .merk__regel {
    transition: none !important;
  }
  .niche:hover .niche__beeld, .niche:focus-within .niche__beeld,
  .c-tier:hover, .c-tier--uitgelicht:hover, .c-knop:active,
  .merk:hover .merk__regel--jij {
    transform: none !important;
  }
}