/* The hero sentence and actions fade in at once, with or without reduced motion: opacity only, no delay,
   so the WhatsApp button is never held back by an animation. They are visible by their own rule; the animation
   only starts them from 0 (backwards), so a user stylesheet that switches animations off still shows them. */
.hero [data-rise] { animation: appear var(--t-appear) var(--ease-out) backwards; }
@keyframes appear { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* Signature: the gold drawing from the logo draws itself, then the headline rises */
  .trazo path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 1500ms var(--ease-in-out) forwards;
  }
  .trazo path:nth-child(n+4) { animation-delay: 150ms; }
  .trazo path:nth-child(n+10) { animation-delay: 300ms; }
  .trazo path:nth-child(n+16) { animation-delay: 450ms; }
  .trazo path:last-child { animation-duration: 1800ms; animation-delay: 0ms; }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  /* The padding keeps accents (Ñ) and descenders inside the mask */
  .lines .line { overflow: hidden; padding-block: 0.14em 0.08em; margin-block: -0.14em -0.08em; }
  .lines .line > span { display: block; transform: translateY(145%); animation: line-up 900ms var(--ease-out) forwards; animation-delay: 150ms; }
  .lines .line + .line > span { animation-delay: 260ms; }
  @keyframes line-up { to { transform: none; } }

  /* Section parts arrive in reading order, once (reveal.js adds .is-in) */
  .reveal-ready [data-reveal] > * {
    opacity: 0; transform: translateY(20px);
    transition: opacity 450ms var(--ease-out), transform 650ms var(--ease-out);
  }
  .reveal-ready [data-reveal].is-in > * { opacity: 1; transform: none; }
  .reveal-ready [data-reveal].is-in > :nth-child(2) { transition-delay: 60ms; }
  .reveal-ready [data-reveal].is-in > :nth-child(3) { transition-delay: 120ms; }
  .reveal-ready [data-reveal].is-in > :nth-child(n+4) { transition-delay: 180ms; }
}

/* Reduced motion: the same moments as soft cross-fades, with no travel, scale or zoom */
@media (prefers-reduced-motion: reduce) {
  .trazo, .lines .line > span { opacity: 0; animation: fade 600ms ease forwards; }
  @keyframes fade { to { opacity: 1; } }
  .lines .line + .line > span { animation-delay: 100ms; }

  .reveal-ready [data-reveal] > * { opacity: 0; transition: opacity 400ms ease; }
  .reveal-ready [data-reveal].is-in > * { opacity: 1; }

  .nav--js .nav__list { transform: none; }
  .btn:active, .nav--js .nav__toggle:active, .scene:active, .bar--link:active, .social a:active { transform: none; }
  .scene:hover img, .service:hover .service__media img,
  .arrow-link:hover::after, .scene:hover .scene__more::after, .bar--link:hover .bar__more::after { transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Hero: the render settles from a slight zoom; from 768 px the headline slides down and
       hides behind the render's lower edge, leaving the work in view */
    .hero__media img {
      animation: hero-zoom linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }
    @keyframes hero-zoom {
      from { scale: 1.06; }
      to { scale: 1; }
    }
    /* Once fully behind the edge the headline is hidden for real, not left clipped under the next section */
    @keyframes hero-out { to { transform: translateY(100%); visibility: hidden; } }
    @media (min-width: 768px) {
      .hero__top {
        animation: hero-out linear both;
        animation-timeline: scroll(root);
        animation-range: 0 80vh;
      }
    }

    /* Project scenes: slow zoom-out while crossing the screen.
       .scene is overflow:hidden (a scroll container), so an anonymous view()
       on the img would measure against .scene itself and never move. The scene
       owns the timeline and the img follows it. */
    .scene { view-timeline: --scene block; }
    .scene picture {
      animation: scene-zoom linear both;
      animation-timeline: --scene;
      animation-range: cover 0% cover 100%;
    }
    @keyframes scene-zoom {
      from { scale: 1.08; }
      to { scale: 1; }
    }

    /* The closing name grows into place as the footer arrives */
    .site-footer__name {
      animation: name-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    @keyframes name-in {
      from { opacity: 0.4; transform: translateY(12%); }
      to { opacity: 1; transform: none; }
    }
  }
}