/* Site palette. The mock shipped cyan; the live site is green with a cyan
   secondary, so the citadel uses the site's own colours. */
.tb3-hero{
  --cy:#36f9b3; --cy-dim:#15413a; --am:#ffc100; --rd:#ff4d5e;
  --bg:#0a0e13; --panel:#11161e; --ink:#e6edf3; --muted:#8b97a7; --dim:#5b6976;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.045);
  --mono:var(--tb-mono, ui-monospace, Consolas, monospace);
  --sans:inherit;
  position:relative; margin:0;
}
/* the theme's own hero padding must not apply to the stage */
.tb3-hero .tb3-stage{padding:0}
/* ---------- hero / 3D stage ---------- */
.tb3-hero{position:relative; height:340vh}
.tb3-stage{
  position:sticky; top:0; height:100vh; width:100%;
  overflow:hidden; background:#05070a;
}
#tb3-gl{position:absolute; inset:0; display:block; width:100%; height:100%}
.tb3-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(0,0,0,.55) 100%),
    linear-gradient(90deg, rgba(2,4,7,.82) 0%, rgba(2,4,7,.45) 26%, transparent 52%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 22%, transparent 62%, rgba(0,0,0,.8) 100%);
}
.tb3-scanlines{
  position:absolute; inset:0; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.14) 0 1px, transparent 1px 3px);
}
.tb3-noload{
  position:absolute; inset:0; display:none; place-items:center; text-align:center;
  font-family:var(--mono); font-size:13px; color:var(--muted); padding:24px;
}

/* HUD */
.tb3-hud{position:absolute; inset:0; pointer-events:none}
.tb3-hud-top{
  position:absolute; top:0; left:0; right:0; padding:22px 26px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.tb3-brand{display:flex; align-items:center; gap:10px; color:var(--ink); letter-spacing:.3em; font-weight:700}
.tb3-brand .tb3-dot{width:7px;height:7px;border-radius:50%;background:var(--cy);box-shadow:0 0 12px var(--cy)}
.tb3-hud-top .tb3-live{display:flex;align-items:center;gap:8px}
.tb3-hud-top .tb3-live b{color:var(--cy);font-weight:500}

.tb3-scenes{position:absolute; left:0; right:0; bottom:0; top:0}
.tb3-scene{
  position:absolute; left:26px; bottom:132px; max-width:min(640px,74vw);
  opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease;
}
.tb3-scene.tb3-on{opacity:1; transform:none}
.tb3-scene .tb3-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--cy);
  display:inline-block; padding:5px 10px; border:1px solid rgba(53,224,208,.3);
  background:rgba(53,224,208,.06); margin-bottom:16px;
}
.tb3-scene h1{
  font-size:clamp(38px,6.4vw,74px); line-height:.95; letter-spacing:-.035em; margin:0 0 14px; font-weight:700;
}
.tb3-scene h1 em{font-style:normal; color:var(--cy)}
.tb3-scene p{color:#b6c4d1; line-height:1.55; margin:0; max-width:46ch; font-size:15px}
.tb3-scene[data-scene="secure"] .tb3-tag{color:var(--am); border-color:rgba(255,181,71,.3); background:rgba(255,181,71,.07)}
.tb3-scene[data-scene="secure"] h1 em{color:var(--am)}
.tb3-scene[data-scene="run"] .tb3-tag{color:#8fd3ff; border-color:rgba(143,211,255,.3); background:rgba(143,211,255,.07)}
.tb3-scene[data-scene="run"] h1 em{color:#8fd3ff}

.tb3-telemetry{
  position:absolute; right:26px; bottom:132px; width:212px;
  font-family:var(--mono); font-size:11px; color:var(--muted);
  border-left:1px solid var(--line); padding-left:14px;
  display:none;
}
@media(min-width:900px){.tb3-telemetry{display:block}}
.tb3-telemetry .tb3-row{display:flex; justify-content:space-between; padding:5px 0; letter-spacing:.06em}
.tb3-telemetry .tb3-row span:last-child{color:var(--ink)}
.tb3-telemetry .tb3-row.tb3-bad span:last-child{color:var(--rd)}
.tb3-telemetry .tb3-row.tb3-good span:last-child{color:var(--cy)}


/* live interception log */
.tb3-eventlog{
  position:absolute; right:26px; bottom:300px; width:396px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
  display:none; pointer-events:none; text-align:right;
}
@media(min-width:1100px){.tb3-eventlog{display:block}}
.tb3-eventlog .tb3-row{
  display:flex; gap:12px; justify-content:flex-end; align-items:baseline;
  padding:2.5px 0; white-space:nowrap;
}
.tb3-eventlog .t{color:var(--dim); font-variant-numeric:tabular-nums}
.tb3-eventlog .c{font-weight:600; min-width:104px; text-align:left}
.tb3-eventlog .ip{color:var(--muted); font-variant-numeric:tabular-nums; min-width:104px; text-align:left}
.tb3-eventlog .g{color:var(--dim); min-width:20px}
.tb3-eventlog .v{color:var(--cy); font-weight:700}
.tb3-eventlog .tb3-hdr{
  color:var(--dim); font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  border-bottom:1px solid var(--line-2); padding-bottom:6px; margin-bottom:6px;
}

.tb3-progress{
  position:absolute; left:26px; right:26px; bottom:96px; height:1px; background:var(--line);
}
.tb3-progress i{position:absolute; inset:0 auto 0 0; background:var(--cy); box-shadow:0 0 10px var(--cy); width:0%}

.tb3-marquee{
  position:absolute; left:0; right:0; bottom:0; overflow:hidden;
  border-top:1px solid var(--line); background:rgba(5,7,10,.62);
  backdrop-filter:blur(6px); padding:13px 0;
}
.tb3-marquee ul{display:flex; gap:34px; list-style:none; margin:0; padding:0; width:max-content;
  animation:slide 38s linear infinite; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.tb3-marquee li::before{content:""; display:inline-block; width:4px; height:4px; margin-right:9px; background:var(--cy-dim); transform:rotate(45deg) translateY(-1px)}
@keyframes slide{to{transform:translateX(-50%)}}

/* control deck */
.tb3-deck{
  position:absolute; right:26px; top:82px; width:206px; pointer-events:auto;
  background:rgba(10,15,21,.82); backdrop-filter:blur(10px);
  border:1px solid var(--line); font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
}
.tb3-deck h4{
  margin:0; padding:9px 12px; font-size:10px; letter-spacing:.26em; color:var(--dim);
  border-bottom:1px solid var(--line-2); font-weight:500; display:flex; justify-content:space-between;
}
.tb3-deck .tb3-grp{padding:10px 12px; border-bottom:1px solid var(--line-2)}
.tb3-deck .tb3-grp:last-child{border-bottom:0}
.tb3-deck label{display:block; color:var(--dim); margin-bottom:7px; font-size:9px; letter-spacing:.22em}
.tb3-seg{display:flex; border:1px solid var(--line)}
.tb3-seg button{
  flex:1; background:transparent; border:0; border-right:1px solid var(--line);
  color:var(--muted); font:inherit; padding:6px 0; cursor:pointer; letter-spacing:.1em;
  transition:background .18s, color .18s;
}
.tb3-seg button:last-child{border-right:0}
.tb3-seg button:hover{color:var(--ink); background:rgba(255,255,255,.05)}
.tb3-seg button[aria-pressed="true"]{background:var(--cy); color:#04120f; font-weight:700}
.tb3-deck .tb3-wide{
  width:100%; background:transparent; border:1px solid var(--line); color:var(--muted);
  font:inherit; padding:7px 0; cursor:pointer; letter-spacing:.14em;
}
.tb3-deck .tb3-wide:hover{color:var(--cy); border-color:var(--cy-dim)}
@media(max-width:860px){
  /* the deck becomes a strip along the bottom so the 3D owns the upper half */
  .tb3-deck{
    top:auto; bottom:41px; left:0; right:0; width:auto;
    display:flex; align-items:stretch; border-left:0; border-right:0;
    overflow-x:auto; -webkit-overflow-scrolling:touch; font-size:9px;
  }
  .tb3-deck h4{display:none}
  .tb3-deck .tb3-grp{
    border-bottom:0; border-right:1px solid var(--line-2);
    padding:7px 11px; flex:1 0 auto;
  }
  .tb3-deck label{margin-bottom:5px; font-size:8px}
  .tb3-deck .tb3-seg button{padding:5px 8px}
  .tb3-deck .tb3-wide{padding:6px 12px; white-space:nowrap}
  .tb3-scene{left:18px; right:18px; bottom:150px; max-width:none}
  .tb3-scene h1{font-size:clamp(36px,11.5vw,58px)}
  .tb3-scene .tb3-tag{margin-bottom:12px}
  .tb3-scene p{font-size:14px}
  .tb3-progress{left:18px; right:18px; bottom:132px}
  .tb3-hud-top{padding:16px 18px; font-size:10px}
}


/* ------------------------------------------------------------------
 * Site integration. The mock was a standalone document; inside
 * WordPress the hero is page content, so it inherits Astra's container
 * width and Astra's button styling. Both have to be undone or the
 * stage renders as a boxed panel with pill-shaped controls.
 * ------------------------------------------------------------------ */

/* Full bleed out of the entry-content container.
   100vw includes the vertical scrollbar, so a plain 100vw break-out is about
   15px wider than the visible area and pushes the right-hand HUD (telemetry and
   the interception log) off screen. --tb3-sbw is measured in JS and subtracted. */
.tb3-hero{
  --tb3-sbw:0px;
  width:calc(100vw - var(--tb3-sbw));
  max-width:calc(100vw - var(--tb3-sbw));
  margin-left:calc(50% - (100vw - var(--tb3-sbw)) / 2);
  margin-right:calc(50% - (100vw - var(--tb3-sbw)) / 2);
}

/* Astra rounds and recolours every button on the page. The deck is a
   control surface, not a call to action. */
.tb3-hero .tb3-seg button,
.tb3-hero .tb3-deck .tb3-wide{
  border-radius:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  min-height:0 !important;
  line-height:1.2 !important;
}
.tb3-hero .tb3-seg button:focus-visible,
.tb3-hero .tb3-deck .tb3-wide:focus-visible{outline:2px solid var(--cy); outline-offset:2px}

/* the interception log must never sit on top of the telemetry block */
.tb3-eventlog{bottom:330px}

/* headings inside the stage are decorative copy, not document structure,
   so Astra's heading margins must not push them around */
.tb3-hero .tb3-scene h1{margin:0 0 14px !important; padding:0 !important}
.tb3-hero .tb3-scene p{margin:0 !important}

/* ------------------------------------------------------------------
 * position:sticky was completely inert until this rule.
 *
 * html and body computed to `overflow: hidden auto`, because something in
 * the stack sets overflow-x:hidden and a hidden axis forces the other axis
 * to auto. That makes them a scroll container, and Chrome then refuses to
 * stick. Measured: the stage's top tracked the hero's top exactly at every
 * scroll position, so the scroll story never played.
 *
 * `clip` clips without creating a scroll container, so overflow-y stays
 * visible and sticky works. This stylesheet only loads on the front page,
 * so the blast radius is the home page.
 * ------------------------------------------------------------------ */
html, body{ overflow-x:clip; }