/* The audience surface (presenter preview and audience window): slides, website decks, idle screen, corner timer. */

.stage {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  container-type: size;
}
.stage-slide, .stage-idle, .stage-msg, .stage-web { position: absolute; inset: 0; }
.stage-web { background: #fff; }
.stage-timer {
  --tone: #fff;
  position: absolute; top: 2.2cqh; right: 1.6cqw; z-index: 5;
  padding: 0.5cqh 1.2cqw;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--tone);
  font-size: clamp(11px, 2cqw, 40px); font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.stage-web iframe { width: 100%; height: 100%; border: 0; display: block; }
.stage-slide { display: grid; place-items: center; }
.stage-slide canvas { display: block; }
.stage-msg { display: grid; place-items: center; color: var(--muted); font-size: 3cqw; }

.stage-idle { display: grid; place-items: center; text-align: center; color: #fff; }
.idle-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.idle-content { position: relative; padding: 0 8cqw; display: grid; gap: 1.6cqh; }
.idle-title { font-size: clamp(16px, 6.4cqw, 120px); font-weight: 750; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.idle-sub { font-size: clamp(10px, 2.3cqw, 44px); opacity: 0.75; text-wrap: balance; }
.idle-qr {
  position: absolute; right: 3cqw; bottom: 3cqw;
  display: grid; gap: 0.8cqw; justify-items: center;
  padding: 1.2cqw;
  border-radius: 1.2cqw;
  background: rgba(255, 255, 255, 0.94);
  color: #0b0d12;
  font: 600 clamp(8px, 1.1cqw, 20px) var(--mono);
}
.idle-qr img { width: clamp(60px, 12cqw, 240px); height: auto; display: block; }

.stage-idle[data-theme='aurora'] { background: #07080d; }
.stage-idle[data-theme='aurora'] .idle-bg {
  background:
    radial-gradient(40% 55% at 20% 30%, rgba(139, 108, 255, 0.55), transparent 70%),
    radial-gradient(45% 60% at 80% 70%, rgba(34, 211, 238, 0.4), transparent 70%),
    radial-gradient(35% 45% at 70% 20%, rgba(236, 72, 153, 0.3), transparent 70%);
  filter: blur(4cqw);
  animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { transform: scale(1.1) translate(0, 0) rotate(0deg); }
  50% { transform: scale(1.25) translate(-4%, 3%) rotate(8deg); }
  100% { transform: scale(1.15) translate(4%, -3%) rotate(-6deg); }
}
.stage-idle[data-theme='midnight'] { background: radial-gradient(120% 90% at 50% 0%, #1a1f2e, #05060a 70%); }
.stage-idle[data-theme='paper'] { background: #f4f1ea; color: #1d1b17; }
.stage-idle[data-theme='paper'] .idle-sub { opacity: 0.65; }
.stage-idle[data-theme='image'] { background: #000; }
.stage-idle[data-theme='image']::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.15)); }
.stage-idle[data-theme='image'] .idle-content, .stage-idle .idle-qr { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .idle-bg { animation: none !important; } }

/* Timer cue: elements set --cue-color (see stage-cue.js) */
.stage-cue, .stage-hold { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.stage-cue { opacity: 0; transition: opacity 0.6s; }
.stage-cue.on { opacity: 1; }
.stage-cue[data-effect='glow'], .stage-cue[data-effect='pulse'] {
  box-shadow: inset 0 0 0 0.6cqw var(--cue-color), inset 0 0 7cqw color-mix(in srgb, var(--cue-color) 45%, transparent);
}
.stage-cue[data-effect='pulse'].on { animation: cue-pulse 1.4s ease-in-out infinite; }
.stage-cue[data-effect='corner']::after {
  content: '';
  position: absolute; top: 2.6cqh; left: 1.8cqw;
  width: 2cqw; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cue-color);
  box-shadow: 0 0 2.5cqw var(--cue-color);
}
.stage-hold { box-shadow: inset 0 0 0 0.3cqw var(--cue-color); }
.stage-banner {
  --cue-color: var(--warn);
  position: absolute; left: 50%; bottom: 5cqh; z-index: 7;
  transform: translateX(-50%);
  max-width: 80cqw;
  padding: 1.2cqh 2.6cqw;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.75);
  border: 0.25cqw solid var(--cue-color);
  color: #fff;
  font-size: clamp(12px, 2.4cqw, 48px); font-weight: 700;
  text-align: center;
  pointer-events: none;
}
.stage-banner.on { animation: banner-in 0.35s ease-out; }
@keyframes cue-pulse { 50% { opacity: 0.3; } }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, 1.5cqh); } }
@media (prefers-reduced-motion: reduce) { .stage-cue.on, .stage-banner.on { animation: none; } }

/* Laser pointers (pointer-layer.js), above slides and cues */
.pointer-layer { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; pointer-events: none; }

.hide-cursor, .hide-cursor * { cursor: none !important; }