/*
 * Petits Chevaux — déco animée du banner des pages internes.
 *
 * UNIQUEMENT la déco : la structure (.banner-home, .banner-title, .jeu-banner)
 * 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à.
 *
 * Animations en transform/opacity seulement (pièges de perf Firefox).
 */

.cheval-deco {
  position: absolute;
  top: 24%;
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.cheval-rouge { left: 12%; color: #f2a6a6; animation: cheval-trotte 7s ease-in-out infinite; }
.cheval-jaune { left: 37%; color: #f6dc9a; animation: cheval-trotte 7s ease-in-out infinite 1.8s; }
.cheval-vert  { left: 62%; color: #a2d9ba; animation: cheval-trotte 7s ease-in-out infinite 3.5s; }
.cheval-bleu  { left: 84%; color: #a9c2f2; animation: cheval-trotte 7s ease-in-out infinite 5.2s; }

/* Un cheval qui passe au petit trot le long du banner. */
@keyframes cheval-trotte {
  0%   { opacity: 0;    transform: translateX(-8px) translateY(4px) scale(0.85); }
  15%  { opacity: 0.85; }
  50%  { opacity: 0.85; transform: translateX(6px) translateY(-6px) scale(1.05); }
  85%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translateX(18px) translateY(-12px) scale(0.9); }
}

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

@media (max-width: 640px) {
  /* Quatre silhouettes sur un banner étroit, ça fait chargé : on en garde deux. */
  .cheval-vert, .cheval-bleu { display: none; }
}