/* Home splash (scripts/splash.js). Home only: fresh opens and hard refreshes. */

/* until splash.js decides, Home stays hidden; during the splash the header logo waits for the wordmark to land */
html.splash-pending .page { visibility: hidden; }
html.splash-on { overflow: hidden; }
html.splash-on .hdr .brand { visibility: hidden; }

.splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.splash__bg {
  position: absolute; inset: 0; z-index: 0; /* its own stacking context: the floor mesh stays under the stage */
  /* a concert at night: the ambient glows are kept low and the base is a shade under --ink, so the stage lights carry the scene */
  background:
    radial-gradient(70vw 60vh at 50% 46%, color-mix(in oklch, var(--teal) 6%, transparent), transparent 70%),
    radial-gradient(50vw 50vh at 100% 0%, color-mix(in oklch, var(--teal-burnt) 10%, transparent), transparent 70%),
    color-mix(in oklch, var(--ink) 82%, black);
}
/* the site's grain + scanlines, so the splash feels like the same screen */
.splash__bg::before {
  content: ""; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.splash__bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgb(0 0 0 / var(--scan, .12)) 0 1px, transparent 1px 3px); }

/* the floor: a perspective mesh revealed by a soft moving light, drawn on a canvas by startFloor() in splash.js */
.splash__floor { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.splash__stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vh, 22px); padding: 0 24px; text-align: center; }

/* wordmark: the header SVG, cloned and enlarged */
.splash__mark { display: block; }
.splash .splash__svg { display: block; width: clamp(220px, 46vw, 640px); height: auto; color: var(--paper); overflow: visible; filter: drop-shadow(0 0 28px color-mix(in oklch, var(--teal-glow) 14%, transparent)); }
/* notch blink, each 3.2s cycle:
   1. two quick blinks of the halo above the notch (it sits behind the letters, so it never falls on the white U)
   2. then one slow, soft glow inside the notch, in the theme colour */
.splash__halo { opacity: 0; filter: drop-shadow(0 0 11px var(--teal-glow)) drop-shadow(0 0 4px var(--teal-glow)); animation: spHalo 3.2s ease-in-out infinite; }
@keyframes spHalo { 0%, 4% { opacity: 0; } 11% { opacity: 1; } 18% { opacity: 0; } 25% { opacity: 1; } 33%, 100% { opacity: 0; } }
.splash .brand__accent { animation: spNotch 3.2s ease-in-out infinite; }
@keyframes spNotch { 0%, 36% { filter: none; } 66% { filter: brightness(1.22) saturate(1.06); } 96%, 100% { filter: none; } }
/* at Ready: the same two beats, quick and brighter */
.splash.is-ready .splash__halo { animation: spHaloFlash .5s var(--ease) 1; }
@keyframes spHaloFlash { 0% { opacity: 0; } 35% { opacity: 1; filter: drop-shadow(0 0 10px var(--teal-glow)); } 70%, 100% { opacity: 0; } }
.splash.is-ready .brand__accent { animation: spFlash .5s var(--ease) 1; }
@keyframes spFlash { 0%, 35% { filter: none; } 65% { filter: brightness(1.55) saturate(1.15); } 100% { filter: none; } }

/* catchphrase: same gradient as the wordmark, clipped to the text */
.splash__tag {
  margin: 0; font-family: var(--f-mono); font-weight: 500; font-size: clamp(.6875rem, 1.4vw, 1rem); letter-spacing: .32em; text-transform: uppercase;
  padding-left: .32em; /* balances the trailing letter-spacing */
  color: transparent; -webkit-background-clip: text; background-clip: text; background-color: var(--paper);
  opacity: .6; /* translucent: the catchphrase sits back behind the wordmark */
}

/* Load button, then the meter */
.splash__ctl { position: relative; display: grid; justify-items: center; align-items: start; height: 104px; margin-top: clamp(16px, 4vh, 40px); } /* fixed height: swapping Load for the loader never shifts the logo */
/* the site's own primary pill (.btn .btn--primary), as on the hero's "Get tickets"; nothing extra */
.splash__load { position: relative; justify-content: center; isolation: isolate; min-width: 220px;
  /* no outline ring (the site's primary pill draws a 1px teal ring): just its top highlight and soft glow */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 8px 24px -10px var(--teal-glow-a); }
.splash__load:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 10px 32px -8px var(--teal-glow-a); }
/* it's focused as soon as the splash opens: no outline ring (it read as a blue line plus a dark gap), focus shows as a fuller glow */
.splash__load:focus, .splash__load:focus-visible { outline: none; }
.splash__load:focus-visible { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 0 26px -4px var(--teal-glow-a); }
/* the page's scanlines (same pattern and Tweaks strength as .scan), which the splash otherwise sits above */
.splash__load::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / var(--scan, .12)) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.splash__load svg { transition: transform var(--fast) var(--ease); }
.splash__load:hover svg { transform: translateX(2px); }
.splash__load[hidden], .splash__meter[hidden] { display: none; }
/* loader: a bold, glowing bar; centred under it the percentage, then "Loading…" (blinking dots) */
.splash__meter { display: grid; justify-items: center; gap: 0; width: clamp(260px, 34vw, 440px); }
.splash__track {
  justify-self: stretch; position: relative; height: 22px; margin-bottom: 16px; border-radius: var(--r-pill); overflow: hidden;
  background: color-mix(in oklch, var(--line) 70%, transparent);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / .5), 0 0 0 1px color-mix(in oklch, var(--line-hi) 55%, transparent);
}
.splash__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--teal-burnt), var(--teal) 55%, var(--teal-glow));
  box-shadow: 0 0 24px var(--teal-glow-a), inset 0 1px 0 rgb(255 255 255 / .22);
}
/* a light sheen sliding along the fill, so the bar feels alive */
.splash__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 35%, rgb(255 255 255 / .28) 50%, transparent 65% 100%); background-size: 220% 100%; animation: spSheen 1.1s linear infinite; }
@keyframes spSheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.splash__count { display: contents; }
.splash__label { order: 2; margin-top: 8px; padding-left: .22em; font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fog); }
.splash__dots { font-style: normal; letter-spacing: .1em; }
.splash__dots i { font-style: normal; opacity: .2; animation: spDot 1.2s ease-in-out infinite; }
.splash__dots i:nth-child(2) { animation-delay: .2s; }
.splash__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes spDot { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
.splash__pct { order: 1; font-family: var(--f-display); font-weight: 700; font-size: 1.0625rem; line-height: 1; font-variation-settings: "wdth" 112; font-variant-numeric: tabular-nums; color: var(--paper); }

.splash.is-leaving { pointer-events: none; }