/* ============================================================
   Animations
   Fade-in on scroll with per-item stagger, image loading
   shimmer, and live status pulse.
   ============================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes shimmerGlow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 6, 0.4); }
  100% { box-shadow: 0 0 0 10px rgba(255, 77, 6, 0); }
}

.animate-in {
  animation: fadeInUp 600ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.fade-hidden {
  opacity: 0;
  transform: translateY(24px);
}
/* Stagger: items read --stagger-index and self-delay.
   Default no delay; CSS uses calc with var fallback to 0. */
.fade-hidden[data-stagger] {
  transition-delay: calc(var(--stagger-index, 0) * 60ms);
}

/* Image loading shimmer */
.img-loading {
  background: linear-gradient(110deg, #0c2649 30%, #143461 50%, #0c2649 70%);
  background-size: 200% 100%;
  animation: img-shimmer 1.8s ease-in-out infinite;
}
.img-loaded {
  animation: none;
  background: transparent;
}
@keyframes img-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-hidden,
  .animate-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}