/* Sheri Garba Live v1.1.1 · program stage (shared by the billboard and the operator monitors)
 *
 * .stage-host   any box; becomes a size container
 * .stage        locked to the frame's aspect ratio (contain) or stretched to the host
 * .stage-frame  the predefined frame artwork
 * .stage-win    the frame's window; live video, standby, overlays and dip cover live here
 * All overlay sizes are in cqh/cqw of the window, so the same markup reads correctly on a
 * 6 m LED wall and on a 400 px monitor tile.
 */

.stage-host { position: relative; container-type: size; overflow: hidden; background: #000; }

.stage {
  --ar: 2;
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100cqw, calc(100cqh * var(--ar)));
  height: min(100cqh, calc(100cqw / var(--ar)));
  background: var(--maroon-950, #170306);
  overflow: hidden;
  isolation: isolate;
}
.stage[data-layout="stretch"] { width: 100%; height: 100%; }

.stage-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; user-select: none; -webkit-user-drag: none; z-index: 0; }

.stage-win {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  background: #050102;
  container-type: size;
}

/* ---------------------------------------------------------------- video */
.stage-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #000;
  opacity: 0; transition: opacity 0.35s ease;
  z-index: 2;
}
.stage[data-fit="contain"] .stage-video { object-fit: contain; }
/* once the video size is known, stage.js sizes it to its own aspect and applies digital PTZ */
.stage-video.is-laid {
  inset: auto; object-fit: fill; transform-origin: 50% 50%;
  transition: opacity 0.35s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.stage-video.is-laid.no-anim { transition: opacity 0.35s ease; }
.stage.is-live .stage-video { opacity: 1; }

/* -------------------------------------------------------------- standby */
.stage-standby {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(140, 32, 46, 0.55) 0%, rgba(60, 10, 18, 0.2) 45%, transparent 70%),
    radial-gradient(80% 60% at 50% 110%, rgba(242, 154, 31, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #2a0710 0%, #19040a 60%, #120307 100%);
  color: var(--cream, #f6ebd9);
  text-align: center;
}
.sb-inner { position: absolute; inset: 0; }
.sb-ring {
  position: absolute; left: 50%; top: 40%;
  width: 40cqh; height: 40cqh; margin: -20cqh 0 0 -20cqh;
  animation: sb-spin 48s linear infinite;
}
.sb-ring.outer { width: 56cqh; height: 56cqh; margin: -28cqh 0 0 -28cqh; animation-duration: 90s; animation-direction: reverse; opacity: 0.55; }
.sb-dot {
  position: absolute; left: 50%; top: 50%;
  width: 3.4cqh; height: 3.4cqh; margin: -1.7cqh 0 0 -1.7cqh; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c9 0%, var(--gold-400, #e8c06a) 40%, var(--gold-600, #a97a2c) 100%);
  box-shadow: 0 0 1.6cqh rgba(244, 213, 141, 0.55);
}
.sb-ring.outer .sb-dot { width: 1.6cqh; height: 1.6cqh; margin: -0.8cqh 0 0 -0.8cqh; background: var(--marigold, #f29a1f); box-shadow: 0 0 1cqh rgba(242, 154, 31, 0.6); }
.sb-core {
  position: absolute; left: 50%; top: 40%;
  width: 9cqh; height: 9cqh; margin: -4.5cqh 0 0 -4.5cqh; border-radius: 50%;
  border: 0.5cqh solid var(--gold-400, #e8c06a);
  display: grid; place-items: center;
}
.sb-core::after {
  content: ""; width: 4.6cqh; height: 4.6cqh; border-radius: 50%;
  background: var(--tally-pgm, #ec2b34);
  box-shadow: 0 0 2.4cqh rgba(236, 43, 52, 0.7);
  animation: sb-pulse 2.4s ease-in-out infinite;
}
.sb-text { position: absolute; left: 6cqw; right: 6cqw; top: 66%; }
.sb-title { display: none; font-family: var(--f-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 4.2cqh; color: var(--gold-400, #e8c06a); margin-bottom: 1.6cqh; }
.sb-headline {
  font-family: var(--f-display); font-weight: 400; font-size: 9cqh; line-height: 1.05; margin: 0;
  background: linear-gradient(180deg, #fbe7b0 0%, var(--gold-400, #e8c06a) 50%, var(--gold-600, #a97a2c) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.sb-sub { margin-top: 2.2cqh; font-family: var(--f-label); font-weight: 600; font-size: 4.4cqh; letter-spacing: 0.06em; color: var(--cream, #f6ebd9); opacity: 0.9; }
.stage[data-frame="none"] .sb-title { display: block; }
.stage[data-frame="none"] .sb-ring { top: 36%; }
.stage[data-frame="none"] .sb-core { top: 36%; }
.stage[data-frame="none"] .sb-text { top: 60%; }

@keyframes sb-spin { to { transform: rotate(360deg); } }
@keyframes sb-pulse { 0%, 100% { transform: scale(0.82); opacity: 0.85; } 50% { transform: scale(1); opacity: 1; } }

/* ------------------------------------------------------------- overlays */
.stage-ovl { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
.stage.is-live .stage-ovl { opacity: 1; }

.ovl-live {
  position: absolute; top: 3.2cqh; right: 2.4cqw;
  display: flex; align-items: center; gap: 1cqh;
  padding: 0.9cqh 1.8cqh 0.9cqh 1.4cqh; border-radius: 0.8cqh;
  background: var(--tally-pgm, #ec2b34); color: #fff;
  font-family: var(--f-label); font-weight: 700; font-size: 3.4cqh; letter-spacing: 0.14em; line-height: 1;
  box-shadow: 0 0.6cqh 2cqh rgba(0, 0, 0, 0.35);
}
.ovl-live::before { content: ""; width: 1.5cqh; height: 1.5cqh; border-radius: 50%; background: #fff; animation: sb-pulse 1.6s ease-in-out infinite; }

.ovl-bug {
  position: absolute; top: 3.2cqh; left: 2.4cqw;
  display: flex; align-items: center; gap: 1.4cqh;
  padding: 1cqh 2cqh 1cqh 1.2cqh; border-radius: 1cqh;
  background: linear-gradient(90deg, rgba(34, 6, 11, 0.86), rgba(34, 6, 11, 0.62));
  border: 0.25cqh solid rgba(232, 192, 106, 0.55);
}
.ovl-bug .mark { width: 5cqh; height: 5cqh; }
.ovl-bug .t1 { font-family: var(--f-label); font-weight: 700; font-size: 3.2cqh; letter-spacing: 0.1em; color: var(--gold-400, #e8c06a); line-height: 1; }
.ovl-bug .t2 { font-family: var(--f-ui); font-weight: 600; font-size: 2.3cqh; color: var(--cream, #f6ebd9); opacity: 0.9; margin-top: 0.5cqh; line-height: 1; }

.ovl-lower {
  position: absolute; left: 2.4cqw; bottom: 4cqh; max-width: 78cqw;
  transform: translateY(1cqh); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
}
.ovl-lower.on { opacity: 1; transform: none; }
.ovl-lower .lt-title {
  display: inline-block; padding: 1.1cqh 2.4cqh 1cqh;
  background: linear-gradient(90deg, #7a1424, #4a0c17);
  border-left: 0.9cqh solid var(--gold-400, #e8c06a);
  font-family: var(--f-label); font-weight: 700; font-size: 5cqh; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; line-height: 1.05;
}
.ovl-lower .lt-sub {
  display: block; width: max-content; max-width: 100%; margin-top: 0.4cqh; padding: 0.8cqh 2.4cqh;
  background: rgba(20, 4, 8, 0.82); color: var(--gold-300, #f4d58d);
  font-family: var(--f-ui); font-weight: 600; font-size: 3cqh; line-height: 1.1;
}
.stage.has-ticker .ovl-lower { bottom: 11cqh; }

.ovl-ticker {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7cqh;
  display: none; align-items: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(74, 12, 23, 0.95), rgba(34, 6, 11, 0.98));
  border-top: 0.3cqh solid var(--gold-500, #d4a24c);
}
.stage.has-ticker .ovl-ticker { display: flex; }
.ovl-ticker .tk-track { display: flex; width: max-content; animation: tk-run var(--tk-dur, 30s) linear infinite; will-change: transform; }
.ovl-ticker .tk-item { padding-right: 8cqw; white-space: nowrap; font-family: var(--f-label); font-weight: 600; font-size: 3.6cqh; letter-spacing: 0.04em; color: var(--cream, #f6ebd9); }
@keyframes tk-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----------------------------------------------------------- dip cover */
.stage-cover {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: radial-gradient(90% 80% at 50% 45%, #5a1220 0%, #2a0710 55%, #14030a 100%);
  opacity: 0; pointer-events: none; transition: opacity 0.42s ease;
}
.stage.is-covered .stage-cover { opacity: 1; }
.stage-cover .mark { width: 22cqh; height: 22cqh; opacity: 0.95; }