/* ISA Network: cinematic launch page.
   Palette: ink #03060f, navy #0a1a4a, old glory blue #0a3161, volt #2f6bff, flag red #b22234, hot red #ff3350, white #f6f8ff. */
:root {
  --ink: #03060f;
  --navy: #0a1a4a;
  --glory: #0a3161;
  --volt: #2f6bff;
  --red: #b22234;
  --hot: #ff3350;
  --white: #f6f8ff;
  --mist: #a9b6e8;
  --flagedge: linear-gradient(135deg, #ff3350 0%, #f6f8ff 50%, #2f6bff 100%);
  --panel: clamp(110px, min(46vw, 27svh), 290px);
  --display: "Oswald", "Helvetica Neue", Arial, system-ui, sans-serif;
  --hud: "Chakra Petch", "Helvetica Neue", Arial, system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html { color-scheme: dark; height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  line-height: 1.55;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a:focus-visible, button:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 12px) 20px 12px;
  background: rgba(3,6,15,.35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(246,248,255,.08);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; }
.brand-plate {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 14px;
  background: rgba(3,6,15,.5);
}
.brand img.brand-logo { display: block; height: 34px; width: auto; border-radius: 0; filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)); }
.brand-word { font-family: var(--hud); font-weight: 700; font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mist); }
.btn-ghost {
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: .82rem;
  padding: 8px 12px;
  white-space: nowrap;
  border: 1px solid rgba(246,248,255,.4);
  border-radius: 999px;
}
.btn-ghost .short { display: none; }
@media (max-width: 520px) {
  .btn-ghost .long { display: none; }
  .btn-ghost .short { display: inline; }
}
.btn-ghost:hover { border-color: var(--white); background: rgba(246,248,255,.1); }

/* ---------- The one-of-one signature: a red, white and blue hairline edge ---------- */
.edge,
.brand-plate::before,
.countdown div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--flagedge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 4;
}

/* the channel number, like the bug in the corner of a TV screen */
.chbug {
  position: absolute;
  top: clamp(5px, calc(var(--panel) * .045), 12px);
  left: clamp(5px, calc(var(--panel) * .045), 12px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: clamp(3px, calc(var(--panel) * .022), 5px) clamp(6px, calc(var(--panel) * .04), 9px) clamp(3px, calc(var(--panel) * .022), 5px) clamp(5px, calc(var(--panel) * .035), 8px);
  border-radius: 999px;
  background: rgba(3,6,15,.66);
  border: 1px solid rgba(246,248,255,.28);
  font-family: var(--hud);
  font-weight: 700;
  font-size: clamp(.5rem, calc(var(--panel) * .0042), .7rem);
  letter-spacing: .14em;
  line-height: 1;
  color: var(--white);
}
.chbug::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 8px var(--hot);
}

/* ---------- Hero ---------- */
.hero {
  --panel: clamp(64px, min(28vw, 12svh), 150px);
  --stageh: calc(var(--panel) * 1.5);
  position: relative;
  height: 100vh;
  height: 100svh;
  padding: 76px 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.legal {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  margin: 0;
  padding: 0 16px;
  z-index: 1;
  color: var(--mist);
  font-size: .74rem;
  line-height: 1.4;
  opacity: .8;
}
.legal-note { display: block; font-size: .7rem; opacity: .85; }

/* Background: red and blue light, flag-fabric ripples glowing along the bottom, a vignette, and
   fine film grain. The broadcast stage itself is painted behind the logo ring (see .stage::before). */
.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    linear-gradient(to top, rgba(3,6,15,.9) 0%, rgba(3,6,15,.5) 22%, rgba(3,6,15,0) 44%),
    radial-gradient(42% 38% at 12% 28%, rgba(255,51,80,.34), transparent 72%),
    radial-gradient(44% 40% at 88% 28%, rgba(47,107,255,.38), transparent 72%),
    radial-gradient(60% 40% at 50% 100%, rgba(10,49,97,.8), transparent 75%),
    var(--ink);
}
/* flag fabric, blended in as light and faded out toward the top */
.sky::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6%;
  height: 62%;
  background: url("/static/img/bg-flag.jpg") 20% 40% / cover no-repeat;
  opacity: .7;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 92%);
  mask-image: linear-gradient(to top, #000 10%, transparent 92%);
  animation: drift 32s ease-in-out infinite alternate;
}
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(246,248,255,.06), transparent 70%),
    radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(0,0,0,.6) 100%);
}
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: .07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------- The billboard ---------- */
.stage {
  --bgsize: clamp(420px, 120vw, 1300px);
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: var(--stageh);
  perspective: calc(var(--panel) * 4.6);
  perspective-origin: 50% 32%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
/* the broadcast stage: beams, glossy platform and haze, behind the ring and softly faded at the edges */
.stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10% -22%;
  background: url("/static/img/bg-stage.jpg") center / cover no-repeat;
  filter: brightness(1.12) saturate(1.12);
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 52%, #000 48%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 52%, #000 48%, transparent 100%);
  pointer-events: none;
}
.stage.dragging { cursor: grabbing; }

/* the floor: a soft pool of light the logos stand in */
.floor {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 150%;
  height: 34%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(246,248,255,.16), rgba(47,107,255,.10) 55%, transparent 100%);
  pointer-events: none;
}
/* red and blue edge light along the horizon */
.horizon {
  position: absolute;
  left: 50%;
  bottom: 21%;
  width: min(900px, 110%);
  height: 70px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(255,51,80,.55), transparent 100%) 0 0 / 55% 100% no-repeat,
    radial-gradient(closest-side, rgba(47,107,255,.55), transparent 100%) 100% 0 / 55% 100% no-repeat;
  filter: blur(10px);
  pointer-events: none;
}

.tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-8deg);
}
.ring {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 44%;
  width: var(--panel);
  height: var(--panel);
  margin-left: calc(var(--panel) / -2);
  margin-top: calc(var(--panel) / -2);
  transform-style: preserve-3d;
  will-change: transform;
}

.panel {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  /* the front logo glows in its own brand color; --dim (set by script) fades it as it turns away */
  box-shadow:
    0 24px 60px rgba(0,0,0,.6),
    0 0 calc((1 - var(--dim, 0) / 0.7) * 90px) rgba(var(--glow, 255,255,255), .5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-box-reflect: below 8px linear-gradient(transparent 68%, rgba(255,255,255,.22));
}
/* glass highlight */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(125deg, rgba(255,255,255,.26), rgba(255,255,255,0) 36%),
    linear-gradient(135deg, rgba(255,51,80,.14), rgba(0,0,0,0) 45%, rgba(47,107,255,.16));
  pointer-events: none;
}
.panel .edge { opacity: calc(1 - var(--dim, 0) * .9); }
.panel img, .card img { filter: contrast(1.04) saturate(1.06); }
/* depth shading */
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #02040c;
  opacity: var(--dim, 0);
  pointer-events: none;
}
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel .name {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 5vw, 2rem);
  line-height: 1.05;
  color: #fff;
}

/* tile backgrounds that match each channel's look (shown behind emblems, or if a logo is missing) */
.dynasty        { background: radial-gradient(circle at 50% 40%, #1b1608, #050505 70%); }
.dynasty .name  { color: #e8c35a; }
.artique        { background: linear-gradient(160deg, #0b6a6f, #07393d); }
.musical-genius { background: radial-gradient(circle at 50% 38%, #3b1a8f, #12062e 75%); }
.health         { background: linear-gradient(160deg, #a6ecd6, #5cc9a7); }
.health .name   { color: #08301f; }
.food           { background: radial-gradient(circle at 50% 40%, #b01620, #5b0710 75%); }
.footgolf       { background: linear-gradient(160deg, #0a8fd6, #4cc2ff); }

/* drawn emblems, shown until a real logo file is added to static/channels/ */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.emblem {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 66%;
  height: 66%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
  z-index: 1;
}
.card .emblem { top: 36%; width: 54%; height: 54%; }

.arrow {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(246,248,255,.3);
  background: rgba(3,6,15,.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 4;
}
.arrow:hover { background: var(--red); border-color: var(--red); }
.prev { left: 8px; }
.next { right: 8px; }

/* ---------- Text under the billboard ---------- */
.now { margin: 2px 12px 0; min-height: 2.7em; color: var(--mist); position: relative; z-index: 1; text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.now strong {
  display: block;
  font-family: var(--hud);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  letter-spacing: .04em;
}
.tagline {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, min(5.4vw, 3.6svh), 2.5rem);
  line-height: 1.08;
  letter-spacing: .01em;
  text-shadow: 0 4px 28px rgba(0,0,0,.75);
}
/* the flag, as a rule under the tagline */
.flagbar { position: relative; z-index: 1; display: flex; width: min(420px, 70%); height: 4px; margin: 6px 0 8px; border-radius: 3px; overflow: hidden; }
.flagbar i { flex: 1; display: block; }
.flagbar i:nth-child(1) { background: var(--red); }
.flagbar i:nth-child(2) { background: var(--white); }
.flagbar i:nth-child(3) { background: var(--volt); }

.countdown { position: relative; z-index: 1; display: flex; gap: clamp(14px, 4vw, 34px); justify-content: center; }
.countdown div { position: relative; min-width: 3.6em; padding: 6px 8px 6px; border-radius: 12px; background: rgba(3,6,15,.5); }
.countdown b {
  display: block;
  font-family: var(--hud);
  font-weight: 700;
  font-size: clamp(1.15rem, min(5.2vw, 3.8svh), 2.1rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown span { display: block; margin-top: 3px; color: var(--mist); font-size: .72rem; }

@media (min-width: 760px) {
  .topbar { padding-left: 32px; padding-right: 32px; }
  .prev { left: 30px; }
  .next { right: 30px; }
}



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


/* ---------- ISA Live: the player, its channels, and the news ticker ---------- */
.layout {
  --chrome: 404px;
  --livew: min(100%, calc((100svh - var(--chrome) - var(--stageh)) * 16 / 9));
  position: relative;
  z-index: 1;
  align-self: stretch;
  width: 100%;
  max-width: 1380px;
  padding: 0 clamp(14px, 3vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas: "live" "rail" "lower";
  row-gap: 10px;
  align-content: center;
  justify-items: center;
}
.live { grid-area: live; width: var(--livew); min-width: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.rail { grid-area: rail; width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.lower { grid-area: lower; width: var(--livew); display: flex; flex-direction: column; align-items: center; text-align: center; }
.rail .stage { width: 100%; }

.live-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.live-title { margin: 0; display: flex; align-items: center; gap: 9px; font-family: var(--hud); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.live-title b { font-size: 1.02rem; letter-spacing: .08em; color: var(--white); }
.livebug { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 700; font-size: .66rem; letter-spacing: .16em; }
.livebug::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .35; } }
.sound { font: 600 .74rem var(--hud); letter-spacing: .1em; text-transform: uppercase; color: var(--white); background: rgba(3,6,15,.55); border: 1px solid rgba(246,248,255,.3); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.sound[aria-pressed="true"] { background: var(--volt); border-color: var(--volt); }
.sound:hover { border-color: var(--white); }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; font: 600 .78rem var(--hud); letter-spacing: .06em; color: var(--white); background: rgba(3,6,15,.55); border: 1px solid rgba(246,248,255,.26); border-radius: 999px; padding: 6px 13px; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--white); }
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); }

/* the flag-colored frame sits around the video, never on top of it */
.player-wrap { padding: 2px; border-radius: 16px; background: var(--flagedge); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #02040c; }
.player::before { content: "Connecting to the live stream..."; position: absolute; inset: 0; display: grid; place-items: center; color: var(--mist); font-family: var(--hud); letter-spacing: .12em; font-size: .78rem; text-transform: uppercase; }
.player-frame, .player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #02040c; color-scheme: dark; }
.player-frame[hidden], .player-msg[hidden] { display: none; }
.player-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; background: radial-gradient(circle at 50% 30%, #11224f, #02040c 75%); }
.player-msg p { margin: 0; color: var(--mist); font-size: .88rem; }
.player-msg .pm-title { font-family: var(--display); font-size: 1.3rem; color: var(--white); }
.pm-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.pm-links a { color: var(--white); font-size: .78rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(246,248,255,.4); border-radius: 999px; padding: 6px 12px; }
.pm-links a:hover { background: rgba(246,248,255,.12); }
.player-static { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--white); }

.credit { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--mist); }
.credit a { color: var(--white); text-underline-offset: 3px; }
.credit-note { display: block; }
.credit-note:empty { display: none; }

.ticker { position: relative; display: flex; align-items: stretch; min-height: 34px; border-radius: 12px; overflow: hidden; background: rgba(3,6,15,.62); border: 1px solid rgba(246,248,255,.16); }
.tick-tag { flex: none; display: flex; align-items: center; padding: 0 12px; background: var(--red); color: #fff; font: 700 .68rem var(--hud); letter-spacing: .16em; text-transform: uppercase; }
.tick-view { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tick-track { display: inline-flex; white-space: nowrap; will-change: transform; animation: tick var(--tickdur, 60s) linear infinite; }
.tick-set { display: inline-flex; }
.tk { display: inline-flex; align-items: center; gap: 7px; padding-right: 34px; font-size: .84rem; color: var(--white); }
.tk::after { content: ""; width: 5px; height: 5px; margin-left: 27px; transform: rotate(45deg); background: var(--hot); }
.tk b { font-family: var(--hud); font-size: .64rem; letter-spacing: .14em; color: var(--mist); }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker:hover .tick-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tick-track { animation: none; }
  .tick-view { overflow-x: auto; }
  .livebug::before { animation: none; }
}

/* phones and small tablets: the video leads, the billboard ring sits beneath it */
@media (max-height: 760px) {
  .now { display: none; }
  .flagbar { display: none; }
  .layout { --chrome: 372px; row-gap: 6px; }
  .live { gap: 6px; }
  .live-head { min-height: 26px; }
  .ticker { min-height: 30px; }
  .hero { --panel: clamp(60px, min(26vw, 10svh), 150px); }
  .countdown div { padding: 4px 8px; }
}
@media (max-height: 500px) {
  .hero { padding-top: 64px; padding-bottom: 44px; }
  .layout { --livew: min(100%, calc((100svh - 196px) * 16 / 9)); row-gap: 6px; }
  .rail, .lower, .live-head, .credit { display: none; }
}

/* wide screens: the billboard becomes an upright drum in the left rail, the video takes the stage */
@media (min-width: 900px) and (min-height: 560px) {
  .hero { --panel: clamp(120px, min(18vw, 23svh), 200px); }
  .layout {
    --chrome: 424px;
    --livew: min(100%, calc((100svh - var(--chrome)) * 16 / 9));
    grid-template-columns: clamp(230px, 24vw, 330px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "rail live" "rail lower";
    column-gap: clamp(20px, 3.4vw, 56px);
    row-gap: 12px;
  }
  .live, .lower { justify-self: center; }
  .rail { align-self: center; grid-row: 1 / span 2; }
  .now { display: block; }
  .stage {
    --stageh: clamp(380px, calc(100svh - 290px), 560px);
    max-width: none;
    perspective: 1100px;
    perspective-origin: 50% 50%;
    touch-action: pan-x;
  }
  .stage::before {
    inset: -6% -24%;
    background: radial-gradient(closest-side, rgba(47,107,255,.30), rgba(255,51,80,.14) 60%, transparent 100%);
    filter: blur(8px);
    -webkit-mask-image: none; mask-image: none;
  }
  .floor, .horizon { display: none; }
  .tilt { transform: rotateY(-10deg); }
  .ring { top: 50%; }
  .panel { -webkit-box-reflect: none; }
  .arrow { left: auto; right: 4px; width: 40px; height: 40px; transform: none; }
  .arrow svg { transform: rotate(90deg); }
  .arrow.prev { top: calc(50% - 48px); }
  .arrow.next { top: calc(50% + 8px); }
  .tagline { font-size: clamp(1.2rem, min(2.4vw, 3.6svh), 2.2rem); }
  .live-title b { font-size: 1.1rem; }
  .chip { padding: 7px 15px; font-size: .82rem; }
}

/* ---------- Opening sequence: stage and flag roll into the ISA logo ---------- */
.replay {
  font: inherit;
  color: var(--mist);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.replay:hover { color: var(--white); }

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #000;
  animation: introOut .9s ease-in 5.1s forwards;
}
.no-intro .intro { display: none; }

.intro-stage {
  position: absolute;
  inset: 0;
  background: url("/static/img/bg-stage.jpg") 50% 72% / cover no-repeat;
  filter: brightness(1.1) saturate(1.15);
  opacity: 0;
  animation: introStage 6s cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-flag {
  position: absolute;
  inset: -8%;
  background: url("/static/img/bg-flag.jpg") 20% 50% / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: introFlag 6s ease-out forwards;
}
.intro-beam {
  position: absolute;
  top: -12%;
  width: 52%;
  height: 135%;
  mix-blend-mode: screen;
  filter: blur(16px);
  opacity: 0;
  transform-origin: 50% 0;
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}
.beam-l { left: -6%; background: linear-gradient(to bottom, rgba(255,51,80,.85), rgba(255,51,80,.25) 55%, transparent 90%); animation: introBeamL 3.2s cubic-bezier(.3,.6,.2,1) .5s forwards; }
.beam-r { right: -6%; background: linear-gradient(to bottom, rgba(47,130,255,.9), rgba(47,130,255,.28) 55%, transparent 90%); animation: introBeamR 3.2s cubic-bezier(.3,.6,.2,1) .5s forwards; }
.intro-haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 50% 52%, rgba(255,255,255,.14), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(0,0,0,.78) 100%);
}

.intro-lockup {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: introZoom 1.5s ease-in 4.4s forwards;
}
.intro-box { position: relative; width: min(74vw, 700px); }
.intro-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 816 / 441;
  clip-path: inset(0 100% 0 0);
  animation: introReveal 1.5s cubic-bezier(.65,0,.25,1) 2.1s forwards;
}
.intro-logo {
  display: block;
  width: 100%;
  height: auto;
  filter: blur(18px) brightness(1.8);
  transform: scale(.88);
  animation: introLogo 2s ease-out 2.1s forwards;
}
.intro-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%);
  mix-blend-mode: screen;
  transform: translateX(-110%);
  animation: introSweep 1.7s ease-in-out 2.4s forwards;
}
.intro-flare {
  position: absolute;
  left: -22%;
  right: -22%;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(120,170,255,.9) 25%, #fff 50%, rgba(255,110,130,.9) 75%, transparent);
  box-shadow: 0 0 60px 14px rgba(90,150,255,.55);
  opacity: 0;
  transform: scaleX(0);
  animation: introFlare 1.5s ease-out 2.7s forwards;
}
.intro-name {
  margin: 22px 0 0;
  font-family: var(--hud);
  font-weight: 700;
  font-size: clamp(.8rem, 2.4vw, 1.15rem);
  color: var(--mist);
  opacity: 0;
  letter-spacing: .9em;
  padding-left: .9em;
  animation: introName 1.6s ease-out 3.6s forwards;
}

.intro-bar {
  position: absolute;
  left: 0; right: 0;
  height: 12svh;
  background: #000;
  z-index: 3;
}
.bar-top { top: 0; transform: translateY(-100%); animation: introBarTop 5.6s ease-in-out forwards; }
.bar-bottom { bottom: 0; transform: translateY(100%); animation: introBarBottom 5.6s ease-in-out forwards; }

.intro-skip {
  position: absolute;
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  z-index: 4;
  font-family: var(--hud);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(246,248,255,.35);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}

@keyframes introStage {
  0%   { opacity: 0; transform: scale(1.22); }
  14%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes introFlag {
  0%, 12% { opacity: 0; transform: translateX(-14%) skewX(-5deg); }
  45%     { opacity: .8; transform: translateX(0) skewX(0); }
  100%    { opacity: .4; transform: translateX(3%) skewX(0); }
}
@keyframes introBeamL {
  0%   { opacity: 0; transform: rotate(-52deg); }
  35%  { opacity: .95; }
  100% { opacity: .7; transform: rotate(-14deg); }
}
@keyframes introBeamR {
  0%   { opacity: 0; transform: rotate(52deg); }
  35%  { opacity: .95; }
  100% { opacity: .7; transform: rotate(14deg); }
}
@keyframes introReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes introLogo {
  0%   { filter: blur(18px) brightness(1.8); transform: scale(.88); }
  60%  { filter: blur(0) brightness(1.25); }
  100% { filter: blur(0) brightness(1); transform: scale(1); }
}
@keyframes introSweep { to { transform: translateX(110%); } }
@keyframes introFlare {
  0%   { opacity: 0; transform: scaleX(0); }
  35%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.25); }
}
@keyframes introName {
  0%   { opacity: 0; letter-spacing: .9em; }
  100% { opacity: 1; letter-spacing: .42em; }
}
@keyframes introBarTop {
  0%   { transform: translateY(-100%); }
  12%  { transform: translateY(0); }
  88%  { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
@keyframes introBarBottom {
  0%   { transform: translateY(100%); }
  12%  { transform: translateY(0); }
  88%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@keyframes introZoom {
  to { transform: scale(1.14); opacity: 0; }
}
@keyframes introOut {
  0%   { opacity: 1; visibility: visible; }
  99%  { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}