/*
 * LAME — Animations & transitions globales
 * Chaque animation a une intention fonctionnelle
 */

/* ══════════════════════════════════════════
   APPARITION PAGE (fade + légère montée)
══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════
   MONTÉE (éléments de liste, cartes)
══════════════════════════════════════════ */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════
   MODAL (montée depuis le bas)
══════════════════════════════════════════ */
@keyframes slideUpM {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════
   PULSE — score en temps réel
══════════════════════════════════════════ */
@keyframes pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ══════════════════════════════════════════
   FLASH SCORE — touche enregistrée
══════════════════════════════════════════ */
@keyframes scoreFlash {
  0%   { background: transparent; }
  20%  { background: rgba(201, 168, 76, 0.18); }
  100% { background: transparent; }
}

/* ══════════════════════════════════════════
   SKELETON LOADER
══════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface2) 25%,
    var(--surface3) 50%,
    var(--surface2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}

/* ══════════════════════════════════════════
   CLASSES D'ANIMATION UTILITAIRES
══════════════════════════════════════════ */
.animate-in  { animation: slideUp .28s ease both; }
.fade-in     { animation: fadeUp .4s ease both; }
.fade-in-slow { animation: fadeUp .6s ease both; }

/* Délais en cascade pour les listes */
.anim-delay-1 { animation-delay: .06s; }
.anim-delay-2 { animation-delay: .12s; }
.anim-delay-3 { animation-delay: .18s; }
.anim-delay-4 { animation-delay: .24s; }
.anim-delay-5 { animation-delay: .30s; }
.anim-delay-6 { animation-delay: .36s; }