/* ================================
   13. ANIMATIONS & KEYFRAMES
   ================================ */

   /* 3) Classe blinking-halo (existante) */
.blinking-halo {
  animation: blueHaloPulse 1.5s ease-in-out infinite;
}

/* 4) Classe pulse-white (existante), si vous aviez quelque chose comme : */
.pulse-white {
  animation: whitePulse 0.8s ease-in-out infinite alternate;
}

/* 5) Règle fusionnée pour le bouton “dé” en mode shake
      → on combine shakeRotate + blueHaloPulse pour garder le halo */
.btn-dice-small.shake {
  animation:
    shakeRotate 1s infinite ease-in-out,
    blueHaloPulse 1.5s infinite ease-in-out;
}

/* === CENTRER PARFAITEMENT LE TEXTE DANS LE CERCLE === */
.difficulty-ripple-container .center-circle,
.theme-ripple-container    .center-circle,
.constraint-ripple-container .center-circle {
  position: absolute;       /* comme tu avais déjà */
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  display: flex;            /* flex activé */
  align-items: center;      /* centre vertical */
  justify-content: center;  /* centre horizontal */
  transform: translate(-50%, -50%); /* recentre */
  padding: 0;               /* pas de padding */
  line-height: 1;           /* hauteur de ligne fixe */
}

@keyframes slideDownFade {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideUpFade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

/* Néon pour logos ou éléments glowy */
@keyframes neon-glow {
  0% {
    filter: drop-shadow(0 0 2px #0ff)
            drop-shadow(0 0 7px #0ff);
  }
  50% {
    filter: drop-shadow(0 0 10px #0ff)
            drop-shadow(0 0 7px #0ff);
  }
  100% {
    filter: drop-shadow(0 0 2px #0ff)
            drop-shadow(0 0 7px #0ff);
  }
}

/* Effet de clignotement pour l’intro */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Zoom-in pour l’intro */
@keyframes zoomIn {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* White pulse (boutons spéciaux) */
@keyframes whitePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,255,255,0.2); }
  50%      { box-shadow: 0 0 10px rgba(213,235,255,0.9); }
}

@keyframes blueHaloPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
  }
}

@keyframes spinGrow {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(720deg);
    opacity: 1;
  }
}

.reveal-spin-grow {
  margin-top: -70px;
  animation: spinGrow 0.7s ease-out forwards;
  transform-origin: center center;
}

/* classe à appliquer pour le halo clignotant */
.blinking-halo {
  animation: blueHaloPulse 1.5s ease-in-out infinite;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes beat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes roll-sprite {
  from { background-position: 0   0; }
  to   { background-position: 0  -500px; }
}

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

/* 4) Keyframes : on agrandit l’anneau jusqu’à scale(1.5) et on le rend transparent */
@keyframes rippleAnim {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* 4) Animation spécifique au thème, avec un scale final plus petit (1.5 au lieu de 2.5) */
@keyframes theme-ripple-animation {
  0% {
    transform: scale(0.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Keyframes partagées pour l’animation d’expansion/transparence */
@keyframes rippleAnim {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* On se repose sur le keyframe déjà défini plus haut : */
@keyframes rippleAnim {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* 1) Keyframes pour le halo clignotant (existant) */
@keyframes blueHaloPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
  }
}

/* 2) Keyframes pour la secousse par rotation */
@keyframes shakeRotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  20%, 60% {
    transform: rotate(-5deg);
  }
  40%, 80% {
    transform: rotate(5deg);
  }
}

@keyframes pulse {
  0%, 80%, 100% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.3);
    opacity: 1;
  }
}

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