/* 
 * Micro-animations and Rich Aesthetics 
 * Used to give the site a professional, premium, and alive feeling. 
 */

/* Smooth Hover Lifts for Cards */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* Image Zooms */
.hover-zoom-img {
  overflow: hidden;
}

.hover-zoom-img img {
  transition: transform 0.5s ease;
}

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

/* Keyframe Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Animation Utilities */
.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.animate-fade-in {
  animation: fadeIn 1s ease forwards;
}

/* Staggered Delays for Grid Items */
.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; }

/* Ensure opacity is 0 initially for animated elements to avoid flicker */
.animate-fade-in-up, .animate-fade-in {
  opacity: 0;
}

/* Button Glow on Hover (Specifically for Electric Cyan) */
.btn-secondary.glow-hover:hover {
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.4);
}