/* swarm-oracle.css — THE ORACLE · super-brain telemetry visual for the swarm
   estate. One component, themed per page via --oc/--oc2 (rgb triplets).
   Performance contract (HARD): no canvas, no SVG filters on animated nodes,
   transform/opacity-only keyframes, SMIL packets (pausable), reduced-motion
   static, lite-mode for old devices. Must fly on a 2015 phone. */

.orc{position:relative;--oc:0,229,255;--oc2:167,139,255;
  --mono:'IBM Plex Mono',ui-monospace,monospace;--disp:'Space Grotesk',-apple-system,sans-serif}
.orc-stage{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(var(--oc),.2);
  background:
    radial-gradient(620px 360px at 50% 46%,rgba(var(--oc),.075),transparent 70%),
    radial-gradient(420px 260px at 18% 110%,rgba(var(--oc2),.06),transparent 70%),
    linear-gradient(180deg,rgba(8,13,24,.94),rgba(4,7,14,.97));
  box-shadow:0 48px 130px -50px rgba(var(--oc),.3),inset 0 1px 0 rgba(255,255,255,.05)}
.orc-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;background-image:
  radial-gradient(1px 1px at 16% 24%,rgba(255,255,255,.4),transparent 55%),
  radial-gradient(1.2px 1.2px at 78% 18%,rgba(255,255,255,.34),transparent 55%),
  radial-gradient(1px 1px at 64% 78%,rgba(255,255,255,.28),transparent 55%),
  radial-gradient(1.1px 1.1px at 30% 84%,rgba(255,255,255,.3),transparent 55%)}
.orc svg{display:block;width:100%;height:auto}

/* conduits + packets */
.orc-cond{fill:none;stroke:rgba(var(--fc,var(--oc)),.34);stroke-width:1.3}
.orc-cond-glow{fill:none;stroke:rgba(var(--fc,var(--oc)),.1);stroke-width:6}
.orc-pkt{fill:rgb(var(--fc,var(--oc)))}
.orc-pkt-halo{fill:rgba(var(--fc,var(--oc)),.3)}
.orc-feedlbl{font:600 11px var(--mono);letter-spacing:.2em;fill:rgb(var(--fc,var(--oc)))}
.orc-feedtick{stroke:rgba(var(--fc,var(--oc)),.5);stroke-width:1.5}

/* core — every animated node is transform/opacity only */
.orc-halo{animation:orcHalo 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes orcHalo{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.orc-ring{fill:none;transform-box:fill-box;transform-origin:center}
.orc-ring--a{stroke:rgba(var(--oc),.4);stroke-width:1;stroke-dasharray:3 9;animation:orcSpin 26s linear infinite}
.orc-ring--b{stroke:rgba(var(--oc2),.42);stroke-width:1;stroke-dasharray:2 6;animation:orcSpin 15s linear infinite reverse}
.orc-ring--c{stroke:rgba(var(--oc),.14);stroke-width:.75;animation:orcSpin 52s linear infinite}
@keyframes orcSpin{to{transform:rotate(360deg)}}
.orc-poly{fill:none;stroke:rgba(var(--oc),.34);stroke-width:.9;transform-box:fill-box;transform-origin:center;animation:orcSpin 64s linear infinite reverse}
.orc-poly2{fill:none;stroke:rgba(var(--oc2),.26);stroke-width:.8;transform-box:fill-box;transform-origin:center;animation:orcSpin 44s linear infinite}
.orc-syn{fill:none;stroke:rgba(var(--oc),.5);stroke-width:1;animation:orcSyn 2.8s ease-in-out infinite;animation-delay:var(--sd,0s)}
@keyframes orcSyn{0%,100%{opacity:.12}50%{opacity:.85}}
.orc-node{fill:rgb(var(--oc));animation:orcSyn 2.2s ease-in-out infinite;animation-delay:var(--sd,0s)}
.orc-nucleus{transform-box:fill-box;transform-origin:center;animation:orcBeat 1.55s cubic-bezier(.36,.07,.19,.97) infinite}
@keyframes orcBeat{0%,100%{transform:scale(1)}11%{transform:scale(1.055)}22%{transform:scale(.995)}34%{transform:scale(1.13)}52%{transform:scale(1)}}
.orc-spark{fill:#fff;animation:orcBeat 1.55s cubic-bezier(.36,.07,.19,.97) infinite;transform-box:fill-box;transform-origin:center}
.orc-corelbl{font:600 12.5px var(--mono);letter-spacing:.3em;fill:#fff}
.orc-coresub{font:600 8.5px var(--mono);letter-spacing:.24em;fill:rgba(var(--oc),.9)}
.orc-ekg{fill:none;stroke:rgba(var(--oc),.75);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:560;stroke-dashoffset:560;animation:orcEkg 3.1s linear infinite}
@keyframes orcEkg{0%{stroke-dashoffset:560;opacity:1}72%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* hyper counters */
.orc-ctrs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.07)}
.orc-ctr{padding:18px 20px 16px;text-align:center;border-right:1px solid rgba(255,255,255,.06)}
.orc-ctr:last-child{border-right:0}
.orc-ctr b{display:block;font:600 clamp(20px,2.6vw,30px)/1 var(--mono);font-variant-numeric:tabular-nums;color:#fff;letter-spacing:-.01em;text-shadow:0 0 22px rgba(var(--oc),.45);animation:orcCtrGlow 2.4s ease-in-out infinite}
@keyframes orcCtrGlow{0%,100%{text-shadow:0 0 18px rgba(var(--oc),.32)}50%{text-shadow:0 0 30px rgba(var(--oc),.62)}}
/* brief flash the engine toggles on each counter increment — the "tick" of a live number */
.orc-ctr.orc-tick b{color:rgb(var(--oc))}
.orc-ctr b em{font-style:normal;color:rgb(var(--oc));font-size:.55em;vertical-align:2px;margin-left:3px}
.orc-ctr small{display:block;margin-top:7px;font:600 8.5px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(232,238,246,.6)}

/* event stream marquee — translateX only, paused offscreen/hidden via .orc-idle */
.orc-stream{position:relative;overflow:hidden;border-top:1px solid rgba(var(--oc),.14);
  background:linear-gradient(180deg,rgba(var(--oc),.045),transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.orc-stream-in{display:flex;align-items:center;gap:26px;padding:10px 0;white-space:nowrap;width:max-content;
  will-change:transform;animation:orcTick 13s linear infinite}
@keyframes orcTick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.orc-stream span{font:600 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(232,238,246,.55);display:inline-flex;align-items:center;gap:8px}
.orc-stream b{color:rgb(var(--oc));font-weight:600;font-variant-numeric:tabular-nums}
.orc-stream i{width:4px;height:4px;border-radius:50%;background:rgb(var(--oc));opacity:.5;flex:0 0 auto}
.orc-foot{padding:9px 18px 11px;font:500 9.5px/1.5 var(--mono);letter-spacing:.05em;color:rgba(232,238,246,.5);text-align:center;border-top:1px solid rgba(255,255,255,.05)}

/* pause everything when offscreen or tab hidden (engine toggles .orc-idle) */
.orc.orc-idle *{animation-play-state:paused!important}
.page-hid .orc *,.page-hid .sf-scan,.page-hid .sf-live i{animation-play-state:paused!important}

/* mobile — crop the stage cinematically; streams enter from off-frame */
@media(max-width:640px){
  .orc-svgbox{overflow:hidden}
  .orc svg{width:172%;margin-left:-36%}
  .orc-feedlbl{display:none}
  .orc-ctrs{grid-template-columns:1fr 1fr 1fr}
  .orc-ctr{padding:14px 8px 12px}
  .orc-ctr small{letter-spacing:.1em;font-size:9px}
}
@media(max-width:360px){
  .orc-ctr b{font-size:17px}
}

/* lite mode — old/weak devices: keep the soul, shed the cost */
.swarm-lite .orc-halo,.swarm-lite .orc-ring--c,.swarm-lite .orc-poly2{animation:none}
.swarm-lite .orc-syn{animation-duration:4.5s}
.swarm-lite .orc-pkt-halo{display:none}
.swarm-lite .orc-stream-in{animation-duration:30s}
/* lite mode also calms the host pages' ambient layers */
.swarm-lite .sky::before,.swarm-lite .deck-scan,.swarm-lite .sf-scan{animation:none!important}
.swarm-lite .radar{display:none}
.swarm-lite .cap::after{display:none}
.swarm-lite .pwr-badge{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(12,18,30,.9)}

@media(prefers-reduced-motion:reduce){
  .orc *{animation:none!important}
  .orc-ekg{stroke-dashoffset:0;opacity:.5}
  .orc-stream-in{transform:none}
}