/*
 * Bestioles en Cavale — déco animée du banner des pages internes.
 *
 * UNIQUEMENT la déco : la structure (.jeu-banner, .banner-row, .banner-home,
 * .banner-title) appartient au composant partagé
 * fichiers-partages-des-jeux/css/banner.css, servi ici par le proxy
 * proxies/css-banner.php. Ne rien redéfinir de ce qui vient de là.
 *
 * Trois bestioles qui trottinent en fond. Animations en transform/opacity
 * seulement (pièges de perf Firefox) : aucun box-shadow animé, aucun filtre.
 */

.bestiole-deco {
  position: absolute;
  top: 26%;
  width: 15px;
  height: 15px;
  border-radius: 50% 50% 46% 46%;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Deux yeux, pour qu'on reconnaisse une bestiole et pas une pastille. */
.bestiole-deco::before,
.bestiole-deco::after {
  content: '';
  position: absolute;
  top: 26%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
}
.bestiole-deco::before { left: 22%; }
.bestiole-deco::after  { right: 22%; }

.bestiole-deco-1 { left: 15%; background: #f87171; animation: bestiole-trotte 7s ease-in-out infinite; }
.bestiole-deco-2 { left: 47%; background: #60a5fa; animation: bestiole-trotte 7s ease-in-out infinite 2.4s; }
.bestiole-deco-3 { left: 78%; background: #fbbf24; animation: bestiole-trotte 7s ease-in-out infinite 4.6s; }

@keyframes bestiole-trotte {
  0%   { opacity: 0;    transform: translate(-14px, 0) scale(0.8); }
  15%  { opacity: 0.95; }
  30%  { transform: translate(-4px, -5px) scale(1.05); }
  50%  { opacity: 0.95; transform: translate(6px, 0) scale(1); }
  70%  { transform: translate(14px, -5px) scale(1.05); }
  85%  { opacity: 0.6; }
  100% { opacity: 0;    transform: translate(24px, 0) scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .bestiole-deco { animation: none; opacity: 0.75; }
}

@media (max-width: 640px) {
  /* Trois bestioles sur un banner étroit, ça fait chargé : on n'en garde qu'une. */
  .bestiole-deco-2, .bestiole-deco-3 { display: none; }
}