/* ==========================================================================
   ANIMATIONS
   Scroll-reveal utilities driven by IntersectionObserver in main.js,
   plus the keyframes used across components.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
  }
  .reveal-stagger > *:nth-child(1) { transition-delay: 0.05s; }
  .reveal-stagger > *:nth-child(2) { transition-delay: 0.15s; }
  .reveal-stagger > *:nth-child(3) { transition-delay: 0.25s; }
  .reveal-stagger > *:nth-child(4) { transition-delay: 0.35s; }
  .reveal-stagger > *:nth-child(5) { transition-delay: 0.45s; }

  .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.22,1,.36,1); }
  .reveal-left.is-visible { opacity: 1; transform: translateX(0); }
  .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.22,1,.36,1); }
  .reveal-right.is-visible { opacity: 1; transform: translateX(0); }
}

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

@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

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

@keyframes scrollLoop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes ripple {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

.ripple-anim { animation: ripple 2.4s cubic-bezier(.22,1,.36,1) infinite; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@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;
  }
}