/* ============ FONTS ============ */
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jbm-latin.woff2') format('woff2');font-weight:100 800;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jbm-greek.woff2') format('woff2');font-weight:100 800;font-display:swap}

/* ============ TOKENS ============ */
.thrust-demo{
  --cream:#F4F3EF; --ink:#141412; --ink-soft:#3A382F;
  --green:#4ADE80; --green-dim:#2E6B4A;
  --amber:#E5A33D; --red:#E4572E;
  --term-bg:#141412; --term-fg:#EDEAE0; --term-dim:#8A867B;
  --mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ============ WRAPPER ============ */
.thrust-demo{position:relative;width:100vw;margin:56px calc(50% - 50vw) 64px;padding:0 24px}
.thrust-demo *{margin:0;padding:0;box-sizing:border-box}
.thrust-demo-aspect{position:relative;width:100%;padding-bottom:46.35%;overflow:hidden}

/* ============ STAGE (fixed 1920x890, scaled to fit) ============ */
#thrust-demo-stage{
  position:absolute;top:50%;left:50%;width:1920px;height:890px;
  transform-origin:center center;transform:translate(-50%,-50%) scale(1);
  display:flex;flex-direction:column;background:transparent;
}

/* ============ PHASE STRIP ============ */
.thrust-demo #phases{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  display:flex;gap:18px;z-index:10;
}
.thrust-demo-phase{
  font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:.14em;
  padding:11px 26px;border:1px solid rgba(20,20,18,.28);color:rgba(20,20,18,.45);
  text-transform:uppercase;background:transparent;transition:all .3s;
  cursor:pointer;
}
.thrust-demo-phase.done{border-color:var(--green);color:var(--green)}
.thrust-demo-phase.done::before{content:'\2713 ';font-size:14px}
.thrust-demo-phase.active{border-color:var(--ink);color:var(--cream);background:var(--ink)}
.thrust-demo-phase:hover:not(.active):not(.done){border-color:var(--ink);color:var(--ink-soft)}
.thrust-demo-phase.pending{animation:pendingPulse 1.2s ease-in-out infinite}

@keyframes pendingPulse{
  0%,100%{border-color:var(--ink);color:var(--ink);box-shadow:none}
  50%{border-color:var(--green);color:var(--green);box-shadow:0 0 0 3px rgba(74,222,128,.15)}
}

/* ---------- click hint ---------- */
.thrust-demo #phase-cursor{
  position:absolute;
  width:12px;height:12px;
  pointer-events:none;z-index:30;
  opacity:0;transition:opacity .25s;
}
.thrust-demo #phase-cursor.on{opacity:1}
.thrust-demo #phase-cursor i{
  display:block;width:100%;height:100%;
  border-radius:50%;
  border:2px solid var(--ink);
  animation:circleTap 1.1s ease-out infinite;
}
@keyframes circleTap{
  0%{transform:scale(0.5);opacity:1}
  100%{transform:scale(2);opacity:0}
}

/* ============ MAIN ============ */
.thrust-demo-main{flex:1;position:relative;padding:88px 0 86px 0;min-height:0}

/* ---- Terminal ---- */
.thrust-demo #cli-group{
  position:absolute;top:90px;bottom:20px;left:50%;width:1120px;
  transform:translateX(-50%);
  transition:left .45s cubic-bezier(.6,0,.3,1),transform .45s cubic-bezier(.6,0,.3,1);
  display:flex;flex-direction:column;align-items:center;
}
.thrust-demo #thrust-demo-stage.mode-sim #cli-group,
.thrust-demo #thrust-demo-stage.mode-real #cli-group,
.thrust-demo #thrust-demo-stage.mode-mission #cli-group,
.thrust-demo #thrust-demo-stage.mode-monitor #cli-group{left:40px;transform:none}
.thrust-demo #thrust-demo-stage.mode-lctx #cli-group,
.thrust-demo #thrust-demo-stage.mode-lcode #cli-group,
.thrust-demo #thrust-demo-stage.mode-ltest #cli-group,
.thrust-demo #thrust-demo-stage.mode-ldeploy #cli-group{left:calc(50% + 160px);transform:translateX(-50%)}

.thrust-demo #cli{
  position:relative;flex:1;width:100%;
  display:flex;flex-direction:column;
  background:var(--term-bg);border:1px solid var(--ink);
  box-shadow:8px 8px 0 rgba(20,20,18,.16);
}
.thrust-demo #cli .titlebar{
  height:44px;flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:0 16px;border-bottom:1px solid rgba(237,234,224,.16);
  font-family:var(--mono);font-size:13px;color:var(--term-dim);
}
.thrust-demo #cli .titlebar .dot{width:9px;height:9px;border:1px solid var(--term-dim);border-radius:50%}
.thrust-demo #cli .titlebar .dot.g{background:var(--green);border-color:var(--green)}
.thrust-demo #cli .titlebar .sess{margin-left:auto;color:var(--term-fg)}
.thrust-demo #term{
  flex:1;overflow:hidden;padding:18px 22px 8px;
  font-family:var(--mono);font-size:18px;line-height:1.62;color:var(--term-fg);
  white-space:pre-wrap;word-break:break-word;
}
.thrust-demo #inputbar{
  flex:0 0 auto;min-height:52px;padding:12px 22px 14px;
  border-top:1px solid rgba(237,234,224,.16);
  font-family:var(--mono);font-size:18px;line-height:1.62;color:var(--term-fg);
  white-space:pre-wrap;word-break:break-word;
}
.thrust-demo #term .ln{min-height:1.62em;opacity:0;animation:lnin .18s ease-out forwards}
.thrust-demo #term .ln.splash{line-height:1.0}
@keyframes lnin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.thrust-demo #thrust-demo-stage.frozen #term .ln{animation:none;opacity:1}

/* Terminal text classes */
.thrust-demo .p{color:var(--green);font-weight:700}
.thrust-demo .cmd{color:var(--term-fg);font-weight:500}
.thrust-demo .d{color:var(--term-dim)}
.thrust-demo .think{color:#CFCAB8;font-style:italic}
.thrust-demo .g{color:var(--green)}
.thrust-demo .a{color:var(--amber)}
.thrust-demo .r{color:var(--red)}
.thrust-demo .b{font-weight:700}
.thrust-demo .hd{color:var(--term-fg);font-weight:700;letter-spacing:.06em}
.thrust-demo #term .ln .sec{color:var(--amber);font-weight:700;letter-spacing:.08em}
.thrust-demo .tool{color:var(--green)}
.thrust-demo .run{color:var(--amber)}
.thrust-demo .ok{color:var(--green)}
.thrust-demo .cursor{display:inline-block;width:9px;height:1.1em;background:var(--green);
  vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.thrust-demo #thrust-demo-stage.frozen .cursor{animation:none}

/* ---- World panel ---- */
.thrust-demo #world{
  position:absolute;top:90px;bottom:200px;left:1188px;right:40px;
  opacity:0;transform:translateX(48px);pointer-events:none;
  transition:opacity .35s,transform .45s cubic-bezier(.6,0,.3,1);
  display:flex;flex-direction:column;min-width:0;
  background:var(--cream);border:1px solid var(--ink);
  box-shadow:8px 8px 0 rgba(20,20,18,.16);
}
.thrust-demo #thrust-demo-stage.mode-sim #world,
.thrust-demo #thrust-demo-stage.mode-real #world,
.thrust-demo #thrust-demo-stage.mode-mission #world,
.thrust-demo #thrust-demo-stage.mode-monitor #world{opacity:1;transform:none;pointer-events:auto}
.thrust-demo #world .wbar{
  height:44px;flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:0 16px;border-bottom:1px solid var(--ink);
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;
}
.thrust-demo #world .wbar .tgt{color:var(--ink);font-weight:700}
.thrust-demo #badge{
  margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  padding:5px 12px;border:1px solid var(--ink);color:var(--ink);transition:all .3s;
}
.thrust-demo #badge.sim{background:var(--ink);color:var(--cream)}
.thrust-demo #badge.real{background:var(--green);border-color:var(--green);color:var(--cream);animation:pulse 1.4s ease-in-out infinite}
.thrust-demo #badge.mon{border-color:var(--green);color:var(--green)}
@keyframes pulse{50%{opacity:.55}}
.thrust-demo #thrust-demo-stage.frozen #badge.real{animation:none}
.thrust-demo #wrapholder{flex:1;position:relative;min-width:0}
.thrust-demo #phys{position:absolute;inset:0;width:100%;height:100%;display:none}
.thrust-demo #thrust-demo-stage.mode-sim #phys,
.thrust-demo #thrust-demo-stage.mode-real #phys{display:block}
.thrust-demo #warehouse{position:absolute;inset:0;width:100%;height:100%;display:none}
.thrust-demo #thrust-demo-stage.mode-mission #warehouse{display:block}
.thrust-demo #telemetry{
  position:absolute;inset:0;display:none;flex-direction:column;
}
.thrust-demo #thrust-demo-stage.mode-monitor #telemetry{display:flex}
.thrust-demo .tele{
  flex:1;border-bottom:1px solid rgba(20,20,18,.25);position:relative;min-height:0;
  display:flex;align-items:center;gap:16px;padding:10px 16px;
}
.thrust-demo .tele:last-child{border-bottom:none}
.thrust-demo .tele .lab{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-soft);
  width:110px;flex:0 0 auto;line-height:1.3;
}
.thrust-demo .tele .val{
  font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink);
  width:80px;flex:0 0 auto;text-align:right;
}
.thrust-demo .tele svg{flex:1;height:100%;width:auto;min-width:0}
.thrust-demo .tele.warn{animation:warnbg 1.2s ease-in-out infinite}
@keyframes warnbg{50%{background:rgba(229,163,61,.16)}}
.thrust-demo #thrust-demo-stage.frozen *{transition:none!important;animation:none!important}
.thrust-demo .tele.warn .lab,.thrust-demo .tele.warn .val{color:var(--amber)}

/* ---- Left draw ---- */
.thrust-demo #leftdraw{
  position:absolute;top:90px;bottom:20px;left:48px;width:460px;
  opacity:0;transform:translateX(-32px);pointer-events:none;
  transition:opacity .35s,transform .45s cubic-bezier(.6,0,.3,1);
  display:flex;align-items:flex-start;justify-content:flex-start;
}
.thrust-demo #thrust-demo-stage.mode-lctx #leftdraw,
.thrust-demo #thrust-demo-stage.mode-lcode #leftdraw,
.thrust-demo #thrust-demo-stage.mode-ltest #leftdraw,
.thrust-demo #thrust-demo-stage.mode-ldeploy #leftdraw{opacity:1;transform:none}
.thrust-demo #leftsvg{width:100%;height:100%;display:block;overflow:visible}
.thrust-demo #leftsvg > g{display:none}
.thrust-demo #thrust-demo-stage.mode-lctx #leftsvg > #gLctx,
.thrust-demo #thrust-demo-stage.mode-lcode #leftsvg > #gLcode,
.thrust-demo #thrust-demo-stage.mode-ltest #leftsvg > #gLtest,
.thrust-demo #thrust-demo-stage.mode-ldeploy #leftsvg > #gLdeploy{display:inline}
.thrust-demo #thrust-demo-stage.frozen #leftdraw{transition:none}

/* ---- Marketing callouts ---- */
.thrust-demo #callouts{
  position:absolute;left:48px;top:410px;width:340px;
  opacity:0;pointer-events:none;z-index:5;
  transition:opacity .35s;
}
.thrust-demo #callout{
  background:var(--cream);border:1px solid var(--ink);
  box-shadow:6px 6px 0 rgba(20,20,18,.16);
  padding:18px 22px 19px;
}
.thrust-demo #co-tag{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;
  color:var(--green-dim);text-transform:uppercase;margin-bottom:9px;
}
.thrust-demo #co-text{
  font-family:var(--mono);font-size:17px;line-height:1.45;color:var(--ink);
}

/* ============ FROZEN STATE ============ */
.thrust-demo #thrust-demo-stage.frozen *{transition:none!important;animation:none!important}

/* ---- Swipe hint (mobile only) ---- */
.thrust-demo-swipe-hint{
  display:none;
  margin-top:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink-soft);text-align:center;
}

/* ============ MEDIA QUERIES ============ */
/* Below 640px the fit-to-width scale drops so low (<0.3) the demo becomes
   illegible. Instead of shrinking further, give the stage a fixed,
   legible-at-scale width and let it scroll horizontally within the frame -
   fitDemo() picks up the larger box size automatically, no JS change needed. */
@media (max-width:640px){
  .thrust-demo{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .thrust-demo-aspect{width:760px;min-width:760px;padding-bottom:0;height:352px}
  .thrust-demo-swipe-hint{display:block}
}