/*
 * Domino — 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 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).
 */

.domino-deco {
  position: absolute;
  top: 22%;
  width: 11px;
  height: 22px;
  border-radius: 3px;
  background: #f7f1e3;
  border: 1px solid rgba(0, 0, 0, 0.3);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}
/* Le trait du milieu et deux points, en dégradés : aucun élément de plus. */
.domino-deco::after {
  content: '';
  position: absolute;
  inset: 2px;
  background:
    radial-gradient(circle, #1d2b25 40%, transparent 45%) 50% 18% / 5px 5px no-repeat,
    linear-gradient(#9c8b63, #9c8b63) 50% 50% / 70% 1px no-repeat,
    radial-gradient(circle, #1d2b25 40%, transparent 45%) 50% 82% / 5px 5px no-repeat;
}

.domino-deco-1 { left: 12%; animation: domino-tombe 7s ease-in-out infinite; }
.domino-deco-2 { left: 36%; animation: domino-tombe 7s ease-in-out infinite 1.7s; }
.domino-deco-3 { left: 61%; animation: domino-tombe 7s ease-in-out infinite 3.4s; }
.domino-deco-4 { left: 85%; animation: domino-tombe 7s ease-in-out infinite 5.1s; }

/* Un domino qui bascule doucement, comme le premier d'une file qui va tomber. */
@keyframes domino-tombe {
  0%   { opacity: 0;    transform: rotate(0deg) translateY(4px); }
  20%  { opacity: 0.85; transform: rotate(0deg) translateY(0); }
  60%  { opacity: 0.85; transform: rotate(18deg) translateY(-2px); }
  100% { opacity: 0;    transform: rotate(70deg) translateY(4px); }
}

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

@media (max-width: 640px) {
  .domino-deco-3, .domino-deco-4 { display: none; }
}