.football-motion {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: clamp(82px, 9vw, 146px);
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: var(--football-opacity, 0);
  background: transparent;
  transform:
    translate3d(calc(var(--football-x, 112) * 1px), calc(var(--football-y, 0) * 1px), 0)
    translate(-50%, -50%)
    rotate(calc(var(--football-roll, -520) * 1deg))
    scale(var(--football-scale, 0.44));
  transform-origin: center;
  pointer-events: none;
  will-change: transform, opacity;
}

.football-motion.is-interactive {
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

.football-motion:focus-visible {
  outline: 2px solid rgba(188, 224, 242, 0.86);
  outline-offset: 8px;
  border-radius: 50%;
}

.football-motion__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.48));
  user-select: none;
  -webkit-user-drag: none;
}

.football-motion__frame.is-active {
  opacity: 1;
}

/* 足球始终位于主题碎片的视觉下层，停稳后才接管中心空白区。 */
.fragment-button {
  z-index: 2;
}

.fragment-button:hover,
.fragment-button:focus-visible {
  z-index: 30;
}

@media (max-width: 820px) {
  .football-motion {
    width: clamp(70px, 22vw, 108px);
  }

  .football-motion__frame {
    filter: drop-shadow(0 11px 13px rgba(0, 0, 0, 0.44));
  }
}

@media (prefers-reduced-motion: reduce) {
  .football-motion {
    opacity: 1;
    transform:
      translate3d(calc(var(--football-x, 0) * 1px), calc(var(--football-y, 0) * 1px), 0)
      translate(-50%, -50%);
  }
}