/* Pickscreen hero demo - synthetic grid. No video, no images, no external assets.
   Continuous motion is transform/opacity only; every edge is square and every
   shadow is a hard offset, matching the app's retro-theater surface. */

.stage {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;               /* a stray drag must not select the mock scores */
  --pad: clamp(3px, 0.75vw, 9px);
}

/* ---- panes ---- */
.stage .pane {
  position: absolute;
  overflow: hidden;
  container-type: size;          /* the scorebug sizes off its own pane, like a real bug */
  background: var(--cell);
  border: 1px solid var(--stroke);
  border-radius: 0;
  transition: left .6s cubic-bezier(.22,.61,.36,1),
              top .6s cubic-bezier(.22,.61,.36,1),
              width .6s cubic-bezier(.22,.61,.36,1),
              height .6s cubic-bezier(.22,.61,.36,1),
              opacity .4s ease,
              transform .5s cubic-bezier(.22,.61,.36,1);
}
.stage .pane.enter { opacity: 0; transform: scale(.94); }
.stage .pane.is-hidden { opacity: 0; }
/* outline, not a fatter border: the ring must not reflow the pane on every audio hop */
.stage .pane.focused { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 2; }

/* inner falloff: makes each pane read as a lit screen rather than a flat swatch */
.stage .pane::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 4px),
              radial-gradient(135% 135% at 50% 34%, transparent 52%, rgba(0,0,0,.34));
}

/* ---- drifting texture: the shimmer that never repeats across panes ---- */
.stage .tex {
  position: absolute;
  inset: -40%;
  opacity: .82;
  background: radial-gradient(58% 30% at 50% 76%, rgba(255,255,255,.075), transparent 72%),
              radial-gradient(ellipse at 30% 40%, var(--tex-a), transparent 60%),
              linear-gradient(160deg, var(--tex-b), var(--void));
  animation: drift var(--tex-dur, 28s) linear infinite alternate;
  will-change: transform;
}
@keyframes drift {
  from { transform: translate3d(-6%, -4%, 0) scale(1); }
  to   { transform: translate3d(6%, 4%, 0) scale(1.12); }
}

/* ---- slow light sweep, staggered so no two panes breathe together ---- */
.stage .sheen {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -70%;
  width: 55%;
  pointer-events: none;
  background: linear-gradient(102deg, transparent, rgba(255,255,255,.05), transparent);
  animation: sheen var(--sheen-dur, 15s) linear infinite;
  animation-delay: var(--sheen-delay, 0s);
  will-change: transform;
}
@keyframes sheen {
  0%        { transform: translate3d(0, 0, 0); }
  45%, 100% { transform: translate3d(460%, 0, 0); }
}

/* ---- per-pane palettes: same wall, six different rooms ---- */
.stage .pane:nth-child(1) { --tex-a: #1d3a26; --tex-b: #12241a; --tex-dur: 26s; --sheen-dur: 15s; --sheen-delay: 0s; }
.stage .pane:nth-child(2) { --tex-a: #16303f; --tex-b: #0e1e2a; --tex-dur: 34s; --sheen-dur: 19s; --sheen-delay: -6s; }
.stage .pane:nth-child(3) { --tex-a: #3f2d16; --tex-b: #241a0e; --tex-dur: 30s; --sheen-dur: 13s; --sheen-delay: -3s; }
.stage .pane:nth-child(4) { --tex-a: #2a1d33; --tex-b: #180f1f; --tex-dur: 38s; --sheen-dur: 21s; --sheen-delay: -11s; }
.stage .pane:nth-child(5) { --tex-a: #14322d; --tex-b: #0c1f1c; --tex-dur: 24s; --sheen-dur: 17s; --sheen-delay: -8s; }
.stage .pane:nth-child(6) { --tex-a: #332020; --tex-b: #1f1414; --tex-dur: 32s; --sheen-dur: 23s; --sheen-delay: -14s; }

/* ---- scorebug plaque ---- */
.stage .scorebug {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  min-width: 4.5em;
  background: var(--surface);
  border: 1px solid var(--stroke-strong);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: .2em .45em .15em;
  font-family: var(--font-display);
  font-size: clamp(12px, 2.7cqw, 20px);     /* the featured pane earns a bigger bug */
  line-height: 1.12;
  letter-spacing: .04em;
  color: var(--text-1);
}
.stage .scorebug .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .7em;
}
.stage .scorebug .team { color: var(--text-2); }
.stage .scorebug .score { color: var(--text-1); text-align: right; min-width: 1.5em; }
.stage .scorebug .score.bump { animation: bump .5s ease-out; }
@keyframes bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.stage .scorebug .meta {
  justify-content: flex-start;
  gap: .4em;
  margin-top: .12em;
  padding-top: .12em;
  border-top: 1px solid var(--stroke);
  font-size: .8em;
  color: var(--text-3);
}
.stage .scorebug .live {
  align-self: center;
  width: .5em;
  height: .5em;
  background: currentColor;
  color: #e05a4e;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .3; } }
.stage .scorebug .per { margin-left: auto; }

/* ---- audio chip: hops to whichever pane owns the sound ---- */
.stage .audio {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  display: flex;
  align-items: center;
  padding: .18em .3em;
  background: var(--surface);
  border: 1px solid var(--accent);
  box-shadow: 3px 3px 0 var(--shadow);
  color: var(--accent);
  font-size: clamp(9px, 2.2cqw, 15px);      /* sized off the pane, like its scorebug */
  opacity: 0;
  transform: translate3d(0, -5px, 0);
  transition: opacity .3s ease, transform .3s ease;
}
.stage .pane.has-audio .audio { opacity: 1; transform: translate3d(0, 0, 0); }
.stage .audio svg { display: block; width: 1.15em; height: auto; }
.stage .audio .w1 { animation: wave 1.5s ease-in-out infinite; }
.stage .audio .w2 { animation: wave 1.5s ease-in-out .25s infinite; }
@keyframes wave { 0%, 100% { opacity: .25; } 45% { opacity: 1; } }

/* ---- pause semantics: freeze every running animation in place ----
   `paused` is the manual control; `offscreen` is scrolled-away or tab-hidden.
   Two classes so one can never clear the other. */
.stage.paused *,
.stage.paused *::before,
.stage.paused *::after,
.stage.offscreen *,
.stage.offscreen *::before,
.stage.offscreen *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .stage * { animation: none !important; transition: none !important; }
}