/*
 * Billard Extrême — 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 billes qui dérivent lentement derrière le titre. Animations en
 * transform/opacity seulement (pièges de perf Firefox) : aucun box-shadow
 * animé, le relief est posé une fois pour toutes.
 */

.bille-deco {
  position: absolute;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  opacity: 0.6;
  will-change: transform, opacity;
  pointer-events: none;
  box-shadow: inset 2px -2px 4px rgba(0, 0, 0, 0.5), inset -3px 3px 5px rgba(255, 255, 255, 0.3);
}

.bille-rouge {
  top: 20%;
  left: 11%;
  background: radial-gradient(circle at 34% 30%, #ff8a8a 0%, #e23b3b 45%, #8c1f1f 100%);
  animation: bille-derive 5.6s ease-in-out infinite;
}
.bille-jaune {
  top: 54%;
  left: 45%;
  background: radial-gradient(circle at 34% 30%, #ffe9a3 0%, #f2c53d 45%, #9c7c12 100%);
  animation: bille-derive 6.9s ease-in-out infinite 1.4s;
}
.bille-noire {
  top: 28%;
  right: 12%;
  background: radial-gradient(circle at 34% 30%, #6e6e80 0%, #26262f 45%, #0a0a0f 100%);
  animation: bille-derive 6.2s ease-in-out infinite 2.7s;
}

@keyframes bille-derive {
  0%, 100% { opacity: 0.4; transform: translate(0, 0) scale(0.9); }
  30%      { opacity: 0.8; transform: translate(14px, -8px) scale(1.1); }
  60%      { opacity: 0.55; transform: translate(-10px, 6px) scale(1); }
}

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

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