/**
 * ANIMATIONS AVANCÉES POUR LE HERO BANNER
 * Système d'animations progressives et fluides
 */

/* ===== ANIMATIONS D'APPARITION PROGRESSIVES ===== */

/* Animation du badge avec effet de révélation */
@keyframes badgeReveal {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
    filter: blur(10px);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-10px) scale(0.95);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Animation du titre avec effet de glissement et révélation */
@keyframes titleReveal {
  0% {
    opacity: 0;
    transform: translateY(50px) translateX(-20px);
    background-position: 0% 50%;
  }
  50% {
    opacity: 0.8;
    transform: translateY(10px) translateX(-5px);
    background-position: 50% 50%;
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
    background-position: 100% 50%;
  }
}

/* Animation du paragraphe avec effet de fondu et montée */
@keyframes subtitleReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(5px);
  }
  60% {
    opacity: 0.6;
    transform: translateY(5px);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Animation des boutons avec effet de zoom et apparition */
@keyframes buttonReveal {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    box-shadow: 0 0 0 rgba(138, 76, 255, 0);
  }
  70% {
    opacity: 0.8;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 30px rgba(138, 76, 255, 0.3);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 25px rgba(138, 76, 255, 0.4);
  }
}

/* Animation des statistiques avec effet de compteur */
@keyframes statsReveal {
  0% {
    opacity: 0;
    transform: translateY(25px) scale(0.95);
  }
  50% {
    opacity: 0.7;
    transform: translateY(5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animation de la vidéo avec effet de zoom et rotation */
@keyframes videoReveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.9) rotateY(15deg);
    filter: blur(8px);
  }
  60% {
    opacity: 0.8;
    transform: translateY(10px) scale(0.98) rotateY(5deg);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateY(0deg);
    filter: blur(0);
  }
}

/* Animation du scroll indicator avec effet de pulsation */
@keyframes scrollIndicatorReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 0.6;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== ANIMATIONS CONTINUES ===== */

/* Animation de pulsation pour le halo du badge */
@keyframes badgeGlowPulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(15px);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
    filter: blur(12px);
  }
}

/* Animation de flottement pour les éléments 3D */
@keyframes floatElements {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(1deg);
  }
  66% {
    transform: translateY(5px) rotate(-1deg);
  }
}

/* Animation de brillance pour le titre */
@keyframes titleShine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* ===== APPLICATION DES ANIMATIONS ===== */

/* Badge avec animation de révélation */
.hero-badge {
  animation: badgeReveal 1.2s ease-out 0.2s both;
}

.hero-badge .badge-glow {
  animation: badgeGlowPulse 3s ease-in-out infinite;
}

/* Titre avec animation de révélation */
.hero-title {
  animation: titleReveal 1.5s ease-out 0.4s both;
  background-size: 200% 200%;
}

.hero-title .title-line-1 {
  animation: titleReveal 1.2s ease-out 0.6s both;
}

.hero-title .title-line-2 {
  animation: titleReveal 1.2s ease-out 0.8s both;
}

/* Paragraphe avec animation de révélation */
.hero-subtitle {
  animation: subtitleReveal 1.3s ease-out 1s both;
}

/* Boutons avec animation de révélation */
.hero-buttons {
  animation: buttonReveal 1.4s ease-out 1.2s both;
}

/* Statistiques avec animation de révélation */
.hero-stats {
  animation: statsReveal 1.3s ease-out 1.4s both;
}

.hero-stats .stat-item {
  animation: statsReveal 1.2s ease-out both;
}

.hero-stats .stat-item:nth-child(1) {
  animation-delay: 1.6s;
}

.hero-stats .stat-item:nth-child(2) {
  animation-delay: 1.8s;
}

.hero-stats .stat-item:nth-child(3) {
  animation-delay: 2s;
}

/* Vidéo avec animation de révélation */
.video-showcase-container {
  animation: videoReveal 1.6s ease-out 1.8s both;
}

/* Éléments 3D avec animation de flottement */
.video-3d-elements {
  animation: floatElements 8s ease-in-out infinite;
}

.video-frame-3d-element {
  animation: floatElements 6s ease-in-out infinite;
}

.video-frame-3d-element.frame-1 {
  animation-delay: 0s;
}

.video-frame-3d-element.frame-2 {
  animation-delay: 2s;
}

.video-frame-3d-element.frame-3 {
  animation-delay: 4s;
}

/* Scroll indicator avec animation de révélation */
.scroll-indicator {
  animation: scrollIndicatorReveal 1.2s ease-out 2.2s both;
}

/* ===== EFFETS DE HOVER AVANCÉS ===== */

/* Hover sur le badge */
.hero-badge:hover .badge-text {
  transform: scale(1.05);
  box-shadow: 0 8px 35px rgba(138, 76, 255, 0.5);
  transition: all 0.3s ease;
}

.hero-badge:hover .badge-glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
  filter: blur(10px);
  transition: all 0.3s ease;
}

/* Hover sur les boutons */
.hero-buttons .btn-contact:hover,
.hero-buttons .btn-creations:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 40px rgba(138, 76, 255, 0.6);
  transition: all 0.3s ease;
}

/* Hover sur les statistiques */
.hero-stats .stat-item:hover {
  transform: translateY(-5px) scale(1.05);
  transition: all 0.3s ease;
}

/* Hover sur la vidéo */
.video-showcase-frame:hover {
  transform: scale(1.02);
  transition: all 0.4s ease;
}

/* ===== RESPONSIVE ANIMATIONS ===== */

@media (max-width: 768px) {
  /* Réduire les animations sur mobile */
  .hero-badge,
  .hero-title,
  .hero-subtitle,
  .hero-buttons,
  .hero-stats,
  .video-showcase-container {
    animation-duration: 0.8s;
  }
  
  /* Désactiver les animations complexes sur mobile */
  .video-3d-elements,
  .video-frame-3d-element {
    animation: none;
  }
}

/* ===== ACCESSIBILITÉ ===== */

@media (prefers-reduced-motion: reduce) {
  /* Désactiver toutes les animations si l'utilisateur préfère les réduire */
  .hero-badge,
  .hero-title,
  .hero-subtitle,
  .hero-buttons,
  .hero-stats,
  .video-showcase-container,
  .scroll-indicator {
    animation: none;
  }
  
  /* Garder seulement les transitions essentielles */
  .hero-badge:hover .badge-text,
  .hero-buttons .btn-contact:hover,
  .hero-buttons .btn-creations:hover {
    transition: opacity 0.2s ease;
  }
}