/* The Matchday — Motion utilities
 *
 * Scroll-reveal: elements start hidden, fade in when in viewport.
 * Wrapped in @layer components so motion rules sit at the same specificity
 * tier as component styles (declared order in global.css).
 *
 * `will-change` is set during the initial hidden state to hint the browser
 * to promote the layer, then released to `auto` once the reveal completes —
 * avoids permanently pinned compositor layers (memory cost).
 *
 * `prefers-reduced-motion` is honored explicitly here in addition to the
 * blanket override in reset.css, so the [data-reveal] elements remain
 * visible (opacity:1) even when global transition-duration is forced to ~0ms.
 */

@layer components {

  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--mt-dur-slow) var(--mt-ease-out),
                transform var(--mt-dur-slow) var(--mt-ease-out);
    will-change: opacity, transform;
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto; /* release compositor layer after reveal completes */
  }

  [data-reveal].stagger > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--mt-dur-base) var(--mt-ease-out),
                transform var(--mt-dur-base) var(--mt-ease-out);
  }
  [data-reveal].is-visible.stagger > * { opacity: 1; transform: translateY(0); }
  [data-reveal].is-visible.stagger > *:nth-child(1) { transition-delay: 80ms; }
  [data-reveal].is-visible.stagger > *:nth-child(2) { transition-delay: 160ms; }
  [data-reveal].is-visible.stagger > *:nth-child(3) { transition-delay: 240ms; }
  [data-reveal].is-visible.stagger > *:nth-child(n+4) { transition-delay: 320ms; }

  /* Explicit reduced-motion handling — overrides initial hidden state so
   * the content is visible immediately, no animation. Defensive: don't rely
   * solely on the reset.css blanket rule (which forces 0ms duration but
   * doesn't reset opacity/transform). */
  @media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal].is-visible,
    [data-reveal].stagger > *,
    [data-reveal].is-visible.stagger > * {
      opacity: 1;
      transform: none;
      transition: none;
      animation: none;
      will-change: auto;
    }
    [data-reveal].is-visible.stagger > *:nth-child(n) { transition-delay: 0ms; }
  }

} /* end @layer components */