/* Padelistan v3 · the background system.
   One motif, the padel court in glowing lime lines, seen from a different angle in every section;
   broadcast textures (halftone, LED dot-matrix, scanlines, grain); floodlights; angled section edges. */

/* ---------- The court, drawn in light ---------- */
svg use { stroke: currentColor; fill: none; }
.court-3d svg, .court-top { color: var(--lime); overflow: visible; }
.court-3d svg line, .court-3d svg rect, .court-3d svg path,
.court-top line, .court-top rect, .court-top path { vector-effect: non-scaling-stroke; }
#court line, #court rect, #court path { stroke-width: 1.4; }
#court .c-out { stroke-width: 2.2; }
#court .c-net { stroke-dasharray: 2 3; stroke-width: 1.8; }
#court .c-glass { stroke-opacity: .45; stroke-width: 3; }

.court-3d {
  position: absolute; left: 50%; bottom: -12%; width: 130%; max-width: 1900px;
  transform: translateX(-50%) perspective(900px) rotateX(70deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 6px rgba(215, 245, 74, 0.55)) drop-shadow(0 0 22px rgba(215, 245, 74, 0.25));
  -webkit-mask-image: linear-gradient(0deg, #000 25%, transparent 92%);
  mask-image: linear-gradient(0deg, #000 25%, transparent 92%);
}
.court-3d svg { width: 100%; height: auto; display: block; }
.court-top {
  position: absolute; color: var(--lime); opacity: .16;
  filter: drop-shadow(0 0 8px rgba(215, 245, 74, .5));
}

/* ---------- Floodlight towers ---------- */
.tower { position: absolute; bottom: 8%; width: 60px; height: 300px; color: #020806; fill: #020806; z-index: 0; }
.tower use { fill: #030A07; stroke: rgba(215, 245, 74, .18); stroke-width: 1; }
.tw-l { left: 4%; }
.tw-r { right: 5%; transform: scaleX(-1); }
.tower::after { content: none; }

/* ---------- Broadcast textures ---------- */
.halftone {
  position: absolute; pointer-events: none;
  background-image: radial-gradient(circle, rgba(215, 245, 74, .55) 1.2px, transparent 1.6px);
  background-size: 11px 11px;
}
.led { /* the dot-matrix of a stadium scoreboard */
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(244, 244, 238, .09) 1.3px, transparent 1.8px);
  background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(60% 70% at 70% 50%, #000 20%, transparent 80%);
  mask-image: radial-gradient(60% 70% at 70% 50%, #000 20%, transparent 80%);
}
.scan { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(244, 244, 238, .035) 0 1px, transparent 1px 4px); }

/* ---------- Angled section edges, a lime hairline on the cut ---------- */
.sec { clip-path: polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%); margin-top: -3.2vw; padding-top: calc(clamp(90px, 12vh, 140px) + 3.2vw); }
.edge { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 3.2vw; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), rgba(215, 245, 74, .55) calc(50% - 1px), rgba(215, 245, 74, .55) calc(50% + 1px), transparent calc(50% + 1.5px)); }
.ticker + .sec { margin-top: -1vw; }

/* ==========================================================================
   Hero: the app standing on a floodlit court
   ========================================================================== */
.hero { background:
  radial-gradient(70% 55% at 72% 100%, rgba(30, 110, 75, .55), transparent 70%),
  radial-gradient(45% 40% at 72% 30%, rgba(215, 245, 74, .07), transparent 70%),
  linear-gradient(180deg, #030B08 0%, #071A13 60%, #0A2219 100%); }
.bg-hero .court-3d { left: 66%; width: 115%; bottom: -16%; }
.bg-hero .b4 { left: 30%; animation-duration: 19s; opacity: .7; }
.bg-hero .tw-l { left: 44%; bottom: 30%; height: 260px; opacity: .9; }
.bg-hero .tw-r { right: 2%; bottom: 34%; height: 300px; }
.ht-hero { right: 0; top: 0; width: 55%; height: 60%;
  -webkit-mask-image: radial-gradient(70% 70% at 100% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(70% 70% at 100% 0%, #000 10%, transparent 70%); opacity: .4; }
.bg-hero .outline-word { opacity: .8; }
.g-speed { opacity: .55; }

.shot { position: relative; height: min(76vh, 700px); min-height: 580px; }
.shot .phone { position: absolute; }
.hp-main { left: 50%; top: 2%; width: 280px; transform: translateX(-50%); z-index: 3; }
.hp-side { width: 220px; top: 14%; z-index: 2; filter: brightness(.82); }
.hp-l { left: 4%; transform: rotate(-8deg); }
.hp-r { right: 4%; transform: rotate(8deg); }
.pad-glow { /* the pool of light the phones stand in */
  position: absolute; left: 50%; bottom: 0; width: 120%; height: 120px; transform: translateX(-50%); z-index: 1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(215, 245, 74, .35), transparent 70%); filter: blur(10px);
}
.hud-rank { left: auto; right: -2%; top: 58%; z-index: 4; }
.hud-note { left: -3%; top: 64%; z-index: 4; display: flex; align-items: center; gap: 12px; }
.hud-note b { display: block; font: italic 800 20px/1 var(--display); text-transform: uppercase; }
.hud-note small { font-size: 13px; color: var(--soft); }

/* ---------- Sections ---------- */
.ht-app { left: -2%; top: 0; width: 40%; height: 50%; opacity: .25;
  -webkit-mask-image: radial-gradient(70% 70% at 0% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(70% 70% at 0% 0%, #000 10%, transparent 70%); }
.ct-app { right: -12%; top: 50%; width: 70%; transform: translateY(-50%) rotate(-90deg); opacity: .14; }
.ct-board { left: -10%; bottom: -30%; width: 60%; transform: rotate(-14deg); opacity: .12; }
.ht-how { left: 0; right: 0; bottom: 0; height: 55%; opacity: .22;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent); }
.bg-how::after { top: 58%; height: 3px; background: repeating-linear-gradient(90deg, rgba(215, 245, 74, .55) 0 2px, transparent 2px 9px); box-shadow: 0 0 12px rgba(215, 245, 74, .4); }
.net-post { position: absolute; top: calc(58% - 50px); width: 10px; height: 100px; border-radius: 3px; background: #0B1A12; border: 1px solid rgba(215, 245, 74, .4); }
.np-l { left: 2%; } .np-r { right: 2%; }
.bg-rank .b5 { left: 64%; opacity: .8; }
.ct-clubs { left: -6%; top: 50%; width: 62%; transform: translateY(-50%); opacity: .2; }
.ht-clubs { right: 0; top: 0; width: 45%; height: 60%; opacity: .2;
  -webkit-mask-image: radial-gradient(70% 70% at 100% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(70% 70% at 100% 0%, #000 10%, transparent 70%); }
.ht-org { left: 0; right: 0; top: 0; height: 60%; opacity: .16;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.bg-final .final-court { width: 150%; bottom: -30%; left: 50%; }
.bg-final .tw-l { left: 8%; bottom: 22%; }
.bg-final .tw-r { right: 8%; bottom: 22%; }

/* ---------- Phones and smaller ---------- */
@media (max-width: 1100px) {
  .bg-hero .court-3d { left: 50%; width: 180%; bottom: -8%; }
  .bg-hero .tw-l { left: 2%; bottom: 18%; }
  .shot { max-width: 620px; width: 100%; margin: 20px auto 0; }
}
@media (max-width: 640px) {
  .sec { clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 100%); margin-top: -18px; padding-top: 90px; }
  .edge { height: 18px; }
  .shot { height: 470px; min-height: 0; }
  .hp-main { width: 200px; }
  .hp-side { width: 150px; top: 16%; }
  .hp-l { left: -4%; } .hp-r { right: -4%; }
  .hud-rank { right: 0; top: auto; bottom: 2%; width: 200px; }
  .hud-note { left: 0; top: auto; bottom: 22%; padding: 10px 12px; }
  .hud-note b { font-size: 16px; }
  .tower { height: 200px; width: 40px; }
  .bg-hero .tw-l, .bg-hero .tw-r { bottom: 12%; }
  .ct-app { width: 140%; right: -50%; }
  .ct-clubs { width: 130%; left: -30%; }
  .bg-final .tw-l, .bg-final .tw-r { display: none; }
}
@media (prefers-reduced-motion: reduce) { .beam { animation: none; } }

/* Court in perspective: tuned so the whole court reads as a floor under the phones */
.court-3d { bottom: 0; transform: translateX(-50%) perspective(1100px) rotateX(58deg); z-index: 0;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(0deg, #000 0%, #000 45%, transparent 100%); }
.bg-hero .court-3d { left: 68%; width: 78%; bottom: 4%; }
.bg-final .final-court { width: 90%; bottom: 0; left: 50%; }
@media (max-width: 1100px) { .bg-hero .court-3d { left: 50%; width: 150%; bottom: 0; } }