/* CSS spécialisé pour Carousel3D - Chargé uniquement quand nécessaire */

/* Animations et transformations 3D */
@keyframes carousel-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes carousel-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

/* Classes spécifiques au carousel */
.carousel-container {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.carousel-card {
  backface-visibility: hidden;
  transform-origin: center;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-card:hover {
  transform: translateY(-8px) rotateY(5deg);
}

/* Optimisations pour mobile */
@media (max-width: 768px) {
  .carousel-card:hover {
    transform: translateY(-4px); /* Réduction des effets 3D sur mobile */
  }
  
  .carousel-container {
    perspective: 500px; /* Perspective réduite pour mobile */
  }
}

/* États de loading pour carousel */
.carousel-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: carousel-loading 1.5s infinite;
}

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