/* ==========================================================================
   Bewegingstaal — op de hele site aan (body.motion, zie header.php)
   --------------------------------------------------------------------------
   Alles hieronder werkt alleen onder body.motion én zonder
   prefers-reduced-motion. Scroll-animaties bovendien alleen in browsers
   met scroll-driven animations (@supports); daar regelt CSS de reveal en
   doet reveal.js niets. Elders blijft de JS-reveal (reveal.css) gewoon
   werken: per pagina en browser draait één systeem.

   Uitgangspunt: zonder animatie is alle inhoud zichtbaar. Alleen opacity,
   transform en clip-path bewegen, dus geen layout-verschuiving.
   ========================================================================== */

/* Leesvoortgang: standaard verborgen; alleen getoond waar hij kan bewegen. */
.reading-progress {
  display: none;
}

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

  /* ------------------------------------------------------------------------
     Hover en interactie
     ------------------------------------------------------------------------ */

  /* Kaart in een kaartenrij: tilt, petrol rand; met foto zoomt die licht in. */
  .motion .page-block__cards .service-card {
    transition:
      border-color var(--dur-2) var(--ease-plain),
      transform var(--dur-4) var(--ease-out),
      box-shadow var(--dur-4) var(--ease-plain);
  }

  .motion .page-block__cards .service-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-lift);
    transform: translateY(var(--lift-card));
  }

  .motion .service-card__img {
    transition: transform var(--dur-5) var(--ease-out);
  }

  .motion .service-card--media:hover .service-card__img {
    transform: scale(var(--zoom-media));
  }

  /* Lijstitem: tekst en nummer schuiven iets op (transform, geen padding). */
  .motion .split__list li > span,
  .motion .split__list li::before {
    transition: transform var(--dur-4) var(--ease-out);
  }

  .motion .split__list li:hover > span,
  .motion .split__list li:hover::before {
    transform: translateX(var(--shift-list));
  }

  /* Route: stap schuift iets op en kleurt petrol. */
  .motion .split__steps li {
    transition:
      color var(--dur-2) var(--ease-plain),
      transform var(--dur-4) var(--ease-out);
  }

  .motion .split__steps li:hover {
    color: var(--accent);
    transform: translateX(var(--space-1));
  }

  /* Tekstlink in de contactband: onderstreping tekent zich over de lijn. */
  .motion .cta-section__link {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 var(--border-width) no-repeat;
    background-origin: border-box;
    transition:
      background-size var(--dur-3) var(--ease-out),
      color var(--dur-2) var(--ease-plain);
  }

  .motion .cta-section__link:hover {
    background-size: 100% var(--border-width);
  }

  /* ------------------------------------------------------------------------
     Hero bij laden (keyframes, niet scroll-gestuurd)
     ------------------------------------------------------------------------ */

  @keyframes motion-rise {
    from {
      opacity: 0;
      transform: translateY(var(--space-6));
    }
  }

  @keyframes motion-fade {
    from {
      opacity: 0;
    }
  }

  @keyframes motion-wipe-down {
    from {
      clip-path: inset(0 0 100% 0);
    }
  }

  @keyframes motion-settle {
    from {
      transform: scale(var(--zoom-settle-from));
    }

    to {
      transform: scale(var(--zoom-settle-to));
    }
  }

  /* Lijnenraster: als laag die van boven naar beneden opent. */
  .motion .page-hero--media {
    background-image: none;
  }

  .motion .page-hero--media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(
      to right,
      color-mix(in srgb, var(--white) 5%, transparent) var(--border-width),
      transparent var(--border-width)
    );
    background-size: calc(100% / 8) 100%;
    animation: motion-wipe-down var(--dur-9) var(--ease-out) both;
    pointer-events: none;
  }

  /* Tekst komt getrapt omhoog; vervangt de scroll-reveal in de hero. */
  .motion .page-hero :is(.page-hero__back, .eyebrow, .page-hero__title, .page-hero__text, .page-hero__meta, .page-hero__links) {
    animation: motion-rise var(--dur-5) var(--ease-out) both;
    animation-timeline: auto;
  }

  .motion .page-hero .eyebrow           { animation-delay: var(--stagger); }
  .motion .page-hero .page-hero__title  { animation-delay: calc(2 * var(--stagger)); }
  .motion .page-hero .page-hero__text,
  .motion .page-hero .page-hero__meta,
  .motion .page-hero .page-hero__links  { animation-delay: calc(4 * var(--stagger)); }

  /* Foto komt vervagend omhoog, net als de tekst, en zakt in. */
  .motion .page-hero__media {
    animation: motion-rise var(--dur-8) var(--ease-out) var(--dur-1) both;
  }

  .motion .page-hero--banner .page-hero__media {
    animation-name: motion-fade;
  }

  .motion :is(.page-hero__img, .project-hero__img) {
    animation: motion-settle var(--dur-10) var(--ease-out) var(--dur-1) both;
  }

  /* Projecthero: de foto vult het scherm, dus alleen vervagen (een
     verschuiving zou een rand tonen); de tekst komt getrapt omhoog. */
  .motion .project-hero__media {
    animation: motion-fade var(--dur-8) var(--ease-out) both;
  }

  .motion .project-hero :is(.page-hero__back, .project-hero__title, .project-hero__meta) {
    animation: motion-rise var(--dur-5) var(--ease-out) both;
  }

  .motion .project-hero .project-hero__title { animation-delay: calc(2 * var(--stagger)); }
  .motion .project-hero .project-hero__meta  { animation-delay: calc(4 * var(--stagger)); }

  /* ------------------------------------------------------------------------
     Bij scrollen (scroll-driven animations)
     ------------------------------------------------------------------------ */

  @supports (animation-timeline: view()) {
    @keyframes motion-fade-up {
      from {
        opacity: 0;
        transform: translateY(var(--reveal-shift));
      }
    }

    @keyframes motion-draw {
      from {
        transform: scaleX(0);
      }
    }

    @keyframes motion-zoom-out {
      from {
        transform: scale(var(--zoom-reveal-from));
      }
    }

    @keyframes motion-draw-y {
      from {
        transform: scaleY(0);
      }
    }

    @keyframes motion-step-in {
      from {
        opacity: 0;
        transform: translateX(calc(-1 * var(--space-2)));
      }
    }

    @keyframes motion-progress {
      from {
        transform: scaleX(0);
      }

      to {
        transform: scaleX(1);
      }
    }

    /* Leesvoortgang: 2px lijn bovenaan, meet de hele pagina. */
    .motion .reading-progress {
      position: fixed;
      inset: 0 0 auto;
      z-index: calc(var(--z-header) + 1);
      display: block;
      height: var(--border-width-accent);
      background: var(--petrol-300);
      transform-origin: 0 50%;
      animation: motion-progress linear both;
      animation-timeline: scroll(root);
      pointer-events: none;
    }

    /* Reveal: fade omhoog op eigen positie in de scroll, kort gehouden zodat
       tekst al leesbaar is als hij ~100-150px in beeld staat (cover 12%);
       data-delay schuift het een klein stapje op (2% per stap). */
    .motion .reveal {
      animation: motion-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 12%;
    }

    .motion .reveal[data-delay="1"] { animation-range: entry 2% cover 14%; }
    .motion .reveal[data-delay="2"] { animation-range: entry 4% cover 16%; }
    .motion .reveal[data-delay="3"] { animation-range: entry 6% cover 18%; }
    .motion .reveal[data-delay="4"] { animation-range: entry 8% cover 20%; }

    /* Lijn van de eyebrow tekent zich (transform, vanaf links). */
    .motion .eyebrow.reveal::before {
      transform-origin: 0 50%;
      animation: motion-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 14%;
    }

    /* Zijfoto: komt vervagend omhoog, net als de tekst, en zoomt uit. */
    .motion .media-reveal {
      animation: motion-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 12%;
    }

    .motion .media-reveal img {
      animation: motion-zoom-out linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }

    /* Lijstitems één voor één (elk item heeft een eigen view-timeline). */
    .motion .split__list li {
      animation: motion-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 12%;
    }

    /* Route: de lijn tekent zich over de hoogte van de lijst (eigen
       view-timeline), de stappen schuiven één voor één in. */
    .motion .split__steps {
      view-timeline: --steps block;
    }

    .motion .split__steps::before {
      animation: motion-draw-y linear both;
      animation-timeline: --steps;
      animation-range: entry 20% cover 55%;
    }

    .motion .split__steps li {
      animation: motion-step-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 14%;
    }

    /* Kaarten en projectkaarten (ook de slider op de homepage); de tweede
       iets later. */
    .motion :is(.page-block__cards, .project-row, .projects__track) > li {
      animation: motion-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 12%;
    }

    .motion :is(.page-block__cards, .project-row, .projects__track) > li:nth-child(2) {
      animation-range: entry 3% cover 16%;
    }

    /* De lijst zelf heeft .reveal; de items bewegen nu, dus de lijst staat. */
    .motion .split__list.reveal {
      animation-name: none;
    }
  }
}