/**
 * Blue Ridge Core Theme — Animation
 * See docs/design-system/15-animation.md for full rationale.
 *
 * Rule: only transform/opacity are ever animated (compositor-friendly,
 * doesn't trigger layout/paint). No duration in this system exceeds 280ms.
 */

.fade-in {
  animation: brc-fade-in var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease-out) both;
}

@keyframes brc-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.transition-color {
  transition: color var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out),
              background-color var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}

.transition-transform {
  transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}

/**
 * prefers-reduced-motion — applied once, globally, here. No other file in
 * this system should re-implement this query.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}