/* ═══════════════════════════════════════════
   BACKGROUNDS — Atmospheric layers, pitch lines, gradients
   ═══════════════════════════════════════════ */

.pitch-bg {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}

/* Center circle */
.pitch-bg::before {
  content: '';
  position: absolute;
  top: 18%; left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px solid var(--pitch-line);
}

/* Center line */
.pitch-bg::after {
  content: '';
  position: absolute; top: 0; left: 50%;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--pitch-grad) 30%, var(--pitch-grad) 70%, transparent);
}

/* Corner arcs */
.pitch-corner {
  position: absolute;
  width: 60px; height: 60px;
  border: 1px solid var(--pitch-faint);
}

.pitch-corner.tl { top: -30px; left: -30px; border-radius: 0 0 50% 0; }
.pitch-corner.tr { top: -30px; right: -30px; border-radius: 0 0 0 50%; }

/* Diagonal atmosphere slash */
.atmo-slash {
  position: fixed; top: -20%; right: -10%;
  width: 50%; height: 140%;
  background: linear-gradient(165deg, transparent 40%, var(--atmo) 50%, transparent 60%);
  pointer-events: none; z-index: 0;
}

/* iOS: remove fixed atmospheric layers — each position:fixed element creates a
   permanent compositor layer. With the pitch circle, center line, corner arcs,
   and atmo slash, that's 5 layers before any content renders. */
.is-ios .pitch-bg,
.is-ios .atmo-slash { display: none; }