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

/* Des feuilles emportées par la course de l'ours. */
.feuille-deco {
  position: absolute;
  width: 14px;
  height: 10px;
  background: linear-gradient(120deg, #4ade80 0%, #16a34a 60%, #14532d 100%);
  border-radius: 60% 10% 60% 10%;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

.feuille-deco::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%) rotate(-18deg);
}

.feuille-deco-1 {
  top: 24%;
  left: -20px;
  animation: feuille-vol 6.5s linear infinite;
}

.feuille-deco-2 {
  top: 62%;
  left: -20px;
  animation: feuille-vol 6.5s linear infinite 2.2s;
}

.feuille-deco-3 {
  top: 44%;
  left: -20px;
  animation: feuille-vol 6.5s linear infinite 4.3s;
}

/* La feuille traverse le banner en tournoyant et en ondulant, comme prise dans
   le sillage d'un animal lancé. */
@keyframes feuille-vol {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.9); }
  10%  { opacity: 0.85; }
  35%  { transform: translate(36vw, -16px) rotate(220deg) scale(1); }
  65%  { transform: translate(70vw, 12px) rotate(430deg) scale(0.95); }
  90%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate(108vw, -8px) rotate(660deg) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .feuille-deco { animation: none; opacity: 0.5; }
  .feuille-deco-1 { left: 18%; }
  .feuille-deco-2 { left: 48%; }
  .feuille-deco-3 { left: 76%; }
}

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