/* ================================================================
   HUSH — Animations CSS (V2 Premium)
   Toutes les keyframes + classes utilitaires
   ================================================================ */

/* ── Entrée card ─────────────────────────────────────────────── */
@keyframes cardSlideUp {
  0%   { opacity:0; transform: translateY(52px) scale(0.94); }
  60%  { opacity:1; }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

/* ── Avion papier — apparition ───────────────────────────────── */
@keyframes planeZoom {
  0%   { opacity:0; transform: scale(0.2) rotate(-24deg) translateY(20px); }
  65%  { transform: scale(1.08) rotate(2deg); }
  100% { opacity:1; transform: scale(1) rotate(0deg) translateY(0); }
}

/* ── Avion qui s'envole (au clic envoi) ──────────────────────── */
@keyframes planeFly {
  0%   { transform: translate(0,0) rotate(0deg); opacity:1; }
  30%  { transform: translate(30px,-20px) rotate(12deg); }
  100% { transform: translate(240px,-240px) rotate(30deg); opacity:0; }
}

/* ── Traîne de particules ────────────────────────────────────── */
@keyframes trailFade {
  0%,100% { opacity:0; transform:scale(0.4); }
  45%,55% { opacity:1; transform:scale(1); }
}

/* ── Spinner ─────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Shake erreur ────────────────────────────────────────────── */
@keyframes shake {
  0%,100% { transform: translateX(0) rotate(0deg); }
  12%     { transform: translateX(-9px) rotate(-0.5deg); }
  25%     { transform: translateX(9px)  rotate(0.5deg); }
  37%     { transform: translateX(-6px) rotate(-0.3deg); }
  50%     { transform: translateX(6px)  rotate(0.3deg); }
  62%     { transform: translateX(-3px); }
  75%     { transform: translateX(3px); }
  87%     { transform: translateX(-1px); }
}

/* ── Badge pop ───────────────────────────────────────────────── */
@keyframes counterPop {
  0%   { opacity:0; transform: scale(0.72) translateY(10px); }
  65%  { transform: scale(1.06) translateY(-1px); }
  100% { opacity:1; transform: scale(1) translateY(0); }
}

/* ── Flash update compteur ───────────────────────────────────── */
@keyframes counterFlash {
  0%,100% { opacity:1; }
  40%     { opacity:0.35; transform:scale(1.06); }
}

/* ── Compteur flat: pop update ───────────────────────────────── */
@keyframes flatCounterPop {
  0%   { transform: translateY(8px) scale(0.93); opacity:0; }
  65%  { transform: translateY(-2px) scale(1.02); }
  100% { transform: translateY(0) scale(1); opacity:1; }
}

/* ── Badge pulsation ─────────────────────────────────────────── */
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(34,197,94,0.60); }
  50%     { box-shadow: 0 0 0 8px rgba(34,197,94,0.00); }
}

/* ── Particules fond ─────────────────────────────────────────── */
@keyframes particleFloat {
  0%   { transform: translateY(110vh) translateX(0) rotate(0deg);   opacity:0; }
  8%   { opacity: 0.55; }
  88%  { opacity: 0.55; }
  100% { transform: translateY(-60px) translateX(30px) rotate(360deg); opacity:0; }
}

/* ── Dropdown langue ─────────────────────────────────────────── */
@keyframes dropdownUp {
  from { opacity:0; transform: translateX(-50%) translateY(12px) scale(0.96); }
  to   { opacity:1; transform: translateX(-50%) translateY(0)    scale(1);    }
}

/* ── Fade state transition ───────────────────────────────────── */
@keyframes stateFadeIn {
  from { opacity:0; transform: scale(0.95) translateY(16px); }
  to   { opacity:1; transform: scale(1)    translateY(0);    }
}

/* ── Succès : anneau pulsant ─────────────────────────────────── */
@keyframes successRing {
  0%   { transform: scale(0.7); opacity:0.8; }
  100% { transform: scale(1.8); opacity:0;   }
}

/* ── Fade up générique ───────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Fond : hue-drift subtil ─────────────────────────────────── */
@keyframes bgShift {
  0%   { filter: brightness(1.00) hue-rotate(0deg); }
  50%  { filter: brightness(1.09) hue-rotate(9deg); }
  100% { filter: brightness(0.95) hue-rotate(-6deg); }
}

/* ── Shimmer (bouton, bannière) ──────────────────────────────── */
@keyframes shimmerPass {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ── Slide compteur texte ────────────────────────────────────── */
@keyframes counterSlide {
  from { transform:translateY(9px); opacity:0; }
  to   { transform:translateY(0);   opacity:1; }
}

/* ================================================================
   CLASSES UTILITAIRES
   ================================================================ */

/* Entrée card */
.animate-card-in {
  animation: cardSlideUp 0.65s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Fade in état */
.animate-fade-in {
  animation: stateFadeIn 0.44s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Secousse erreur */
.animate-shake {
  animation: shake 0.42s ease both;
}

/* Avion s'envole */
.animate-plane-fly {
  animation: planeFly 0.65s cubic-bezier(0.55,0,1,0.45) both;
}

/* Flash compteur */
.counter-flash {
  animation: counterFlash 0.32s ease both;
}

/* Slide compteur */
.counter-slide {
  animation: counterSlide 0.28s ease both;
}