/* =============================================================================
   ZENZAS ANIMATIONS
   IntersectionObserver classes, fade, slide-up, reduced-motion.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. INTERSECTION OBSERVER FADE-IN & SLIDE-UP
--------------------------------------------------------------------------- */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
  will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay helpers */
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }
.delay-5 { transition-delay: 500ms; }

/* ---------------------------------------------------------------------------
   2. KEYFRAME ANIMATIONS
--------------------------------------------------------------------------- */

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

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

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 25px rgba(37, 99, 235, 0.2);
  }
  50% {
    box-shadow: 0 0 45px rgba(37, 99, 235, 0.4);
  }
}

.glow-pulse {
  animation: pulseGlow 4s infinite ease-in-out;
}

/* ---------------------------------------------------------------------------
   3. PREFERS REDUCED MOTION
--------------------------------------------------------------------------- */

@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 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .glow-pulse {
    animation: none !important;
  }
}