/* ============================================================================
   SCREENS — per-screen composition (layouts sit on the fixed 1920x1080 stage,
   which is scaled to fit every display, so no per-device breakpoints needed)
   ============================================================================ */

/* ---- Screen 0: Attract --------------------------------------------------- */
#screen-attract .attract-stack{ display:grid; place-items:center; gap:38px; }
#screen-attract .logo-row{ margin-bottom:6px; }
#screen-attract .attract-prompt{
  font-family:var(--font-display); font-size:64px; letter-spacing:.04em;
  animation:floaty 4.5s ease-in-out infinite;
}
#screen-attract .attract-sub{ font-size:24px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-3); }
#screen-attract .touch-ico{ font-size:48px; opacity:.8; animation:floaty 3s ease-in-out infinite; }

/* ---- Live: Standby (minister-triggered) ---------------------------------- */
#screen-standby .standby-stack{ display:grid; place-items:center; gap:30px; }
#screen-standby .standby-wait{
  display:inline-flex; align-items:center; gap:14px;
  font-size:22px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-3);
  padding:14px 30px; border:1px solid var(--glass-brd); border-radius:999px;
  background:var(--glass-bg-2); backdrop-filter:blur(8px);
}
#screen-standby .sb-dot{
  width:14px; height:14px; border-radius:50%; background:var(--gold-2);
  box-shadow:0 0 0 0 rgba(231,197,107,.6); animation:sbPulse 1.8s ease-out infinite;
}
@keyframes sbPulse{
  0%{ box-shadow:0 0 0 0 rgba(231,197,107,.55); }
  70%{ box-shadow:0 0 0 18px rgba(231,197,107,0); }
  100%{ box-shadow:0 0 0 0 rgba(231,197,107,0); }
}

/* ---- Screen 1: Welcome --------------------------------------------------- */
#screen-welcome .welcome-stack{ display:grid; place-items:center; gap:30px; }
#screen-welcome .kicker{ margin-bottom:2px; }
#screen-welcome .welcome-title{ max-width:1500px; }
#screen-welcome .welcome-note{ margin-top:10px; }

/* ---- Screen 2: Dignitary welcome ----------------------------------------- */
#screen-dignitary .dig-stack{ display:grid; place-items:center; gap:14px; position:relative; }
#screen-dignitary .dig-line1{ font-family:var(--font-display); font-size:56px; color:var(--white-2); }
#screen-dignitary .dig-line2{ font-family:var(--font-display); font-size:92px; }
#screen-dignitary .dig-sweep{
  position:absolute; inset:-40% -10%; z-index:-1;
  background:linear-gradient(100deg, transparent 42%, rgba(228,197,107,.10) 50%, transparent 58%);
  background-size:240% 100%; animation:sheen 7s ease-in-out infinite;
}

/* ---- Screen 3: Button ---------------------------------------------------- */
#screen-button{ position:relative; }
#screen-button .seal-subnote{ font-family:var(--font-display); font-size:34px; color:var(--white-2); }

/* ---- Screen 4: Ribbon ---------------------------------------------------- */
#screen-ribbon .ribbon-wrap{ display:grid; place-items:center; gap:30px; width:100%; max-width:1500px; }

/* ---- Screen 5: Curtain --------------------------------------------------- */
#screen-curtain .curtain-msg{ display:grid; place-items:center; gap:14px; z-index:2; }

/* ---- Screen 6: Plaque ---------------------------------------------------- */
#screen-plaque{ align-content:center; }

/* ---- Screen 7: Overview -------------------------------------------------- */
#screen-overview .card-grid{ margin-top:6px; }

/* ---- Screen 8: Labs ------------------------------------------------------ */
#screen-labs{ align-content:center; }
#screen-labs .lab-counter{ position:absolute; right:120px; top:104px; font-size:16px; letter-spacing:.2em; color:var(--muted); }

/* ---- Screen 9: Equipment ------------------------------------------------- */
#screen-equipment{ align-content:center; }

/* ---- Screen 10: Investment ----------------------------------------------- */
#screen-investment .invest-stack{ display:grid; place-items:center; width:100%; }

/* ---- Screen 11: Impact --------------------------------------------------- */
#screen-impact .stat-grid{ margin-top:4px; }

/* ---- Screen 12: Roadmap -------------------------------------------------- */
#screen-roadmap{ align-content:center; }

/* ---- Screen 13: Completion ----------------------------------------------- */
#screen-completion .finale-stack{ display:grid; place-items:center; gap:26px; position:relative; }
#screen-completion .finale-title{ font-family:var(--font-display); font-size:96px; }
#screen-completion .finale-status{ font-size:34px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-hi); }
#screen-completion .finale-coe{ font-family:var(--font-display); font-size:46px; color:var(--white-2); }
#screen-completion .finale-date{ font-size:24px; color:var(--gold-3); letter-spacing:.08em; }
#screen-completion .finale-thanks{ font-size:20px; color:var(--muted); font-weight:300; margin-top:8px; }

/* small reusable section title used across showcase screens */
.showcase-head .kicker{ margin-bottom:8px; }