/* Face Value: the coming-soon page (sports.html). One calm screen that says "Coming soon", a
   Preview button that opens a short first look (three cards), and a way back to Concerts. The
   page sets its atmosphere with a class on <body>: .sport (night). */
:root{
  --ink:#16142E;
  --ink-2:#55526E;
  --indigo:#3B2FD0;
  --peri:#7B6CFF;
  --lite:#A59EFF;
  --gold:#FFC94D;
  --line:rgba(255,255,255,.12);
  --white-2:rgba(255,255,255,.74);
  --white-3:rgba(255,255,255,.52);
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --g:clamp(16px,4vw,40px);
  --accent:var(--gold);
  --bg:#0A0920;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--bg);color:#fff;font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--g)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- nav: the same three-way switch as the main site ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:10;padding-top:env(safe-area-inset-top,0px)}
.nav .wrap{display:flex;align-items:center;gap:14px;height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.03em;color:#fff}
.logo svg{width:36px;height:24px}
.world{display:inline-flex;align-items:center;gap:2px;height:36px;padding:3px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--line)}
.world a{position:relative;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;color:var(--white-2);transition:background .25s,color .25s}
.world a:hover{background:rgba(255,255,255,.12);color:#fff}
.world a[aria-current="page"]{background:#fff;color:var(--ink);padding-left:4px}
.world a::after{content:"";position:absolute;inset:-7px -1px}
.world .mk{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;overflow:hidden}
.world a[aria-current="page"] .mk{background:#ECEAFF}
.world .mk svg{width:18px;height:18px}
.world a:not([aria-current]) .mk{display:none}
.nav .sp{flex:1}
.nav .back{font-size:14px;font-weight:600;color:var(--white-2);text-decoration:none;padding:8px 4px}
.nav .back:hover{color:#fff}

/* ---------- the coming-soon screen ---------- */
.stage{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:calc(72px + env(safe-area-inset-top,0px)) 0 56px;overflow:hidden;isolation:isolate;text-align:center}
.stage .wrap{display:grid;justify-items:center}
.soon-tag{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.soon-tag i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);animation:ping 2s ease-out infinite}
@keyframes ping{70%,100%{box-shadow:0 0 0 9px transparent}}
.stage h1{margin-top:22px;font-family:var(--display);font-weight:800;font-size:clamp(76px,15vw,184px);line-height:.88;letter-spacing:-.055em;font-variation-settings:"opsz" 96}
.stage .line{max-width:540px;margin-top:22px;font-size:clamp(17px,1.8vw,20px);line-height:1.5;color:var(--white-2)}
.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 26px;border:0;border-radius:999px;font-size:15.5px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .25s,background .25s}
.btn:active{transform:scale(.97)}
.btn.primary{background:#fff;color:var(--ink);box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 18px 38px -14px rgba(0,0,0,.7)}
.btn.ghost{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn.primary[aria-expanded="true"] svg{transform:rotate(180deg)}
.stage .live{margin-top:20px;font-size:13.5px;color:var(--white-3)}
.stage .live a{color:var(--white-2);text-underline-offset:3px}
.rise{animation:rise .9s var(--ease) both}
.rise.r2{animation-delay:.08s}.rise.r3{animation-delay:.16s}.rise.r4{animation-delay:.24s}.rise.r5{animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* ---------- the preview: a first look, three cards ---------- */
.preview{position:relative;padding:clamp(64px,9vw,112px) 0 clamp(72px,10vw,120px)}
.preview[hidden]{display:none}
.preview .eyebrow{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);text-align:center}
.preview h2{margin-top:10px;text-align:center;font-family:var(--display);font-weight:800;font-size:clamp(38px,5.4vw,60px);line-height:1;letter-spacing:-.045em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.card{display:grid;align-content:start;gap:16px;padding:22px;border-radius:24px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translateY(16px)}
.preview.open .card{animation:cardIn .7s var(--ease) both}
.preview.open .card:nth-child(2){animation-delay:.09s}
.preview.open .card:nth-child(3){animation-delay:.18s}
@keyframes cardIn{to{opacity:1;transform:none}}
.card .art{height:168px;border-radius:16px;display:grid;place-items:center;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden;padding:16px}
.card h3{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.025em}
.card p{font-size:15px;line-height:1.55;color:var(--white-2)}
/* a sample alert, as the phone shows it */
.alert{width:100%;display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:16px;background:rgba(255,255,255,.95);color:var(--ink);text-align:left;box-shadow:0 16px 30px -18px rgba(0,0,0,.7)}
.alert .ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--indigo)}
.alert .ic svg{width:22px;height:15px;color:#fff}
.alert .tx{min-width:0;display:grid;gap:2px}
.alert .h{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.alert b{font-size:13.5px;font-weight:600;line-height:1.3}
.alert span.s{font-size:12.5px;line-height:1.4;color:#3F3C58}
.sample{display:inline-block;margin-top:2px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--white-3);text-transform:uppercase}
.after{display:grid;justify-items:center;gap:14px;margin-top:48px;text-align:center}
.after p{color:var(--white-2);font-size:15.5px}
footer{padding:24px 0 calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:13px;color:var(--white-3)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--white-2)}

@media (max-width:900px){
  .cards{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
}
@media (max-width:600px){
  .nav .wrap{height:62px;gap:10px}
  .logo span{display:none}
  .nav .back{display:none}
  .world a{padding:0 10px;font-size:12.5px}
  .world a[aria-current="page"]{padding-left:3px}
  .stage{padding-top:calc(62px + env(safe-area-inset-top,0px))}
  .acts{width:100%;max-width:360px;flex-direction:column}
  .acts .btn{width:100%}
}
@media (max-width:350px){.world a{padding:0 8px;font-size:12px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .card{opacity:1;transform:none}
}

/* ---------- Sports: night ---------- */
body.sport{--bg:#0A0920;--accent:var(--gold)}
.sport .stage{background:radial-gradient(110% 80% at 50% 0%,#221D63 0%,#120F3A 50%,#0A0920 85%)}
.sport .lights{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sport .lights i{position:absolute;top:-4%;width:42vw;height:120%;transform-origin:50% 0;background:conic-gradient(at 50% 0%,transparent 0deg,transparent 172deg,rgba(255,240,205,.16) 175deg,rgba(255,244,214,.3) 180deg,rgba(255,240,205,.16) 185deg,transparent 188deg);filter:blur(10px)}
.sport .lights i::after{content:"";position:absolute;top:0;left:calc(50% - 26px);width:52px;height:16px;border-radius:5px;background:#FFF4D6;box-shadow:0 0 26px 8px rgba(255,236,190,.55),0 0 80px 26px rgba(255,201,77,.25)}   /* the lamp bank */
.sport .lights i:nth-child(1){left:-12vw;transform:rotate(-24deg)}
.sport .lights i:nth-child(2){right:-12vw;transform:rotate(24deg)}
.sport .field{position:absolute;left:-20%;right:-20%;bottom:0;height:64%;z-index:-1;transform:perspective(700px) rotateX(64deg);transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 10%),repeating-linear-gradient(0deg,#0F3328 0 44px,#0C2B22 44px 88px);
  -webkit-mask-image:linear-gradient(to top,#000 20%,transparent 95%);mask-image:linear-gradient(to top,#000 20%,transparent 95%);opacity:.75}
.sport .preview{background:linear-gradient(180deg,#0A0920,#110E33)}
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.plate{height:44px;border-radius:10px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.02em;font-stretch:75%;font-variation-settings:"wdth" 75;box-shadow:inset 0 -4px 0 rgba(0,0,0,.22)}
.stubtix{position:relative;display:flex;width:100%;max-width:260px;height:96px;border-radius:14px;background:#fff;color:var(--ink);overflow:hidden;box-shadow:0 18px 30px -18px rgba(0,0,0,.8)}
.stubtix .l{flex:none;width:76px;display:grid;place-items:center;background:var(--indigo);color:#fff;border-right:2px dashed #DCD9E8}
.stubtix .l svg{width:40px;height:27px}
.stubtix .r{flex:1;display:grid;align-content:center;gap:3px;padding:0 14px;text-align:left}
.stubtix .r small{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--ink-2)}
.stubtix .r b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1}
.stubtix .r span{font-size:12px;font-weight:600;color:var(--indigo)}