/*
 * Aigenttra Theme — assets/css/animations.css
 *
 * CSS transitions and keyframe animations replacing Framer Motion.
 * Enqueued on every page by inc/enqueue.php as 'aigenttra-animations'.
 *
 * Strategy (mirrors the React Framer Motion usage):
 *   - Elements begin hidden via [data-animate-item] (set by template parts)
 *   - scroll-animations.js adds .is-visible via IntersectionObserver
 *   - CSS transitions handle the animated entry
 *   - Staggered children use --stagger-delay custom property
 *
 * @package Aigenttra
 * @since   1.0.0
 */

/* ── Reduced-motion: global override ────────────────────────────────────────
 *
 * WCAG 2.1 SC 2.3.3 (AAA) & SC 2.1.1 (AA) — users who prefer reduced motion
 * must not be subjected to decorative transitions or scroll-triggered reveals.
 *
 * This block must appear FIRST so it overrides any animation/transition rules
 * declared later in this file or in main.css. The !important flags are
 * intentional — they ensure motion is always suppressed regardless of
 * specificity wars between component-level styles.
 */
@media ( prefers-reduced-motion: reduce ) {

  /* Suppress scroll-reveal animation setup */
  [data-animate-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Suppress utility animation classes */
  .will-animate,
  .will-animate.fade-up,
  .will-animate.fade-in,
  .will-animate.scale-in {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Suppress activated-state transitions */
  .is-visible,
  .will-animate.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Suppress stagger delays */
  .stagger-children > * {
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}

/* ── Scroll-reveal base ──────────────────────────────────────────────────────
 *
 * Elements tagged [data-animate-item] start invisible.
 * scroll-animations.js adds .is-visible when they enter the viewport.
 */

[data-animate-item] {
  opacity: 0;
  transform: translateY( 20px );
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-animate-item].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Utility animation classes ───────────────────────────────────────────────
 *
 * Usage: add these alongside [data-animate-item] for variant entry styles.
 */

.will-animate {
  opacity: 0;
}

.will-animate.fade-up {
  transform: translateY( 24px );
}

.will-animate.fade-in {
  /* opacity-only reveal — no transform */
}

.will-animate.scale-in {
  transform: scale( 0.96 );
}

.will-animate.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ── Stagger children ────────────────────────────────────────────────────────
 *
 * Apply .stagger-children to a parent whose direct children should
 * appear sequentially.
 */

.stagger-children > * {
  transition-delay: calc( var( --stagger-delay, 80ms ) * ( var( --stagger-index, 0 ) ) );
}

.stagger-children > *:nth-child( 1 )  { --stagger-index: 0; }
.stagger-children > *:nth-child( 2 )  { --stagger-index: 1; }
.stagger-children > *:nth-child( 3 )  { --stagger-index: 2; }
.stagger-children > *:nth-child( 4 )  { --stagger-index: 3; }
.stagger-children > *:nth-child( 5 )  { --stagger-index: 4; }
.stagger-children > *:nth-child( 6 )  { --stagger-index: 5; }
.stagger-children > *:nth-child( 7 )  { --stagger-index: 6; }
.stagger-children > *:nth-child( 8 )  { --stagger-index: 7; }
.stagger-children > *:nth-child( 9 )  { --stagger-index: 8; }
.stagger-children > *:nth-child( 10 ) { --stagger-index: 9; }