/* Stage output. Sized with container units so the console preview is an exact miniature of the projector. */
.stage-root {
  --st-gold: #E7B65A;
  --st-gold-2: #F6D58A;
  --st-cream: #FFF6E2;
  --st-green-1: #1E7A4E;
  --st-green-2: #0C3B26;
  --st-green-3: #04160D;
  --st-display: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --st-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --st-ml: "Noto Serif Malayalam", "Malayalam Sangam MN", "Kartika", serif;
  position: relative;
  overflow: hidden;
  background: #000;
  color: #fff;
  container-type: size;
  font-family: var(--st-sans);
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

.st-visuals, .st-over, .st-black, .st-vis { position: absolute; inset: 0; }

.st-vis { opacity: 0; transition: opacity .7s ease; }
.st-vis.on { opacity: 1; }
.st-vis > video, .st-vis > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.stage-root[data-fit="contain"] .st-vis > video, .stage-root[data-fit="contain"] .st-vis > img { object-fit: contain; }

/* ---------- brand surface (slate and title card) ---------- */
.st-brand {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(231, 182, 90, .16), transparent 70%),
    radial-gradient(120% 100% at 50% 10%, var(--st-green-1) 0%, var(--st-green-2) 48%, var(--st-green-3) 100%);
}
.st-wm {
  position: absolute; left: 50%; top: 50%;
  width: 150cqh; height: 150cqh; margin: -75cqh 0 0 -75cqh;
  background: url("../img/logo.svg") center / contain no-repeat;
  opacity: .07; filter: saturate(.6);
}
@media (prefers-reduced-motion: no-preference) {
  .st-wm { animation: st-spin 240s linear infinite; }
  .st-logo { animation: st-spin 120s linear infinite; }
}
@keyframes st-spin { to { transform: rotate(360deg); } }

.st-kasavu {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5.2cqh;
  background:
    linear-gradient(var(--st-gold), var(--st-gold)) 0 0.9cqh / 100% 0.55cqh no-repeat,
    linear-gradient(var(--st-gold-2), var(--st-gold-2)) 0 2.1cqh / 100% 0.22cqh no-repeat,
    linear-gradient(var(--st-gold), var(--st-gold)) 0 3cqh / 100% 1.4cqh no-repeat,
    var(--st-cream);
  box-shadow: 0 -1cqh 3cqh rgba(0, 0, 0, .25);
}

.st-slate-in, .st-card-in {
  position: relative; z-index: 1; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 8cqw 6cqh; max-width: 100%;
}
.st-logo { width: 19cqh; height: 19cqh; margin-bottom: 3.2cqh; filter: drop-shadow(0 1.2cqh 3cqh rgba(0, 0, 0, .35)); }
.st-ml { font-family: var(--st-ml); font-weight: 700; color: var(--st-gold); font-size: 5.2cqh; line-height: 1.3; margin: 0 0 1.2cqh; }
.st-name {
  font-family: var(--st-display); font-weight: 600; letter-spacing: -.01em;
  font-size: 13cqh; line-height: 1; margin: 0; color: #fff;
  text-wrap: balance; overflow-wrap: anywhere;
  text-shadow: 0 .6cqh 3cqh rgba(0, 0, 0, .35);
}
.st-meta { margin: 2.6cqh 0 0; font-size: 3.4cqh; color: rgba(255, 246, 226, .82); letter-spacing: .02em; }
.st-upnext {
  margin: 5cqh 0 0; display: inline-flex; align-items: center; gap: 1.6cqh;
  font-size: 3.6cqh; font-weight: 600; color: #fff;
  padding: 1.4cqh 3cqh 1.4cqh 1.4cqh; border-radius: 99cqh;
  background: rgba(0, 0, 0, .28); border: .2cqh solid rgba(231, 182, 90, .45);
}
.st-upnext span {
  font-size: 2.2cqh; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #1A1200; background: var(--st-gold); padding: .9cqh 1.8cqh; border-radius: 99cqh;
}

.st-kicker {
  display: inline-flex; align-items: center; gap: 1.6cqh; margin: 0 0 3cqh;
  font-size: 2.8cqh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--st-gold);
}
.st-kicker i { width: 1cqh; height: 1cqh; border-radius: 50%; background: var(--st-gold); opacity: .7; }
.st-title {
  font-family: var(--st-display); font-weight: 600; letter-spacing: -.01em;
  font-size: 12cqh; line-height: 1.04; margin: 0; text-wrap: balance; overflow-wrap: anywhere;
  text-shadow: 0 .6cqh 3cqh rgba(0, 0, 0, .35);
}
.st-perf { margin: 3cqh 0 0; font-size: 4.4cqh; color: rgba(255, 246, 226, .88); text-wrap: balance; }

/* ---------- powered by (logo slate only) ---------- */
.st-credit {
  position: absolute; right: 4cqw; bottom: 8.2cqh; z-index: 1;
  display: flex; align-items: center; gap: 1.3cqh; opacity: .78;
  font-size: 1.75cqh; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 246, 226, .8);
}
.st-credit img { height: 3.1cqh; width: auto; display: block; }

/* ---------- logo slate over everything ---------- */
.st-over { z-index: 3; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.stage-root.is-slate .st-over { opacity: 1; }

/* ---------- lower third ---------- */
.st-lower {
  position: absolute; left: 5cqw; bottom: 7cqh; z-index: 2; max-width: 70cqw;
  opacity: 0; transform: translateY(2cqh); transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
}
.st-lower.show { opacity: 1; transform: none; }
.st-lower-in {
  padding: 2.2cqh 4cqh 2.4cqh 3.4cqh; border-left: .9cqh solid var(--st-gold);
  background: linear-gradient(90deg, rgba(4, 22, 13, .88), rgba(4, 22, 13, .62));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 0 1.6cqh 1.6cqh 0;
  box-shadow: 0 1.6cqh 5cqh rgba(0, 0, 0, .35);
}
.st-lower-kicker { display: block; font-size: 2.1cqh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--st-gold); }
.st-lower-title { font-family: var(--st-display); font-weight: 600; font-size: 6.2cqh; line-height: 1.08; margin: .8cqh 0 0; overflow-wrap: anywhere; }
.st-lower-sub { margin: .8cqh 0 0; font-size: 3cqh; color: rgba(255, 246, 226, .86); }
.st-lower-sub:empty { display: none; }

/* ---------- blackout ---------- */
.st-black { z-index: 5; background: #000; opacity: 0; pointer-events: none; transition: opacity .5s ease; display: flex; align-items: center; justify-content: center; }
.stage-root.is-black .st-black { opacity: 1; }
.st-black span { display: none; }
.is-preview .st-black span {
  display: inline-block; font-size: 6cqh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); border: .4cqh solid rgba(255, 255, 255, .3); padding: 1.6cqh 4cqh; border-radius: 1.4cqh;
}