/* Prime Security booth loop — stage, chrome, components, scenes.
   No CSS transitions/animations: every animated property is set by JS from t (deterministic). */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; user-select: none; -webkit-user-select: none; }
body {
  font-family: var(--sans); color: var(--text);
  -webkit-font-smoothing: antialiased; font-kerning: normal; text-rendering: geometricPrecision;
}
body.idle, body.idle * { cursor: none !important; }
img { -webkit-user-drag: none; }

#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--bg); transform-origin: 0 0; }
.abs { position: absolute; }
.layer { position: absolute; inset: 0; opacity: 0; }
svg.dg { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; }
.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: var(--track-mono); }

/* z-order: construct < scenes < headers < vignette/tabs < yellow hit < seam < logo < black
   (vignette sits under the yellow hit so the brand yellow stays flat; it is also off on the end card) */
#construct { z-index: 1; }
#layers { position: absolute; inset: 0; z-index: 3; }
#heads { position: absolute; inset: 0; z-index: 4; }
#tabs { z-index: 5; }
#hit { z-index: 6; }
#seam { z-index: 7; }
#vignette { inset: 0; z-index: 5; background: radial-gradient(ellipse at center, transparent 60%, #00000033 100%); pointer-events: none; }
#logo { z-index: 9; }
#black { inset: 0; z-index: 10; background: var(--bg); pointer-events: none; opacity: 0; }

/* ---------- persistent chrome ---------- */
/* top logo: always visible (client). The black copy is clipped to the yellow panel's coverage. */
#logo img { position: absolute; left: 0; top: 0; height: 100%; display: block; }
#logo img.w { position: relative; }
#logo img.k { display: none; }
/* optional tabs-nav (config TABS_NAV) */
#tabs { right: 112px; bottom: 52px; display: flex; gap: 24px; opacity: 0; }
.tab { width: 220px; }
.tab b { display: block; font-weight: 400; font-size: var(--fs-tab); line-height: 1; letter-spacing: 0; color: var(--text); opacity: .5; white-space: nowrap; }
.tab i { display: block; position: relative; height: 1px; margin-top: 12px; background: var(--hair); }
.tab i u { position: absolute; inset: 0; background: var(--yellow); transform-origin: left; transform: scaleX(0); }

/* act title: line mask + ghost-fill wipe (no counter/eyebrow: removed per client) */
.titlemask { left: 112px; top: 172px; overflow: hidden; padding-bottom: 6px; }
.title { position: relative; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.title .base { color: var(--ghost); opacity: .3; }
.title .fill { position: absolute; left: 0; top: 0; color: var(--white); clip-path: inset(0 100% 0 0); }

/* statues */
.statue { position: absolute; }
.statue img { display: block; height: 100%; filter: drop-shadow(0 30px 40px #00000090); }

/* ---------- components (§5) ---------- */
.diagram { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform: translate(10px, 20px) scale(.92); transform-origin: 0 0; }
.chiprow { display: flex; gap: 24px; }
.chiprow .chip { position: relative; }

.chip { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border: 1px solid var(--hair); border-radius: var(--r-chip);
  background: transparent; font-family: var(--mono); font-weight: 500; font-size: var(--fs-chip); line-height: 1; letter-spacing: var(--track-mono);
  color: var(--label-2); white-space: nowrap; text-transform: uppercase; }
.chip .pi { width: 24px; height: 24px; opacity: 0; flex: none; }
.chip .ck { width: 20px; height: 20px; opacity: 0; flex: none; color: var(--yellow); }

.node { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-node); padding: 18px 24px;
  font-size: var(--fs-node); font-weight: 500; line-height: 1.1; letter-spacing: -.005em; color: var(--text); white-space: nowrap; }
.node small { font-family: var(--mono); font-weight: 400; font-size: var(--fs-node-sub); line-height: 1; letter-spacing: var(--track-mono); color: var(--label-2); text-transform: uppercase; }
.node .row { display: flex; align-items: center; gap: 14px; }
.node.plan { background: transparent; border: 1px dashed var(--ghost); }
.node .pm { position: absolute; width: 10px; height: 10px; color: var(--ghost);
  background: linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
.node .pm.a { left: -5px; top: -5px; } .node .pm.b { right: -5px; top: -5px; } .node .pm.c { left: -5px; bottom: -5px; } .node .pm.d { right: -5px; bottom: -5px; }
.node.insert { background: var(--surface); border: 1px solid var(--yellow); }
.node.insert .pm { color: var(--yellow); }
.node.pkg { width: 96px; height: 96px; padding: 0; }

.panel { position: absolute; border: 1px solid var(--hair); background: var(--surface); border-radius: var(--r-card); }
.hdr { display: flex; gap: 14px; align-items: center; font-size: 28px; font-weight: 500; color: var(--text); white-space: nowrap; }

.gate { width: 6px; border-radius: 3px; background: var(--yellow); }
.gatecap { width: 48px; height: 48px; }

.shield { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair); background: var(--bg); color: var(--text);
  display: flex; align-items: center; justify-content: center; }
.shield .ico { width: 24px; height: 24px; }
.agent-tile { width: 112px; height: 112px; border-radius: var(--r-card); border: 1px solid var(--hair); overflow: hidden; background: var(--surface); }
.agent-tile img { width: 100%; height: 100%; display: block; }

.pill { display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border-radius: var(--r-pill); font-family: var(--mono); font-weight: 500;
  font-size: var(--fs-pill); line-height: 1; letter-spacing: var(--track-mono); text-transform: uppercase; white-space: nowrap; }
.pill.cx { translate: -50% 0; }
.pill.outcome { background: var(--yellow); color: var(--on-yellow); }
.pill.threat { background: transparent; border: 1px solid var(--threat); color: var(--threat); }
.note { font-family: var(--mono); font-weight: 400; font-size: var(--fs-note); line-height: 1; letter-spacing: var(--track-mono); color: var(--label-2); text-transform: uppercase; white-space: nowrap; }
.ico { width: 28px; height: 28px; flex: none; }

/* ---------- opener ---------- */
.stone { filter: drop-shadow(0 30px 40px #000000b0); }
.stagelbl { width: 460px; text-align: center; }
.stagelbl b { display: block; font-size: var(--fs-tablet); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; color: var(--text); }
.stagelbl span { display: block; margin-top: 14px; }

/* ---------- yellow hit + end card (§8) ---------- */
#hit { position: absolute; inset: 0; background: var(--yellow); clip-path: inset(0 100% 0 0); overflow: hidden; display: none; }
#seam { position: absolute; inset: 0; background: var(--bg); transform: translateY(100%); overflow: hidden; }
.ptag { padding: 10px 16px; border: 1px solid var(--hair); border-radius: var(--r-chip); font-family: var(--mono); font-weight: 500; font-size: var(--fs-phase);
  line-height: 1; letter-spacing: var(--track-mono); color: var(--label-2); white-space: nowrap; background: var(--bg); }
.ccard { position: absolute;  width: 300px; height: 150px; padding: 24px; border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.ccard svg { width: 40px; height: 40px; display: block; }
.ccard div { margin-top: 14px; font-size: var(--fs-card); font-weight: 500; line-height: 1.15; letter-spacing: -.005em; color: var(--text); }
.ccard u { position: absolute; left: 0; top: 0; right: 0; height: 1px; background: var(--yellow); transform-origin: left; transform: scaleX(0); }
.tagline { font-size: var(--fs-tagline); font-weight: 500; letter-spacing: -.02em; line-height: 1; white-space: nowrap; position: relative; }
.tagline .base { color: var(--ghost); opacity: .3; }
.tagline .fill { position: absolute; left: 0; top: 0; color: var(--text); clip-path: inset(0 100% 0 0); }
.cta { font-family: var(--mono); font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--text); white-space: nowrap; }

/* debug HUD (D or #debug) */
#hud { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; display: none; gap: 14px; align-items: center; padding: 10px 16px;
  background: #000c; color: #ccc; font: 13px var(--mono); }
#hud.on { display: flex; }
#hud input { flex: 1; }