/* Padelistan v3 · depth, reverse-engineered from the owner's references:
   0 a gritty concrete wall · 1 huge dark diagonal slabs with soft shadow edges · 2 hazard-stripe clusters
   at the slab edges · 3 a framed panel: cyan/blue/lime aurora, radial speed-line burst, halftone corners,
   striped frame · 4 chain-link at the panel's edge and spray splatter. */

:root { --cyan: #22D3E6; --blue: #1B3FA6; }

/* ---------- 0 · Concrete ---------- */
.arena { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.concrete {
  position: absolute; inset: 0;
  background-color: #0A0E0D;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='5' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.53 0 0 0 0 0.52 0 0 0 1.1 -0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.82 0 0 0 0 0.8 0 0 0 0.9 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 900px 900px, 240px 240px;
  opacity: .5;
}
.concrete::after { /* the wall falls into shadow toward the content */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 90% at 50% 50%, rgba(5, 12, 9, .25), rgba(3, 7, 5, .85) 100%);
}

/* ---------- 1 · Slabs: big dark diagonal bands, each with a soft shadow and a lit edge ---------- */
.slab {
  position: absolute; width: 170%; height: 34%; left: -35%;
  background: linear-gradient(180deg, #070B0A 0%, #0B110F 100%);
  box-shadow: 0 -30px 60px rgba(0, 0, 0, .65), 0 30px 80px rgba(0, 0, 0, .55);
  border-top: 1px solid rgba(244, 244, 238, .06);
  transform: rotate(-28deg);
}
.arena-a .s1, .arena-hero .s1 { top: 18%; }
.arena-a .s2, .arena-hero .s2 { top: 72%; height: 26%; opacity: .9; }
.arena-b .slab { transform: rotate(28deg); }
.arena-b .s1 { top: 8%; }
.arena-b .s2 { top: 64%; height: 28%; }

/* ---------- 2 · Hazard stripes at the slab edges ---------- */
.hz { position: absolute; height: 120px; width: 380px; transform: rotate(-28deg); }
.hz1 { left: 12%; top: 6%; background: repeating-linear-gradient(-62deg, var(--lime) 0 12px, transparent 12px 30px); opacity: .9;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 70%, transparent); }
.hz2 { left: -4%; bottom: 8%; width: 460px; background: repeating-linear-gradient(-62deg, rgba(244, 244, 238, .16) 0 16px, transparent 16px 34px);
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent); mask-image: linear-gradient(90deg, #000 40%, transparent); }
.arena-b .hz { transform: rotate(28deg); }
.arena-b .hz1 { left: auto; right: 6%; top: 10%; }
.arena-b .hz2 { left: auto; right: -4%; }

/* ---------- 4 · Splatter (filled by script) ---------- */
.splat { position: absolute; inset: 0; }
.splat svg { position: absolute; width: 520px; height: 420px; }

/* ---------- 3 · The panel: aurora, burst, halftone, striped frame ---------- */
.panel {
  position: absolute; z-index: 0; overflow: hidden;
  border: 1px solid rgba(34, 211, 230, .25);
  box-shadow: 0 50px 120px rgba(0, 0, 0, .7);
}
.aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(28% 34% at 40% 22%, rgba(34, 211, 230, .95), transparent 70%),
    radial-gradient(32% 40% at 62% 48%, rgba(27, 63, 166, .95), transparent 72%),
    radial-gradient(26% 30% at 70% 80%, rgba(215, 245, 74, .9), transparent 72%),
    radial-gradient(40% 40% at 20% 75%, rgba(10, 60, 90, .9), transparent 72%),
    #061321;
  filter: blur(26px) saturate(1.15);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-4%, 3%) rotate(6deg) scale(1.08); } }
.burst { /* radial speed lines from the centre, clear in the middle */
  position: absolute; inset: -10%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(2, 6, 10, .85) 0deg .7deg, transparent .7deg 3.2deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 26%, rgba(0,0,0,.55) 46%, #000 75%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 26%, rgba(0,0,0,.55) 46%, #000 75%);
  mix-blend-mode: multiply;
}
.dots { position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(215, 245, 74, .85) 1.3px, transparent 1.8px); background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(40% 40% at 100% 50%, #000, transparent 70%), radial-gradient(30% 30% at 0% 100%, #000, transparent 70%);
  mask-image: radial-gradient(40% 40% at 100% 50%, #000, transparent 70%), radial-gradient(30% 30% at 0% 100%, #000, transparent 70%);
  opacity: .7; }
.pf { position: absolute; height: 16px; }
.pf-t { left: 0; top: 0; width: 55%; background: repeating-linear-gradient(-58deg, var(--cyan) 0 9px, transparent 9px 20px);
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent); }
.pf-b { right: 6%; bottom: 0; width: 40%; height: 22px; background: repeating-linear-gradient(-58deg, var(--lime) 0 6px, transparent 6px 12px); }
.chain { position: absolute; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(244, 244, 238, .28) 0 1.5px, transparent 1.5px 16px),
    repeating-linear-gradient(-45deg, rgba(244, 244, 238, .28) 0 1.5px, transparent 1.5px 16px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }

/* Placement: hero, app, ranking */
.shot .panel { left: 4%; right: 2%; top: 4%; bottom: 10%; transform: skewY(-2deg); }
.shot .chain { right: -6%; top: 0; width: 18%; height: 60%; }
.shot .pad-glow { display: none; }
.stage .panel { width: 460px; height: 560px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); }
.stage .chain { right: -2%; top: 10%; width: 22%; height: 50%; }
.sb-wrap { position: relative; }
.sb-wrap .panel { inset: -40px -50px -40px 40px; transform: rotate(2deg); }
.sb-wrap .chain { right: -70px; bottom: -30px; width: 140px; height: 60%; }
.sb-wrap .scoreboard { position: relative; z-index: 1; }

/* The earlier, flatter treatments give way to the arena */
.g-tl, .g-br, .g-cl, .ht-hero, .ht-app, .ht-clubs, .ht-org, .court-top, .led, .scan, .bg-board::before { display: none; }
.hero { background: #050A08; }
.bg-app, .bg-board, .bg-how, .bg-rank, .bg-tour, .bg-clubs, .bg-org, .bg-final { background: transparent !important; }
.bg-app, .bg-board, .bg-how, .bg-rank, .bg-tour, .bg-clubs, .bg-org { z-index: -1; }
.sec, .final { background: #050A08; }
.outline-word { -webkit-text-stroke-color: rgba(244, 244, 238, .06); }

/* ==========================================================================
   The app section: pinned; scroll moves through the five screens
   ========================================================================== */
.app { overflow: clip; padding-bottom: 0; }
.pin { position: relative; height: 230vh; }
.pin-in { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 70px 0 40px; }
.app .head { margin-bottom: 24px; }
.app .stage { min-height: 600px; }
.app .cta-row { margin-top: 18px; }
.tabs button { position: relative; overflow: hidden; }
.tabs .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(244, 244, 238, .08); }
.tabs .bar i { display: block; height: 100%; width: 0; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.tabs button[aria-selected="true"] .bar i { width: var(--p, 0%); }

@media (prefers-reduced-motion: reduce) { .aurora { animation: none; } }

@media (max-width: 1100px) {
  .shot .panel { left: 0; right: 0; }
}
@media (max-width: 640px) {
  .slab { height: 26%; }
  .hz { width: 220px; height: 80px; }
  .stage .panel { width: 300px; height: 470px; }
  .shot .panel { top: 8%; bottom: 14%; }
  .sb-wrap .panel { inset: -24px -16px -24px 16px; }
  .sb-wrap .chain { display: none; }
  .pin { height: 240vh; }
  .pin-in { padding: 64px 0 20px; }
  .app .head { margin-bottom: 14px; }
  .app .sec h2, .app h2 { font-size: 40px; }
  .app .stage { min-height: 0; }
  .app .big-phone { width: 210px; }
  .app .cta-row { display: none; }
  .app .outline-word { display: none; }
}

/* Stripe clusters sit clear of the headings (they live at the far edges) */
.arena-a .hz1, .arena-hero .hz1 { left: auto; right: -6%; top: -4%; }
.arena-hero .hz1 { right: 30%; top: -6%; opacity: .7; }
@media (max-width: 640px) { .hz1 { display: none; } }
.arena-hero .hz1 { right: auto; left: 34%; top: 12%; width: 260px; opacity: .55; }

/* Smooth screen changes: all five screens stacked, crossfaded on the GPU */
.big-phone { overflow: hidden; }
.big-phone img {
  position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px);
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform; backface-visibility: hidden;
}
.big-phone img.past { transform: translateY(-18px) scale(.985); }
.big-phone img.on { opacity: 1; transform: none; }
.tabs .bar i { width: 100% !important; transform: scaleX(0); transform-origin: left; will-change: transform; }
.tabs button[aria-selected="true"] .bar i { transform: scaleX(var(--p, 0)); }
.tabs button span { transition: max-height .35s cubic-bezier(.22,1,.36,1), opacity .3s; }
/* while pinned, the glow behind the phone stands still (a moving blur repaints every frame) */
.pinned .aurora { animation-play-state: paused; }
.aurora { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .big-phone img { transition: none; } }