/* ===========================================================================
   SIMULATION LOADER (.sl-*) — the brand sequence that covers a simulator run.
   Markup: templates/_simload.html. Motion: static/simload.js (every frame is
   driven from there; this file only holds the stage and the type).

   The veil sits over a page that keeps working underneath: results render
   behind it at the lock, so the lift reveals them.
   =========================================================================== */

.sl[hidden] { display: none; }

.sl {
  position: fixed; inset: 0; z-index: 9998;
  background:
    radial-gradient(70vmax 60vmax at 50% 44%, #0d1a2a 0%, #0a0e14 58%),
    #0a0e14;
  /* opacity is driven by simload.js on the same clock as the rest of the
     sequence: a CSS transition here started late on a page that was still
     loading, and the page showed through the first second */
  opacity: 0;
  cursor: progress;
  overflow: hidden;
  contain: strict;
}

/* the page must not scroll under the veil while it is up */
html.sl-lock, html.sl-lock body { overflow: hidden; }

/* ---- the mark and the words, centred a little high ----------------------- */
.sl-stage {
  position: absolute; left: 16px; right: 16px; top: 38%;
  transform: translateY(-50%);
  display: grid; justify-items: center; gap: clamp(14px, 2.6vh, 26px);
  pointer-events: none;
}
.sl-mark {
  width: clamp(120px, 24vmin, 220px); height: auto; display: block; overflow: visible;
  filter: drop-shadow(0 0 28px rgba(94,201,255,.22));
}
/* the cage draws itself: pathLength="1" so the dash maths never drifts */
#sl-ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sl-wm {
  margin: 0; opacity: 0; will-change: transform, opacity;
  font-family: var(--disp, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
  font-weight: 900; letter-spacing: -0.01em; line-height: 1;
  font-size: clamp(30px, 6.4vw, 64px); white-space: nowrap;
}
.sl-wm-c { color: var(--accent, #5ec9ff); }
.sl-wm-b { color: #dbe4f0; }
.sl-wm-sp { display: inline-block; width: .26em; }

.sl-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- the fight, under the cage ------------------------------------------ */
.sl-hud {
  position: absolute; left: 16px; right: 16px;
  bottom: max(7vh, 36px);
  display: grid; justify-items: center; gap: 10px;
  text-align: center; pointer-events: none;
  opacity: 0;               /* simload.js fades it in as the cage arrives */
}
.sl-names {
  margin: 0; max-width: 22ch;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  column-gap: .42em; row-gap: 2px;
  font-family: var(--disp, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(22px, 3.6vw, 40px); line-height: 1.02;
  color: #dbe4f0; text-wrap: balance;
}
/* corner colours match the simulator's own A/B (green / blue) */
.sl-a { color: #dbe4f0; }
.sl-a::before, .sl-b::after {
  content: ""; display: inline-block; width: .32em; height: .32em;
  border-radius: 1px; vertical-align: .18em;
}
.sl-a::before { background: var(--accent, #5ec9ff); margin-right: .34em; }
.sl-b::after  { background: var(--blue, #6b7dff); margin-left: .34em; }
.sl-vs {
  font: 600 max(11px, .34em) var(--mono, ui-monospace, monospace);
  letter-spacing: .18em; color: #7d8a9c; text-transform: uppercase;
}
.sl-meta {
  margin: 0;
  font: 600 11px/1.4 var(--mono, ui-monospace, monospace);
  letter-spacing: .2em; text-transform: uppercase;
  color: #8796aa; font-variant-numeric: tabular-nums;
}

.sl-skip {
  position: absolute; right: 12px; bottom: 12px;
  min-height: 44px; min-width: 44px; padding: 0 16px;
  border: 0; border-radius: 6px; background: transparent;
  color: #7d8a9c; cursor: pointer;
  font: 600 11px var(--mono, ui-monospace, monospace);
  letter-spacing: .18em; text-transform: uppercase;
  transition: color .16s ease;
}
.sl-skip:focus-visible { outline: 2px solid var(--accent, #5ec9ff); outline-offset: 2px; color: #dbe4f0; }
@media (hover: hover) and (pointer: fine) {
  .sl-skip:hover { color: #dbe4f0; }
}

@media (max-width: 640px) {
  .sl-hud { bottom: max(9vh, 64px); }
  .sl-meta { font-size: 10px; letter-spacing: .16em; }
}

/* Reduced motion: no camera, no spin, no blink. The logo and the matchup sit
   still on the veil and only opacity changes; simload.js reads the query. */