/* Custom Keyframe Animations */
@keyframes gradient-x {
  0%, 100% { 
    background-position: 0% 50%; 
  }
  50% { 
    background-position: 100% 50%; 
  }
}

@keyframes fade-in-up {
  from { 
    opacity: 0; 
    transform: translateY(30px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes fade-in {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

@keyframes width-expand {
  from { 
    width: 0; 
  }
  to { 
    width: 6rem; 
  }
}

@keyframes spin-slow {
  from { 
    transform: rotate(0deg); 
  }
  to { 
    transform: rotate(360deg); 
  }
}

@keyframes bounce-subtle {
  0%, 100% { 
    transform: translateY(0); 
  }
  50% { 
    transform: translateY(-5px); 
  }
}

@keyframes pulse-subtle {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.02); 
  }
}

/* Animation Classes */
.animate-gradient-x { 
  animation: gradient-x 3s ease infinite; 
}

.animate-fade-in-up { 
  animation: fade-in-up 0.8s ease forwards; 
}

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

.animate-width-expand { 
  animation: width-expand 1s ease forwards; 
}

.animate-spin-slow { 
  animation: spin-slow 8s linear infinite; 
}

.animate-bounce-subtle { 
  animation: bounce-subtle 2s ease-in-out infinite; 
}

.animate-pulse-subtle { 
  animation: pulse-subtle 2s ease-in-out infinite; 
}

/* Utility Classes */
.bg-size-300 { 
  background-size: 300%; 
}

.animation-delay-300 { 
  animation-delay: 0.3s; 
}

.animation-delay-500 { 
  animation-delay: 0.5s; 
}

.animation-delay-700 { 
  animation-delay: 0.7s; 
}

.animation-delay-1000 { 
  animation-delay: 1s; 
}