/* CSS NON-CRITIQUE - Chargé de façon différée pour optimiser LCP/FCP */
/* Copie depuis client/src/styles/non-critical.css pour compatibilité production */

/* === ANIMATIONS AVANCÉES === */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounce-in {
  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);
  }
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* === CLASSES D'ANIMATION === */
.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out;
}

.animate-slide-in-left {
  animation: slide-in-left 0.6s ease-out;
}

.animate-bounce-in {
  animation: bounce-in 0.8s ease-out;
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

.animate-gradient {
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

/* === EFFETS VISUELS AVANCÉS === */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.dark .glass-effect {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.neon-glow {
  box-shadow: 
    0 0 5px hsl(var(--primary)),
    0 0 10px hsl(var(--primary)),
    0 0 15px hsl(var(--primary)),
    0 0 20px hsl(var(--primary));
}

.text-shadow-lg {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* === CARTES PREMIUM === */
.premium-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.premium-card:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.15),
    0 10px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.premium-card-popular {
  background: linear-gradient(145deg, #ffffff 0%, #f3e6ff 100%);
  box-shadow: 
    0 15px 40px rgba(146, 5, 252, 0.2),
    0 6px 12px rgba(146, 5, 252, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(146, 5, 252, 0.3);
}

.premium-card-popular:hover {
  transform: translateY(-10px);
  box-shadow: 
    0 30px 60px rgba(146, 5, 252, 0.25),
    0 12px 24px rgba(146, 5, 252, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* === MOBILE SPECIFIC OPTIMIZATIONS === */
@media (max-width: 768px) {
  .premium-card:hover,
  .premium-card-popular:hover {
    transform: none; /* Désactiver les hover effects sur mobile */
  }
}

/* === ACCESSIBILITY IMPROVEMENTS === */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up,
  .animate-slide-in-left,
  .animate-bounce-in,
  .animate-pulse-slow,
  .animate-gradient {
    animation: none;
  }
  
  .premium-card:hover,
  .premium-card-popular:hover {
    transform: none;
  }
}