/* Zambrero Development · the conference screen.
   The dashboard's own language — black void, frosted glass, cream hairlines, Geist — composed as a
   perpetual piece: the intelligence behind the pipeline paints the show. 1920×1080, landscape. */
:root {
  --void: #000; --ink: #F2E7DA; --ink-soft: rgba(242,231,218,.62); --ink-dim: rgba(242,231,218,.38);
  --green: #083323; --tan: #C4A384; --brick: #9C4A32; --gold: #FFD79A;
  --edge: rgba(242,231,218,.14); --glass: rgba(10,12,14,.55);
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --u: calc(100vw / 1920);            /* one design pixel */
}
html, body { margin: 0; height: 100%; background: var(--void); color: var(--ink); font-family: var(--sans); overflow: hidden; }
body { cursor: none; -webkit-user-select: none; user-select: none; }
body.show-cursor { cursor: auto; }
* { box-sizing: border-box; }

/* ── Layers ── */
#stars, #map, #paint, #halo { position: fixed; inset: 0; }
#stars { z-index: 0; }
#halo { z-index: 1; pointer-events: none; opacity: 0; transition: opacity 2.4s ease;
  background: radial-gradient(ellipse 34% 48% at 62% 52%, rgba(120,160,190,.16), rgba(0,0,0,0) 70%); }
#map { z-index: 2; opacity: 0; transition: opacity 2.2s ease; }
#map.on { opacity: 1; }
#map .maplibregl-ctrl, #map .maplibregl-ctrl-attrib { display: none !important; }
#map canvas { outline: none; }
#paint { z-index: 3; pointer-events: none; }
#vig { position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse 72% 70% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); opacity: 0; transition: opacity 2s; }
#vig.on { opacity: 1; }
#ui { position: fixed; inset: 0; z-index: 5; pointer-events: none; }

/* ── Glass ── */
.glass { background: var(--glass); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--edge); border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.45), inset 0 1px 0 rgba(242,231,218,.08); }
.eyebrow { font: 500 calc(11 * var(--u)) / 1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }

/* Every panel arrives and leaves the same way. */
.panel { opacity: 0; transform: translateY(calc(14 * var(--u))); transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1); }
.panel.on { opacity: 1; transform: none; }

/* ── Chrome ── */
.mark { position: absolute; left: calc(72 * var(--u)); top: calc(56 * var(--u)); height: calc(30 * var(--u)); opacity: 0; transition: opacity 1.6s; }
.mark.on { opacity: .92; }
.rail { position: absolute; right: calc(72 * var(--u)); top: calc(60 * var(--u)); display: flex; gap: calc(22 * var(--u)); align-items: center; }
.rail span { font: 500 calc(11 * var(--u)) / 1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); transition: color 1s; display: flex; align-items: center; gap: calc(9 * var(--u)); }
.rail span::before { content: ''; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: currentColor; }
.rail span.on { color: var(--ink); }
.live { position: absolute; left: 50%; top: calc(56 * var(--u)); transform: translateX(-50%); display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(9 * var(--u)) calc(14 * var(--u)); border-radius: 999px; font: 500 calc(11 * var(--u)) / 1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.live i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #4ED6A1; box-shadow: 0 0 calc(10 * var(--u)) #4ED6A1; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ── The voice: the intelligence, speaking, bottom-left ── */
.voice { position: absolute; left: calc(72 * var(--u)); bottom: calc(64 * var(--u)); max-width: calc(820 * var(--u));
  font: 300 calc(30 * var(--u)) / 1.32 var(--sans); letter-spacing: -.005em; color: var(--ink); opacity: 0; transition: opacity .9s; }
.voice.on { opacity: 1; }
.voice .cur { display: inline-block; width: calc(2 * var(--u)); height: calc(30 * var(--u)); background: var(--ink); vertical-align: -.16em; margin-left: calc(5 * var(--u)); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.voice .who { display: block; font: 500 calc(11 * var(--u)) / 1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: calc(18 * var(--u)); }

/* ── The QR, always there, bottom-right ── */
.qr { position: absolute; right: calc(72 * var(--u)); bottom: calc(64 * var(--u)); display: flex; align-items: center; gap: calc(22 * var(--u)); padding: calc(16 * var(--u)); padding-right: calc(26 * var(--u)); opacity: 0; transition: opacity 1.6s; }
.qr.on { opacity: 1; }
.qr canvas { width: calc(132 * var(--u)); height: calc(132 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--ink); display: block; }
.qr .t { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.qr .t b { font: 500 calc(18 * var(--u)) / 1.2 var(--sans); color: var(--ink); }
.qr .t span { font: 400 calc(13 * var(--u)) / 1.4 var(--sans); color: var(--ink-soft); max-width: calc(220 * var(--u)); }
.qr .t em { font: 500 calc(11 * var(--u)) / 1 var(--mono); letter-spacing: .14em; color: var(--ink-dim); font-style: normal; margin-top: calc(4 * var(--u)); }

/* ── Hero (globe) ── */
.hero { position: absolute; left: calc(72 * var(--u)); top: 50%; transform: translateY(-50%); width: calc(640 * var(--u)); }
.hero.panel.on { transform: translateY(-50%); }
.hero h1 { margin: calc(18 * var(--u)) 0 calc(22 * var(--u)); font: 500 calc(92 * var(--u)) / .98 var(--sans); letter-spacing: -.03em; }
.hero p { margin: 0 0 calc(34 * var(--u)); font: 300 calc(21 * var(--u)) / 1.5 var(--sans); color: var(--ink-soft); max-width: calc(560 * var(--u)); }
.hero p b { font: 500 calc(21 * var(--u)) / 1 var(--mono); color: var(--ink); }
.stats { display: flex; gap: calc(14 * var(--u)); }
.stat { padding: calc(18 * var(--u)) calc(22 * var(--u)); min-width: calc(176 * var(--u)); border-radius: calc(16 * var(--u)); position: relative; overflow: hidden; }
.stat::after { content: ''; position: absolute; left: calc(22 * var(--u)); right: calc(22 * var(--u)); bottom: 0; height: 2px; background: var(--c, var(--ink)); opacity: .9; }
.stat b { display: block; font: 600 calc(44 * var(--u)) / 1 var(--mono); letter-spacing: -.02em; }
.stat small { display: block; margin-top: calc(10 * var(--u)); font: 400 calc(13 * var(--u)) / 1.3 var(--sans); color: var(--ink-soft); }

/* ── KPI strip (Australia) ── */
.kpis { position: absolute; left: 50%; top: calc(110 * var(--u)); transform: translateX(-50%); display: flex; gap: calc(10 * var(--u)); }
.kpis.panel.on { transform: translateX(-50%); }
.kpi { padding: calc(14 * var(--u)) calc(18 * var(--u)); min-width: calc(128 * var(--u)); border-radius: calc(14 * var(--u)); position: relative; }
.kpi::before { content: ''; position: absolute; left: 0; top: calc(14 * var(--u)); bottom: calc(14 * var(--u)); width: 2px; background: var(--c); border-radius: 2px; }
.kpi b { display: block; font: 600 calc(30 * var(--u)) / 1 var(--mono); }
.kpi small { display: block; margin-top: calc(7 * var(--u)); font: 400 calc(12 * var(--u)) / 1.2 var(--sans); color: var(--ink-soft); white-space: nowrap; }
.kpi.big { min-width: calc(190 * var(--u)); }
.kpi.big b { font-size: calc(38 * var(--u)); }
.kpi.big .eyebrow { margin-bottom: calc(8 * var(--u)); font-size: calc(10 * var(--u)); color: var(--c); }

/* ── Table (states) ── */
.table { position: absolute; left: calc(72 * var(--u)); bottom: calc(230 * var(--u)); width: calc(470 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); }
.table .th { display: flex; justify-content: space-between; padding: calc(4 * var(--u)) 0 calc(12 * var(--u)); border-bottom: 1px solid var(--edge); }
.table .th .eyebrow { font-size: calc(10 * var(--u)); }
.table .th .eyebrow i { display: inline-block; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; margin: 0 calc(5 * var(--u)) 0 calc(10 * var(--u)); vertical-align: middle; }
.table .tr { display: grid; grid-template-columns: calc(44 * var(--u)) 1fr calc(44 * var(--u)) calc(44 * var(--u)); align-items: center; padding: calc(9 * var(--u)) 0; font: 400 calc(14 * var(--u)) / 1 var(--sans);
  opacity: 0; transform: translateX(calc(-8 * var(--u))); transition: opacity .7s, transform .7s, background .7s; border-radius: calc(8 * var(--u)); }
.table .tr.on { opacity: 1; transform: none; }
.table .tr.hi { background: rgba(242,231,218,.07); }
.table .tr .code { font: 500 calc(10 * var(--u)) / 1 var(--mono); letter-spacing: .14em; color: var(--ink-dim); }
.table .tr .n { font: 500 calc(14 * var(--u)) / 1 var(--mono); text-align: right; }
.table .tr .n.p { color: var(--gold); }

/* ── Detail card (state / site), right ── */
.card { position: absolute; right: calc(72 * var(--u)); top: 50%; transform: translateY(-50%); width: calc(440 * var(--u)); padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u)); }
.card.panel.on { transform: translateY(-50%); }
.card .pill { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(7 * var(--u)) calc(11 * var(--u)); border-radius: 999px; border: 1px solid var(--edge);
  font: 500 calc(10.5 * var(--u)) / 1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.card .pill i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--c, var(--ink)); box-shadow: 0 0 calc(8 * var(--u)) var(--c, transparent); }
.card h2 { margin: calc(16 * var(--u)) 0 calc(6 * var(--u)); font: 500 calc(34 * var(--u)) / 1.08 var(--sans); letter-spacing: -.02em; }
.card .sub { font: 400 calc(14 * var(--u)) / 1.45 var(--sans); color: var(--ink-soft); margin-bottom: calc(20 * var(--u)); }
.card .grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)) calc(16 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--edge); }
.card .cell b { display: block; font: 500 calc(24 * var(--u)) / 1 var(--mono); letter-spacing: -.01em; }
.card .cell small { display: block; margin-top: calc(6 * var(--u)); font: 400 calc(11.5 * var(--u)) / 1.3 var(--sans); color: var(--ink-soft); }
.card .cell.wide { grid-column: 1 / -1; }
.card .cell.wide b { font: 500 calc(17 * var(--u)) / 1.3 var(--sans); }
.card .line { margin-top: calc(18 * var(--u)); font: 300 calc(14.5 * var(--u)) / 1.5 var(--sans); color: var(--ink-soft); }

/* ── Big number moment ── */
.moment { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.moment.panel.on { transform: translate(-50%, -50%); }
.moment b { display: block; font: 600 calc(260 * var(--u)) / 1 var(--mono); letter-spacing: -.05em; color: var(--ink); }
.moment span { display: block; margin-top: calc(10 * var(--u)); font: 300 calc(26 * var(--u)) / 1.3 var(--sans); color: var(--ink-soft); }

/* ── Progress hairline across the bottom ── */
.prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(242,231,218,.08); }
.prog i { display: block; height: 100%; width: 0; background: rgba(242,231,218,.45); transition: width 1s linear; }

/* A label on the map (state name, site name). */
.lbl { position: absolute; transform: translate(-50%, -50%); font: 500 calc(11 * var(--u)) / 1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; opacity: 0; transition: opacity 1s; }
.lbl.on { opacity: 1; }
.card .cell b.t { font: 500 calc(17 * var(--u)) / 1.3 var(--sans); }