/* ===== Flying footballs background (FanTown / All Star page) =====
   Subtle drifting + spinning soccer balls behind content. Never blocks clicks. */
#footballs{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
/* outer = flies across screen (translate) */
#footballs .ball{
  position:absolute;
  top:0;left:0;
  will-change:transform;
  animation:fly var(--dur,20s) linear infinite;
  animation-delay:var(--delay,0s);
  opacity:var(--op,.16);
}
/* inner = spins (rotate) so the two transforms don't fight */
#footballs .ball i{
  display:block;
  font-size:var(--sz,26px);
  line-height:1;
  font-style:normal;
  animation:spin var(--spin,7s) linear infinite;
  filter:drop-shadow(0 0 3px rgba(27,69,176,.25));
}
@keyframes fly{
  0%   {transform:translate(var(--x0,-12vw), var(--y0,20vh))}
  100% {transform:translate(var(--x1,112vw), var(--y1,70vh))}
}
@keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

body > header, body > section, body > footer, body > div, body > nav{position:relative;z-index:1}