/* Animations and Micro-interactions - HUB SCR */

/* Page Load Animation (Fade In Up) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  opacity: 0;
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Pulse Animation for interactive badges/indicators */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 199, 44, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 199, 44, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 199, 44, 0);
  }
}

.pulse-badge {
  animation: pulseGlow 2s infinite;
}

/* Hover effects for Cards */
.card-hover-effect {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.3s ease, 
              border-color 0.3s ease;
}

.card-hover-effect:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-accent) !important;
}

/* Hover effects for Images/Illustrations */
.zoom-hover-effect {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover-effect:hover .zoom-hover-effect {
  transform: scale(1.05);
}

/* Button arrow micro-interaction */
.btn-arrow-icon {
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-hover-arrow:hover .btn-arrow-icon {
  transform: translateX(4px);
}

/* Search bar focus pulse border */
.search-input-focus {
  transition: all 0.2s ease-in-out;
}

.search-input-focus:focus {
  box-shadow: 0 0 0 3px rgba(6, 36, 70, 0.15) !important;
}

/* Accessibility: reduce motion if user prefers it */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .pulse-badge,
  .card-hover-effect,
  .zoom-hover-effect,
  .btn-arrow-icon,
  .search-input-focus {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}