.arena {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(360px, 40vw, 580px);
  overflow: hidden;
  perspective: 1100px;
  background: radial-gradient(ellipse at 50% 20%, #503bc7, #181331 70%);
}
.arena-light {
  position: absolute;
  inset: -35%;
  pointer-events: none;
  background: conic-gradient(from 20deg, transparent 10%, #ad8aff50 19%, transparent 28%, transparent 57%, #53bff645 67%, transparent 76%);
  animation: arena-lights 24s linear infinite;
}
@keyframes arena-lights { to { transform: rotate(360deg); } }
.arena-stage {
  width: min(96%, 740px);
  height: clamp(260px, 34vw, 470px);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .2s ease-out;
}
.arena-orbit {
  position: absolute;
  inset: 45% 4% -4%;
  border-radius: 50%;
  border: 1px solid #ba9dff91;
  box-shadow: 0 0 35px #855dff9c, inset 0 0 35px #855dff66;
  transform: rotateX(56deg);
  animation: orbit-glow 4s ease-in-out infinite alternate;
}
@keyframes orbit-glow { to { opacity: .38; } }
.arena-kit {
  position: absolute;
  top: 9%;
  margin: 0;
  width: 37%;
  height: 78%;
  border: 1px solid #ffffff55;
  border-radius: clamp(10px, 2vw, 23px);
  overflow: hidden;
  background: #231946;
  box-shadow: 0 20px 38px #08051699;
  transform: translate3d(0, 0, var(--depth)) rotateY(var(--angle));
  animation: kit-hover 5s ease-in-out infinite alternate;
}
.arena-kit-left { left: 5%; --depth: 10px; --angle: 23deg; }
.arena-kit-right { right: 5%; --depth: 10px; --angle: -23deg; animation-delay: -3s; }
.arena-kit-center { left: 31.5%; --depth: 80px; --angle: 0deg; animation-delay: -1.5s; border-color: #f3d58b; }
@keyframes kit-hover {
  to { transform: translate3d(0, -12px, var(--depth)) rotateY(var(--angle)); }
}
.arena-kit img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arena-kit figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 18px 9px 8px;
  background: linear-gradient(transparent, #100b24);
  text-align: center;
  color: white;
  font-size: clamp(10px, 1.5vw, 16px);
  font-weight: 700;
}
.product-grid, .badge-rail { perspective: 1000px; }
@media (hover: hover) and (pointer: fine) {
  .product-grid .card:hover, .badge-rail a:hover {
    transform: translateY(-5px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  }
  .badge-rail a:hover .team-badge { transform: translateY(-4px) scale(1.12); }
}
.badge-rail .team-badge { transition: transform .25s ease; }
.motion-paused :is(.arena-light, .arena-orbit, .arena-kit) { animation-play-state: paused; }
.motion-paused :is(.arena-stage, .badge-rail .team-badge) { transform: none; transition: none; }
@media (max-width: 800px) {
  .arena { min-height: 300px; }
  .arena-stage { height: clamp(240px, 52vw, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  .arena-light, .arena-orbit, .arena-kit { animation: none; }
  .arena-stage, .badge-rail .team-badge { transform: none !important; transition: none; }
}

.arena-kit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 35%, #fff5 48%, transparent 60%);
  transform: translateX(-120%);
  animation: kit-shine 7s ease-in-out infinite;
}
.arena-kit-right::after { animation-delay: 1.3s; }
.arena-kit-center::after { animation-delay: .65s; }
@keyframes kit-shine {
  0%, 65% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
.product-link {
  display: inline-block;
  transition: translate .24s ease, color .24s ease;
}
.card-open:is(:hover, :focus-visible) .product-link { translate: 4px 0; }
.motion-paused .arena-kit::after { animation-play-state: paused; }
.motion-paused .product-link { translate: none !important; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .arena-kit::after { animation: none; }
  .product-link { translate: none !important; transition: none; }
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: 3px;
  pointer-events: none;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, #6849e9, #b68aff, #f5d988);
}

.arena { touch-action: pan-y pinch-zoom; }
.arena-stage {
  transform: translateY(var(--arena-travel, 0px)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .16s cubic-bezier(.2,.65,.35,1);
}
.arena-pitch {
  position: absolute;
  inset: 24% 3% -12%;
  transform: translateZ(-25px) rotateX(59deg);
  border: 1px solid #c7b5ff55;
  border-radius: 12px;
  background:
    radial-gradient(circle at center, transparent 13%, #d7c7ff66 13.4%, transparent 14%),
    linear-gradient(90deg, transparent 49.7%, #d7c7ff66 50%, transparent 50.3%),
    repeating-linear-gradient(90deg, #8766ec1f 0 9%, transparent 9% 18%);
  box-shadow: 0 0 35px #8965f355;
}
.arena-sparks {
  position: absolute;
  inset: 6% 8%;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 28%, #f5d988 0 1px, transparent 3px),
    radial-gradient(circle at 25% 12%, #beabff 0 2px, transparent 4px),
    radial-gradient(circle at 90% 37%, #87d9ff 0 2px, transparent 4px),
    radial-gradient(circle at 80% 72%, #f5d988 0 1px, transparent 3px),
    radial-gradient(circle at 14% 82%, #a1b8ff 0 2px, transparent 4px);
  animation: stadium-sparks 6s ease-in-out infinite alternate;
}
@keyframes stadium-sparks { to { transform: translateY(-18px) scale(1.06); opacity: .4; } }

.product-grid .card-open:active, .badge-rail a:active, .checkout-actions .product-order:active {
  scale: .98;
}
.product-grid .card-open, .checkout-actions .product-order { transition: scale .16s ease; }
.motion-paused .arena-sparks { animation-play-state: paused; }
.motion-paused .arena-stage { transform: none; transition: none; }
.motion-paused :is(.product-grid .card-open, .badge-rail a, .checkout-actions .product-order) { scale: none; transition: none; }

@media (max-width: 640px) {
  .arena { min-height: clamp(275px, 80vw, 370px); perspective: 760px; }
  .arena-kit { width: 40%; }
  .arena-kit-left { left: 2%; }
  .arena-kit-right { right: 2%; }
  .arena-kit-center { left: 30%; --depth: 46px; }
  .arena-kit figcaption { font-size: 11px; }
  .motion-toggle { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .arena-sparks { animation: none; }
  :is(.product-grid .card-open, .badge-rail a, .checkout-actions .product-order) { scale: none !important; transition: none; }
}