/*
 * Combat d'Arc — 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 css-banner.php. Ne rien redéfinir de ce qui vient de là.
 *
 * Animations en transform/opacity seulement (cf. pièges de perf Firefox).
 */

.fleche-deco {
  position: absolute;
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, rgba(250, 204, 21, 0) 0%, #facc15 45%, #fde68a 100%);
  border-radius: 1px;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Pointe de la flèche */
.fleche-deco::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 5px solid #fde68a;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

/* Empennage */
.fleche-deco::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  border-right: 4px solid #c2410c;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

.fleche-deco-1 {
  top: 30%;
  left: -30px;
  animation: fleche-vol 5.5s ease-in infinite;
}

.fleche-deco-2 {
  top: 58%;
  left: -30px;
  animation: fleche-vol 5.5s ease-in infinite 1.9s;
  transform: scale(0.82);
}

.fleche-deco-3 {
  top: 44%;
  left: -30px;
  animation: fleche-vol 5.5s ease-in infinite 3.6s;
  transform: scale(0.9);
}

/*
 * Trajectoire en cloche : la flèche traverse le banner en montant puis en
 * redescendant, et pique du nez comme un vrai tir tendu.
 */
@keyframes fleche-vol {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-24deg); }
  8%   { opacity: 0.9; }
  50%  { transform: translate(52vw, -26px) rotate(0deg); }
  85%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(108vw, 34px) rotate(26deg); }
}

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

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