/* ============================================================
   🔥 NOVIABOT MODAL ANIMATIONS - VERSION PRODUCTION
   NEXUS (signature) + STELLAR (epic moments)
   ============================================================ */

/* ========================================
   💎 ANIMATION NEXUS - NOVIABOT Signature
   Rotation + Scale + Cyan/Purple glow waves
   ======================================== */
@keyframes modalNexus {
  0% {
    opacity: 0;
    transform: scale(0.75) rotate(-8deg) translateY(60px);
    filter: blur(18px) hue-rotate(-30deg);
    box-shadow:
      0 0 0px rgba(145, 70, 255, 0),
      0 0 0px rgba(24, 231, 255, 0),
      inset 0 0 0px rgba(145, 70, 255, 0);
  }
  35% {
    opacity: 0.8;
    transform: scale(1.08) rotate(2deg) translateY(-12px);
    filter: blur(0px) hue-rotate(0deg);
    box-shadow:
      0 0 80px rgba(145, 70, 255, 0.8),
      0 0 120px rgba(24, 231, 255, 0.6),
      inset 0 0 40px rgba(24, 231, 255, 0.2);
  }
  65% {
    transform: scale(0.97) rotate(0deg) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateY(0);
    filter: blur(0px) hue-rotate(0deg);
    box-shadow:
      0 0 26px rgba(145, 70, 255, 0.4),
      0 0 45px rgba(24, 231, 255, 0.25),
      inset 0 0 20px rgba(24, 231, 255, 0.08);
  }
}

/* ========================================
   ⭐ ANIMATION STELLAR - Epic Moments
   Zoom cosmique depuis l'infini
   ======================================== */
@keyframes modalStellar {
  0% {
    opacity: 0;
    transform: perspective(2000px) translateZ(-1500px) scale(0.1);
    filter: blur(40px) brightness(5);
    box-shadow:
      0 0 300px rgba(145, 70, 255, 1),
      0 0 500px rgba(24, 231, 255, 1),
      inset 0 0 200px rgba(255, 255, 255, 1);
  }
  50% {
    opacity: 1;
    transform: perspective(2000px) translateZ(50px) scale(1.05);
    filter: blur(2px) brightness(1.3);
    box-shadow:
      0 0 80px rgba(145, 70, 255, 0.8),
      0 0 120px rgba(24, 231, 255, 0.6),
      inset 0 0 40px rgba(24, 231, 255, 0.3);
  }
  100% {
    opacity: 1;
    transform: perspective(2000px) translateZ(0px) scale(1);
    filter: blur(0px) brightness(1);
    box-shadow:
      0 0 26px rgba(145, 70, 255, 0.35),
      0 0 45px rgba(24, 231, 255, 0.18);
  }
}

/* ========================================
   🎬 BACKDROP ANIMATIONS
   ======================================== */
@keyframes backdropFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(10px);
  }
}

@keyframes backdropPulse {
  0% {
    opacity: 0;
    background: rgba(0, 0, 0, 0);
  }
  50% {
    background: rgba(145, 70, 255, 0.15);
  }
  100% {
    opacity: 1;
    background: rgba(0, 0, 0, 0.65);
  }
}

/* ========================================
   ✨ FERMETURE SMOOTH
   ======================================== */
@keyframes modalCloseOut {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: scale(0.88) translateY(30px);
    filter: blur(8px);
  }
}

@keyframes backdropFadeOut {
  from {
    opacity: 1;
    backdrop-filter: blur(10px);
  }
  to {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
}

/* ============================================================
   💫 APPLICATION AUX MODALES NOVIABOT
   ============================================================ */

/* ========== MODALES "EPIC MOMENTS" - STELLAR ========== */

/* BETA MODAL - L'entrée dans l'univers NOVIABOT */
.beta-backdrop[aria-hidden="false"] .beta-modal {
  animation: modalStellar 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.beta-backdrop[aria-hidden="false"] {
  animation: backdropPulse 0.6s ease-out;
}

/* LEGAL MODAL - Moment important et officiel */
#legalModal[aria-hidden="false"] .legal-modal-panel {
  animation: modalStellar 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

#legalModal[aria-hidden="false"] {
  animation: backdropPulse 0.6s ease-out;
}

/* PLAN MODAL - Choix de l'abonnement (moment décisif) */
#planModal[aria-hidden="false"] .modal__panel {
  animation: modalStellar 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

#planModal[aria-hidden="false"] {
  animation: backdropPulse 0.6s ease-out;
}

/* ========== MODALES "SIGNATURE NOVIABOT" - NEXUS ========== */

/* STARTER MODAL - Bienvenue signature */
#starterModal[aria-hidden="false"] .starter-modal-panel {
  animation: modalNexus 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#starterModal[aria-hidden="false"] {
  animation: backdropFadeIn 0.5s ease-out;
}

/* CONTACT MODAL - Interaction fluide */
.modal[aria-hidden="false"] .contact-panel {
  animation: modalNexus 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* MODO MODAL - Action rapide et stylée */
.modal[aria-hidden="false"] .modo-panel {
  animation: modalNexus 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* OFFER MODAL - Choix des options */
.offer-modal[aria-hidden="false"] .offer-modal__panel {
  animation: modalNexus 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.offer-modal[aria-hidden="false"] {
  animation: backdropFadeIn 0.5s ease-out;
}

/* ========================================
   🎯 ANIMATIONS DE FERMETURE
   ======================================== */

/* Ajouter la classe .closing à la modale quand elle se ferme */
.modal.closing,
.beta-backdrop.closing,
#starterModal.closing,
#legalModal.closing,
#planModal.closing,
.offer-modal.closing {
  animation: backdropFadeOut 0.3s ease-out !important;
}

.modal.closing .modal__panel,
.modal.closing .contact-panel,
.modal.closing .modo-panel,
.beta-backdrop.closing .beta-modal,
#starterModal.closing .starter-modal-panel,
#legalModal.closing .legal-modal-panel,
#planModal.closing .modal__panel,
.offer-modal.closing .offer-modal__panel {
  animation: modalCloseOut 0.3s ease-out !important;
}

/* ============================================================
   📱 OPTIMISATIONS MOBILE
   ============================================================ */

@media (max-width: 768px) {
  /* Animations plus courtes sur mobile (performance) */
  .beta-modal,
  .starter-modal-panel,
  .legal-modal-panel,
  .contact-panel,
  .modo-panel,
  .offer-modal__panel,
  #planModal .modal__panel {
    animation-duration: 0.5s !important;
  }

  /* Réduction des effets blur sur mobile */
  @keyframes modalNexus {
    0% {
      opacity: 0;
      transform: scale(0.85) rotate(-4deg) translateY(40px);
      filter: blur(10px);
    }
    35% {
      opacity: 0.8;
      transform: scale(1.05) rotate(1deg) translateY(-8px);
      filter: blur(0px);
    }
    100% {
      opacity: 1;
      transform: scale(1) rotate(0deg) translateY(0);
      filter: blur(0px);
    }
  }

  @keyframes modalStellar {
    0% {
      opacity: 0;
      transform: scale(0.3);
      filter: blur(20px) brightness(3);
    }
    50% {
      opacity: 1;
      transform: scale(1.04);
      filter: blur(0px) brightness(1.2);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      filter: blur(0px) brightness(1);
    }
  }
}

/* ============================================================
   ♿ ACCESSIBILITÉ - Respect des préférences utilisateur
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Animation simple pour les utilisateurs sensibles au mouvement */
  .beta-modal,
  .starter-modal-panel,
  .legal-modal-panel,
  .contact-panel,
  .modo-panel,
  .offer-modal__panel,
  #planModal .modal__panel {
    animation: simpleModalFade 0.3s ease-out !important;
  }

  @keyframes simpleModalFade {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
}