/* ============================================================
   HOPE DESIGN SYSTEM — animations.css
   Scroll + load reveals (inspired by GSAP scroll patterns)
   Requires: tokens.css
   ============================================================ */

/* ----------------------------------------------------------
   GLOBAL THEME TRANSITION
   Restricts to paint-only properties (no layout, no transform)
   so the browser can handle theme switches on the compositor
   thread without triggering reflow.
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  transition:
    background-color  var(--duration-slow) var(--ease-in-out),
    color             var(--duration-slow) var(--ease-in-out),
    border-color      var(--duration-slow) var(--ease-in-out),
    box-shadow        var(--duration-slow) var(--ease-in-out);
}

/* The hero dark-image layer uses its own opacity transition —
   exclude it from the global rule to avoid accidental overrides. */
.hero::after {
  transition: opacity var(--duration-slow) var(--ease-in-out) !important;
}

@media (prefers-reduced-motion: no-preference) {
  /* Scroll-triggered & load-triggered base */
  .reveal {
    opacity: 0;
    transform: translate3d(0, 48px, 0) scale(0.97);
    transition:
      opacity   0.85s var(--ease-out),
      transform 0.85s var(--ease-out);
    will-change: opacity, transform;
  }

  .reveal--from-top {
    transform: translate3d(0, -28px, 0) scale(1);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  /* Staggered load group (hero, etc.) */
  .reveal-group .reveal-item {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition:
      opacity   0.9s var(--ease-out),
      transform 0.9s var(--ease-out);
  }

  .reveal-group.is-visible .reveal-item:nth-child(1) { transition-delay: 120ms; }
  .reveal-group.is-visible .reveal-item:nth-child(2) { transition-delay: 220ms; }
  .reveal-group.is-visible .reveal-item:nth-child(3) { transition-delay: 320ms; }
  .reveal-group.is-visible .reveal-item:nth-child(4) { transition-delay: 420ms; }
  .reveal-group.is-visible .reveal-item:nth-child(5) { transition-delay: 520ms; }

  .reveal-group.is-visible .reveal-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Snap all animations and transitions for users who prefer reduced motion */
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}