/* Slice 4.4 decorative venue surfaces. Operational geometry stays code-owned. */
.sport-surface-host {
  isolation: isolate;
  overflow: hidden;
}

.sport-surface-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity var(--slw-motion-duration-standard, 240ms) ease;
}

.sport-surface-host[data-sport-surface-state="ready"] .sport-surface-layer {
  opacity: 1;
}

.sport-surface-host[data-sport-surface-state="ready"] {
  background: var(--bg-deep, #070a14);
}

.sport-surface-picture,
.sport-surface-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sport-surface-image {
  object-position: center;
  filter: saturate(0.82) brightness(0.72) contrast(1.04);
}

.sport-surface-layer--contain .sport-surface-image {
  object-fit: contain;
}

.sport-surface-layer--cover .sport-surface-image {
  object-fit: cover;
}

.sport-surface-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 10, 20, 0.12), rgba(7, 10, 20, 0.34)),
    radial-gradient(circle at center, transparent 34%, rgba(7, 10, 20, 0.28) 100%);
}

.sport-surface-mark {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  max-width: 22%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  mix-blend-mode: soft-light;
  filter: drop-shadow(0 2px 8px rgba(7, 10, 20, 0.45));
}

.sport-surface-host #formation-slots-container {
  position: relative;
  z-index: 2;
}

.sport-surface-host[data-sport-surface-state="ready"] .basketball-court-grid {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .sport-surface-layer {
    transition: none;
  }
}