/* ==========================================================================
   Animations: only transforms and fades – no colour effects.
   Everything is disabled for users who prefer reduced motion.
   ========================================================================== */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rise-in {
  from {
    transform: translateY(12%);
  }

  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero: staggered fade-in on page load */
  .fade-in {
    animation: fade-up 700ms var(--ease-out) both;
  }

  .fade-in:nth-child(2) { animation-delay: 100ms; }
  .fade-in:nth-child(3) { animation-delay: 200ms; }
  .fade-in:nth-child(4) { animation-delay: 300ms; }

  .hero__image img {
    animation: rise-in 1200ms var(--ease-out) both;
  }

  /* Reveal on scroll – pure CSS, only in browsers with scroll-driven animations */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox:target .lightbox__figure {
    animation: zoom-in 250ms var(--ease-out) both;
  }
}