/* Tailwind Extensions for Zenith Website */
/* This file contains custom utilities that complement the existing CSS */

@layer utilities {
  /* Custom hover effects */
  .hover-lift {
    @apply hover:scale-105 hover:shadow-lg transition-all duration-300;
  }
  
  .hover-glow {
    @apply hover:shadow-2xl hover:shadow-zenith-primary/20 transition-all duration-300;
  }
  
  /* Gradient backgrounds */
  .bg-zenith-gradient {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  }
  
  .bg-zenith-secondary-gradient {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
  }
  
  /* Glass morphism effects */
  .glass {
    @apply bg-white/10 backdrop-blur-sm border border-white/20;
  }
  
  .glass-dark {
    @apply bg-black/10 backdrop-blur-sm border border-black/20;
  }
  
  /* Custom button styles that work with existing CSS */
  .btn-modern {
    @apply inline-flex items-center justify-center px-6 py-3 text-base font-medium rounded-full transition-all duration-300 hover:scale-105 hover:shadow-lg;
  }
  
  .btn-primary-modern {
    @apply btn-modern bg-zenith-primary text-white hover:bg-zenith-primary/90 border border-zenith-primary hover:border-zenith-primary/90;
  }
  
  .btn-secondary-modern {
    @apply btn-modern bg-transparent text-zenith-primary border-2 border-zenith-primary hover:bg-zenith-primary hover:text-white;
  }
  
  /* Card enhancements */
  .card-modern {
    @apply bg-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100;
  }
  
  .card-dark-modern {
    @apply bg-zenith-dark rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-800;
  }
  
  /* Icon containers */
  .icon-container {
    @apply w-12 h-12 rounded-full flex items-center justify-center transition-all duration-300;
  }
  
  .icon-primary {
    @apply icon-container bg-zenith-primary/10 text-zenith-primary hover:bg-zenith-primary hover:text-white;
  }
  
  .icon-secondary {
    @apply icon-container bg-zenith-secondary/10 text-zenith-secondary hover:bg-zenith-secondary hover:text-white;
  }
  
  .icon-accent {
    @apply icon-container bg-zenith-accent/10 text-zenith-accent hover:bg-zenith-accent hover:text-white;
  }
  
  /* Animation helpers that work with AOS */
  .animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
  }
  
  .animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out forwards;
  }
  
  .animate-bounce-in {
    animation: bounceIn 0.8s ease-out forwards;
  }
  
  /* Loading states */
  .loading-shimmer {
    @apply animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%];
    animation: shimmer 1.5s infinite;
  }
  
  /* Improved focus states for accessibility */
  .focus-zenith {
    @apply focus:outline-none focus:ring-2 focus:ring-zenith-primary focus:ring-offset-2;
  }
  
  /* Typography enhancements */
  .text-gradient-primary {
    @apply bg-gradient-to-r from-zenith-primary to-zenith-secondary bg-clip-text text-transparent;
  }
  
  .text-gradient-accent {
    @apply bg-gradient-to-r from-zenith-accent to-orange-400 bg-clip-text text-transparent;
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}