/* === ANIMATIONS AAA (METAL FX) === */

/* 1. Slam Effect (Arrivée lourde des questions) */
@keyframes slamIn {
  0% {
    opacity: 0;
    transform: scale(1.1) translateY(-20px);
  }
  70% {
    opacity: 1;
    transform: scale(1.02) translateY(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.anim-slam {
  animation: slamIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 2. Shake Effect (Mauvaise réponse / Impact) */
@keyframes heavyShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px) rotate(-1deg); }
  20%, 40%, 60%, 80% { transform: translateX(5px) rotate(1deg); }
}

.anim-shake {
  animation: heavyShake 0.4s ease-in-out;
  border-color: var(--error) !important;
  box-shadow: 0 0 20px rgba(198, 40, 40, 0.6) !important;
}

/* 3. Success Flash (Bonne réponse) */
@keyframes successPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(46, 125, 50, 0); }
  50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(46, 125, 50, 0.8); }
  100% { transform: scale(1); box-shadow: 0 0 15px rgba(46, 125, 50, 0.4); }
}

.anim-success {
  animation: successPulse 0.4s ease-out forwards;
  z-index: 10;
  border-color: var(--success) !important;
}

/* 4. Stage Fade (Transition fluide entre écrans) */
@keyframes stageFadeIn {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

.content-panel:not(.hidden) {
  animation: stageFadeIn 0.5s ease-out;
}

/* 5. Text Glitch (Pour le mode Hardcore ou erreurs) */
@keyframes glitchText {
  0% { text-shadow: 2px 0 var(--primary), -2px 0 blue; }
  25% { text-shadow: -2px 0 var(--primary), 2px 0 blue; }
  50% { text-shadow: 2px 0 var(--primary), -2px 0 blue; }
  75% { text-shadow: -2px 0 var(--primary), 2px 0 blue; }
  100% { text-shadow: 2px 0 var(--primary), -2px 0 blue; }
}

.warning-glitch {
  animation: glitchText 0.3s infinite;
  color: #fff;
}

/* 6. Loading Skeleton Pulse (Métal liquide) */
@keyframes metalPulse {
  0% { background-color: #1a1a1a; }
  50% { background-color: #2a2a2a; }
  100% { background-color: #1a1a1a; }
}

/* Override des transitions JS pour fluidité */
.answer {
  transition: transform 0.1s, background 0.2s, border-color 0.2s;
}

/* Ajout d'un effet de "Spotlight" sur la question active */
.question-area {
  position: relative;
  overflow: hidden;
}

.question-area::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}