/* ============================================================================
   SOQ-TEC — single-page technical explainer. Layers on system.css (emerald,
   iron/copper, Archivo + Martian Mono). Most layout uses system primitives; this file adds the
   two signature animated figures + the live-gateway components. Theme-adaptive,
   reduced-motion-gated.
   ============================================================================ */

/* ---- figure shells ---- */
.fig{margin:0 auto}
.fig svg{display:block;width:100%;height:auto;margin-inline:auto}
.qe-fig svg{max-width:620px}
.xd-fig svg{max-width:400px}

.hero-fig svg{max-width:460px}

/* ---- hero figure: the bank vault (value enters for safekeeping) ---- */
.hv-token{fill:var(--accent)}
.hv-accept{stroke:var(--accent);fill:none}
@media(prefers-reduced-motion:no-preference){
  .hv-token{animation:hvToken 4s cubic-bezier(.5,0,.6,1) infinite}
  .hv-accept{animation:hvAccept 4s ease-out infinite}
}
@keyframes hvToken{0%{transform:translateX(0);opacity:0}10%{opacity:1}58%{transform:translateX(131px);opacity:1}66%{transform:translateX(131px);opacity:0}100%{opacity:0}}
@keyframes hvAccept{0%,58%{opacity:0;r:64}68%{opacity:.85}82%{opacity:0;r:98}100%{opacity:0}}

/* shared figure ink */
.f-rule{stroke:var(--rule);stroke-width:1;fill:none}
.f-line{stroke:var(--muted);stroke-width:1.5;fill:none}
.f-node{fill:var(--paper)}
.f-node-edge{stroke:var(--ink);stroke-width:1.5;fill:var(--paper)}
.f-accent{stroke:var(--accent);fill:none}
.f-accent-fill{fill:var(--accent)}
.f-ink{fill:var(--ink)}
.f-t{font-family:var(--mono);fill:var(--ink)}
.f-t.lbl{font-size:11px;letter-spacing:.06em}
.f-t.sm{font-size:9px;letter-spacing:.05em;fill:var(--muted)}
.f-t.cap{font-size:10px;fill:var(--accent);letter-spacing:.12em;text-transform:uppercase}

/* ---- Fig.1 Quantum Express — travelling packets ---- */
.qe-packet{fill:var(--accent)}
.qe-attest{fill:var(--muted)}
@media(prefers-reduced-motion:no-preference){
  .qe-packet{animation:qePacket 3.4s cubic-bezier(.5,0,.5,1) infinite}
  .qe-attest{animation:qeAttest 6s ease-in-out infinite}
  .qe-burn{animation:qeBurn 3.4s ease-in-out infinite}
  .qe-land{animation:qeLand 3.4s ease-in-out infinite}
  .qe-commit{animation:qeCommit 6s ease-in-out infinite}
}
@keyframes qePacket{0%{transform:translateX(0);opacity:0}8%{opacity:1}46%{transform:translateX(516px);opacity:1}54%{transform:translateX(516px);opacity:0}100%{transform:translateX(516px);opacity:0}}
@keyframes qeBurn{0%,10%{opacity:.25}16%,30%{opacity:1}40%,100%{opacity:.25}}
@keyframes qeLand{0%,46%{opacity:.25}54%,72%{opacity:1}82%,100%{opacity:.25}}
@keyframes qeAttest{0%{transform:translateX(0);opacity:0}20%{opacity:.7}70%{transform:translateX(360px);opacity:.7}80%{transform:translateX(360px);opacity:0}100%{opacity:0}}
@keyframes qeCommit{0%,72%{opacity:0}80%,90%{opacity:.8}100%{opacity:0}}

/* ---- Fig.2 XMSS Revolving Door — rotating blade + stepping key ---- */
.xd-blade,.xd-active-wrap{transform-box:view-box;transform-origin:200px 200px}
.xd-active{fill:var(--accent)}
@media(prefers-reduced-motion:no-preference){
  .xd-blade{animation:xdSpin 12s linear infinite}
  .xd-active-wrap{animation:xdStep 12s steps(16) infinite}
  .xd-rot{animation:xdRot 12s ease-in-out infinite}
}
@keyframes xdSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes xdStep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes xdRot{0%,88%{opacity:0}94%{opacity:.9}100%{opacity:0}}

/* ---- live gateway (the real, working bits) ---- */
.live-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:1.25rem;align-items:start}
.panel{border:1px solid var(--rule);background:var(--paper)}
.panel-header{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--rule)}
.panel-title{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:600}
.panel-status{margin-left:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.panel-status.online::before{content:"\25CF";color:var(--accent);margin-right:.35rem;font-size:.7em;vertical-align:middle}
.panel-body{padding:1rem}

.log{font-family:var(--mono);font-size:.7rem;line-height:1.7;background:var(--paper-2);border:1px solid var(--rule);padding:.75rem .9rem;max-height:260px;overflow-y:auto}
.log-entry{color:var(--ink);white-space:pre-wrap;word-break:break-word}
.log-entry.system{color:var(--muted)}
.log-entry.highlight{color:var(--accent)}

.sol-feed-addr{font-family:var(--mono);font-size:.6rem;color:var(--muted)}
.sol-feed-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:.8rem}
.sol-feed-stat{background:var(--paper);padding:.45rem .5rem;display:flex;flex-direction:column;gap:.1rem}
.sol-feed-stat-label{font-family:var(--mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sol-feed-stat-value{font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--ink)}

/* ---- hero live pulse ---- */
.pulse{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.pulse-item{display:flex;flex-direction:column;gap:.2rem}
.pulse-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pulse-value{font-family:var(--mono);font-size:1.05rem;font-weight:600;color:var(--ink)}
.pulse-value .on{color:var(--accent)}

@media(max-width:760px){.sol-feed-stats{grid-template-columns:repeat(3,1fr)}}