/* ============================================================
   ANIMATIONS
   Two sets of entrance animations used site-wide:

   1. .reveal / .reveal-delay-* — scroll-triggered fade-up for
      sections and cards (activated by IntersectionObserver in JS).

   2. .hero-in / .hero-in--* — staggered load-in animation for
      hero content elements, triggered immediately on page load.

   Reduced-motion media query disables both so users who prefer
   reduced motion see content immediately without any movement.
   ============================================================ */


/* ── Scroll reveal: initial hidden state ── */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Visible state added by IntersectionObserver in JS */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for sibling elements revealed at the same time */
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.30s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.60s; }


/* ── Hero load-in: initial hidden state ── */
.hero-in {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out);
}

/* Triggered when the hero section receives .is-ready (added by JS on rAF) */
.hero.is-ready .hero-in {
  opacity: 1;
  transform: translateY(0);
}

/* Cascading delays for each hero child: rating, title, sub, CTAs */
.hero-in--1 { transition-delay: 0.1s; }
.hero-in--2 { transition-delay: 0.26s; }
.hero-in--3 { transition-delay: 0.42s; }
.hero-in--4 { transition-delay: 0.56s; }
.hero-in--5 { transition-delay: 0.66s; }


/* ── Reduced motion: skip all animations instantly ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .service-card__list-item--value.is-shake {
    animation: none;
  }

  .footer-about__panel,
  .footer-about__content,
  .footer-about__chevron {
    transition: none;
  }
}