/* =============================================
   KEYFRAME ANIMATIONS
   ============================================= */
@media (prefers-reduced-motion: no-preference) {

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  @keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
  }

  @keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
  }

  @keyframes slideUp {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Scroll Animation Classes ──────────────── */
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
  }

  .animate-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .animate-left.animated {
    opacity: 1;
    transform: translateX(0);
  }

  .animate-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .animate-right.animated {
    opacity: 1;
    transform: translateX(0);
  }

  .animate-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .animate-scale.animated {
    opacity: 1;
    transform: scale(1);
  }

  /* ── Stagger Delays ────────────────────────── */
  .stagger-1 { transition-delay: 0.1s; }
  .stagger-2 { transition-delay: 0.2s; }
  .stagger-3 { transition-delay: 0.3s; }
  .stagger-4 { transition-delay: 0.4s; }
  .stagger-5 { transition-delay: 0.5s; }
  .stagger-6 { transition-delay: 0.6s; }

  /* ── Named Animation Utilities ─────────────── */
  .anim-fade-up    { animation: fadeInUp    0.6s ease both; }
  .anim-fade-down  { animation: fadeInDown  0.6s ease both; }
  .anim-fade-left  { animation: fadeInLeft  0.6s ease both; }
  .anim-fade-right { animation: fadeInRight 0.6s ease both; }
  .anim-scale-in   { animation: scaleIn     0.5s ease both; }
  .anim-fade       { animation: fadeIn      0.5s ease both; }
  .anim-pulse      { animation: pulse       2s ease infinite; }
  .anim-bounce     { animation: bounceIn    0.6s ease both; }

  /* ── Hero entrance ─────────────────────────── */
  .hero__eyebrow { animation: fadeInDown 0.5s ease 0.1s both; }
  .hero__title   { animation: fadeInUp   0.6s ease 0.2s both; }
  .hero__subtitle{ animation: fadeInUp   0.6s ease 0.35s both; }
  .hero__ctas    { animation: fadeInUp   0.6s ease 0.5s both; }
  .hero__trust   { animation: fadeIn     0.6s ease 0.7s both; }

  /* ── Trust bar counter highlight ───────────── */
  .trust-bar__number.counted {
    animation: bounceIn 0.4s ease;
  }
}

/* ── Loading Spinner ─────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.spinner--dark {
  border-color: rgba(27,43,75,0.2);
  border-top-color: var(--wp-navy);
}
.spinner--sm { width: 14px; height: 14px; }
.spinner--lg { width: 32px; height: 32px; border-width: 3px; }

/* ── Page transition overlay ─────────────────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--wp-navy);
  z-index: var(--z-modal);
  pointer-events: none;
  opacity: 0;
}

/* =============================================
   REDUCED MOTION — disable everything
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-on-scroll,
  .animate-left,
  .animate-right,
  .animate-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero__eyebrow,
  .hero__title,
  .hero__subtitle,
  .hero__ctas,
  .hero__trust {
    animation: none !important;
    opacity: 1 !important;
  }

  .spinner {
    animation: none !important;
    border: 2px solid rgba(255,255,255,0.6);
  }
}