/* ========================================
   Micro-animations Caprice (static/js/fx.js)
   J'aime « Éclat », favori « Petits cœurs », message « Envoyé ✓ »,
   confirmation « Confettis ». Jouées seulement sur l'action positive,
   après confirmation du serveur ; jamais en boucle.
   Les particules sont en position fixed sur <body> : la fenêtre de profil
   et les cartes du fil (overflow: hidden) les auraient coupées.
   ======================================== */

/* Rebond de l'icône (pouce, cœur) */
.fx-pop { animation: fx-pop .34s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fx-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4) rotate(-10deg); }
  100% { transform: scale(1); }
}

/* Compteur qui monte d'un cran */
.fx-tick { display: inline-block; animation: fx-tick .28s ease-out; }
@keyframes fx-tick { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Particules */
.fx-particle { position: fixed; z-index: 10500; pointer-events: none; translate: -50% -50%; }

.fx-ring { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--rose-fuchsia, #FF3EB5); animation: fx-ring .42s ease-out forwards; }
@keyframes fx-ring { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

.fx-spark { width: 5px; height: 5px; border-radius: 50%; background: var(--rose-fuchsia, #FF3EB5); animation: fx-spark .45s ease-out forwards; }
@keyframes fx-spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }

.fx-heart { width: 12px; height: 12px; animation: fx-float .75s ease-out both; }
.fx-heart svg { display: block; width: 100%; height: 100%; fill: var(--rose-fuchsia, #FF3EB5); }
@keyframes fx-float {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--dx), -46px) scale(1); opacity: 0; }
}

/* Trajet et fondu séparés : avec la même courbe (rapide au départ), les
   confettis devenaient presque transparents dès 0,3 s. Ils restent pleins
   les trois quarts du trajet, puis s'estompent. */
.fx-confetto { width: 6px; height: 10px; border-radius: 1px;
  animation: fx-confetti 1s cubic-bezier(.2, .7, .4, 1) forwards, fx-confetti-fade 1s linear forwards; }
@keyframes fx-confetti {
  from { transform: translate(0, 0) rotate(0); }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
}
@keyframes fx-confetti-fade { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }

/* Message envoyé : la bulle apparaît en fondu */
.fx-fade { animation: fx-fade .22s ease-out; }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }

/* Statut sous chaque message envoyé : « Envoyé ✓ », puis « Vu ✓✓ ».
   Fixe sur l'historique ; animé seulement sur le message qui vient de
   partir (.is-new) et sur la deuxième coche quand il est lu en direct. */
.fx-sent-status { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; }
.fx-sent-status.is-new { animation: fx-fade .2s ease-out .15s both; }
.fx-sent-status .fx-check { width: 11px; height: 11px; }
.fx-sent-status .fx-check + .fx-check { margin-left: -7px; }

/* Coche tracée au trait (message, fenêtre de confirmation, page de paiement) */
.fx-check { fill: none; stroke: var(--rose-fuchsia, #FF3EB5); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fx-check-lg { width: 50%; height: 50%; stroke: currentColor; stroke-width: 3.2; }
.fx-draw path,
.fx-draw polyline,
.fx-check-lg path,
.fx-sent-status.is-new .fx-check path,
.fx-check.is-new path { stroke-dasharray: 40; animation: fx-draw .3s ease-out .2s both; }
@keyframes fx-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

/* Icône de confirmation qui surgit */
.fx-pop-in { animation: fx-pop-in .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fx-pop-in { from { transform: scale(0); } to { transform: scale(1); } }

/* « Réduire les animations » : l'état change, sans mouvement ni particules */
@media (prefers-reduced-motion: reduce) {
  .fx-pop, .fx-tick, .fx-fade, .fx-sent-status, .fx-pop-in,
  .fx-draw path, .fx-draw polyline, .fx-check-lg path,
  .fx-sent-status.is-new .fx-check path, .fx-check.is-new path { animation: none !important; }
  .fx-particle { display: none; }
}