/* ═══════════════════════════════════════════════
   ANIMATIONS.CSS — Toutes les keyframes
   Questions pour un Champion
═══════════════════════════════════════════════ */

/* ── ENTRÉES DE PAGE ── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes headerIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── COMPOSANTS ── */
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0); }
  65%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes lineGrow {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes subIn {
  from { opacity: 0; letter-spacing: .4em; }
  to   { opacity: 1; letter-spacing: .18em; }
}

/* ── CHIFFRE GÉANT MANCHE ── */
@keyframes numIn {
  0%   { opacity: 0; transform: scale(0.3) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.08) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── TITRE INTRO MANCHE ── */
@keyframes titleIn {
  0%   { opacity: 0; transform: translateY(16px) skewX(-2deg); }
  100% { opacity: 1; transform: translateY(0) skewX(0); }
}

/* ── JOUEUR APPARITION ── */
@keyframes playerIn {
  0%   { opacity: 0; transform: translateX(-22px) scale(.95); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* ── AVATAR POPPING ── */
@keyframes avPop {
  0%   { opacity: 0; transform: scale(0) rotate(-15deg); }
  65%  { opacity: 1; transform: scale(1.18) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ── CARD ENTER ── */
@keyframes cardIn {
  0%   { opacity: 0; transform: translateY(28px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── SLOT POP (série manche 2) ── */
@keyframes slotPop {
  0%   { opacity: 0; transform: scale(0.6); }
  70%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── STROKE DRAW (trait séparateur) ── */
@keyframes strokeDraw {
  from { width: 0; opacity: 0; }
  to   { width: 60px; opacity: 1; }
}

/* ── PULSATION LANCEMENT ── */
@keyframes pulseLaunch {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--pulse); }
  50%       { transform: scale(1.03); box-shadow: 0 0 0 16px transparent; }
}

/* ── CORRECT POP ── */
@keyframes correctPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ── COUNTDOWN ── */
@keyframes countIn {
  0%   { opacity: 0; transform: scale(1.6); }
  50%  { opacity: 1; transform: scale(1); }
  85%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.7); }
}

/* ── BOUTONS ── */
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--pulse); }
  50%       { box-shadow: 0 0 0 13px transparent; }
}

/* ── BUZZER ── */
@keyframes buzzerIdle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 30, 30, .4), 0 6px 28px rgba(180, 0, 0, .45); }
  50%       { box-shadow: 0 0 0 16px rgba(220, 30, 30, 0), 0 6px 36px rgba(180, 0, 0, .65); }
}

@keyframes buzzerGlow {
  0%, 100% { box-shadow: 0 0 50px rgba(255, 50, 50, .8), 0 8px 40px rgba(200, 0, 0, .7); }
  50%       { box-shadow: 0 0 80px rgba(255, 80, 80, 1), 0 8px 60px rgba(220, 0, 0, .9); }
}

/* ── TIMER ── */
@keyframes timerRing {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 170; }
}

/* ── SCORES / PARTICULES ── */
@keyframes scoreFloat {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-38px); }
}

@keyframes particle {
  0%   { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)); }
}

/* ── CARDS STACK ── */
@keyframes shimmer {
  0%   { left: -80%; }
  100% { left: 130%; }
}

@keyframes floatCard {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%       { transform: rotate(-1.5deg) translateY(-9px); }
}

/* ── BADGES / ÉLÉMENTS FLOTTANTS ── */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

/* ── STREAK ── */
@keyframes streakFlame {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(1.16) translateY(-2px); }
}

/* ── DOTS LIVE ── */
@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.8); }
}

@keyframes pulseLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 200, 122, .35); }
  50%       { box-shadow: 0 0 0 9px rgba(61, 200, 122, 0); }
}

/* ── CONFETTIS (podium) ── */
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(640px) rotate(260deg); opacity: 0; }
}

/* ── PODIUM ── */
@keyframes podiumRise {
  from { opacity: 0; transform: translateY(46px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── ERREUR ── */
@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-5px); }
  75%       { transform: translateX(5px); }
}

/* ── CURSEUR TYPED ── */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── FLÈCHE BOUNCE ── */
@keyframes arrowBounce {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(4px); }
}

/* ── RÉDUCTION DE MOUVEMENT (accessibilité) ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}