/* ==========================================================================
   3D scenes — shared engine (used on the home, API and features pages)
   Each .scene holds an isometric .stage (a floor plane). Objects on the floor
   are .blk elements: the element itself is the top face, ::before/::after are
   the front and right faces. Position/size with --x --y --w --h, thickness
   with --d, elevation with --z, colour with --c. Movement uses the
   `translate` property so it composes with the base `transform`.
   site.js adds .in-view (animations pause off screen), pointer tilt via
   --tx/--ty, and steps .cycle labels.
   ========================================================================== */

/* ---- Scene shell ------------------------------------------------------- */
.scene {
  --tx: 0deg;
  --ty: 0deg;
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: calc(var(--ccc-radius) + 4px);
  border: 1px solid var(--ccc-border);
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(162, 22, 15, .22), transparent 70%),
    linear-gradient(180deg, #121214, #0b0b0c);
  overflow: hidden;
  perspective: 1400px;
  container-type: inline-size;
  isolation: isolate;
}
.scene::after {             /* soft vignette */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55));
  pointer-events: none;
  z-index: 3;
}

.stage {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 440px;
  height: 300px;
  margin: -150px 0 0 -220px;
  transform-style: preserve-3d;
  transform: rotateX(calc(58deg + var(--ty))) rotateZ(calc(-38deg + var(--tx)));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  scale: 1.18;
}
@container (max-width: 640px) { .stage { scale: 1; } }
@container (max-width: 540px) { .stage { scale: .8; } }
@container (max-width: 420px) { .stage { scale: .64; } }
@container (max-width: 340px) { .stage { scale: .54; } }

.floor {
  position: absolute;
  inset: -60px;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}

/* ---- 3D block primitive ----------------------------------------------- */
.blk {
  --c: #2a2a2f;
  --d: 12px;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 55%),
    var(--c);
  border-radius: 2px;
  transform: translateZ(calc(var(--z, 0px) + var(--d)));
  transform-style: preserve-3d;
}
.blk::before,
.blk::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.blk::before {                              /* front face */
  left: 0;
  top: 100%;
  width: 100%;
  height: var(--d);
  background: color-mix(in srgb, var(--c) 55%, #000);
  transform-origin: top;
  transform: rotateX(-90deg);
}
.blk::after {                               /* right face */
  left: 100%;
  top: 0;
  width: var(--d);
  height: 100%;
  background: color-mix(in srgb, var(--c) 35%, #000);
  transform-origin: left;
  transform: rotateY(90deg);
}
.blk.red { --c: #c4251b; box-shadow: 0 0 24px rgba(240, 72, 72, .35); }
.blk.hot { --c: #f04848; }
.blk.slab { --c: #1d1d21; --d: 6px; }
.blk.ghost { --c: #34343a; }

/* vertical light sheet standing on a block's left edge */
.blk > .sheet {
  position: absolute;
  left: 0; top: 0;
  width: var(--sheet, 70px);
  height: 100%;
  background: linear-gradient(90deg, rgba(240, 72, 72, .4), transparent);
  transform-origin: left;
  transform: rotateY(-90deg);
  pointer-events: none;
}

/* text painted on a top face */
.face-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
}

/* ---- HUD chips (flat, readable overlays) ------------------------------ */
.hud {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background: rgba(20, 20, 22, .82);
  border: 1px solid var(--ccc-border-strong);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hud .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ccc-red-bright); box-shadow: 0 0 10px var(--ccc-red-bright); }
.hud.warn { border-color: rgba(240, 72, 72, .6); background: rgba(70, 8, 6, .85); }
.hud.ok .dot { background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.hud .muted { color: var(--ccc-text-muted); font-weight: 400; }
.hud-tl { top: 1rem; left: 1rem; }
.hud-tr { top: 1rem; right: 1rem; }
.hud-bl { bottom: 1rem; left: 1rem; }
.hud-br { bottom: 1rem; right: 1rem; }

/* Only animate scenes that are on screen (site.js toggles .in-view) */
.scene:not(.in-view) *,
.scene:not(.in-view) *::before,
.scene:not(.in-view) *::after { animation-play-state: paused !important; }

/* Hero variant: no frame, sits directly on the hero gradient */
.scene-hero { aspect-ratio: 6 / 5; background: transparent; border: 0; overflow: visible; }
.scene-hero::after { display: none; }
.scene-hero .stage { top: 60%; scale: 1.3; }
@container (max-width: 540px) { .scene-hero .stage { scale: .95; } }
@container (max-width: 420px) { .scene-hero .stage { scale: .75; } }

/* Caption-file card: a thin slab with a file extension and text lines */
.card3d { --d: 5px; --c: #1b1b1f; border: 1px solid rgba(255, 255, 255, .1); }
.card3d.lit { --c: #b0201a; border-color: rgba(255, 140, 140, .35); box-shadow: 0 0 60px rgba(240, 72, 72, .45); }
.card3d.lit .lines { filter: brightness(1.6); }
.card3d.lit .ext { color: #fff; }
.card3d .lines {
  position: absolute;
  inset: 44px 22px 22px;
  background:
    linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22)) 0 0 / 80% 8px no-repeat,
    linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) 0 22px / 62% 8px no-repeat,
    linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22)) 0 54px / 70% 8px no-repeat,
    linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) 0 76px / 48% 8px no-repeat;
}
.card3d .ext {
  position: absolute;
  top: 14px;
  left: 22px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .06em;
}

/* cycling labels (site.js moves .on through the spans in step) */
.cycle { display: inline-grid; }
.cycle > span { grid-area: 1 / 1; opacity: 0; transition: opacity .45s ease; }
.cycle > span.on { opacity: 1; }

/* shared motion */
@keyframes bob { 0%, 100% { translate: 0 0 0; } 50% { translate: 0 0 10px; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 40px rgba(240, 72, 72, .35); } 50% { box-shadow: 0 0 80px rgba(240, 72, 72, .6); } }
@keyframes hover { 0%, 100% { translate: 0 0 0; } 50% { translate: 0 0 12px; } }
@keyframes ring { from { scale: .6; opacity: .9; } to { scale: 2.4; opacity: 0; } }
@keyframes packet { from { left: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
@property --c { syntax: "<color>"; inherits: true; initial-value: #2a2a2f; }

/* ---- Shared scene parts ------------------------------------------------ */
/* Floor wire from (--wx, --wy) at angle --a, length --len, with a travelling packet */
.wire {
  position: absolute;
  left: var(--wx, 220px);
  top: var(--wy, 150px);
  height: 2px;
  width: var(--len);
  background: linear-gradient(90deg, rgba(240, 72, 72, .7), rgba(255, 255, 255, .12));
  transform-origin: 0 50%;
  transform: rotate(var(--a, 0deg)) translateZ(var(--wz, 1px));
}
.wire::after {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px var(--ccc-red-bright);
  animation: packet var(--speed, 2.4s) linear infinite;
  animation-delay: var(--delay, 0s);
}
/* Expanding ring on the floor centred on (--rx, --ry) */
.pulse-ring {
  position: absolute;
  left: var(--rx, 220px); top: var(--ry, 150px);
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 2px solid rgba(240, 72, 72, .6);
  animation: ring 3s ease-out infinite;
}
.pulse-ring.r2 { animation-delay: 1.5s; }
/* Glowing red engine cube with a label on top */
.engine { --c: #c4251b; box-shadow: 0 0 50px rgba(240, 72, 72, .5); animation: hover 4s ease-in-out infinite; }
.engine .face-label { font-size: 22px; }
/* Small station tile with a name and role painted on top */
.station { --w: 84px; --h: 50px; --d: 14px; --c: #26262b; }
.station .face-label { flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.1; }
.station .face-label small { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ccc-red-bright); }
.card3d.sm .lines { inset: 30px 14px 10px; scale: .62; transform-origin: 0 0; }
.card3d.sm .ext { top: 9px; left: 14px; font-size: 12px; }

/* ==========================================================================
   Scene: convert (home hero) — input stack -> engine -> output stack
   ========================================================================== */
.s-convert .belt { --x: 30px; --y: 132px; --w: 380px; --h: 36px; --d: 4px; --c: #19191c; }
.s-convert .belt-wire { --wx: 70px; --wy: 150px; --len: 300px; --wz: 5px; --speed: 2.2s; }
.s-convert .belt-wire.b2 { --delay: 1.1s; }
.s-convert .in, .s-convert .out { --w: 120px; --h: 84px; --y: 108px; animation: bob 6s ease-in-out infinite; }
.s-convert .in { --x: 10px; }
.s-convert .out { --x: 310px; }
.s-convert .k1 { --z: 6px; }
.s-convert .k2 { --z: 22px; animation-delay: -1s; }
.s-convert .k3 { --z: 38px; animation-delay: -2s; }
.s-convert .engine { --x: 180px; --y: 110px; --w: 80px; --h: 80px; --d: 64px; }
.s-convert .pulse-ring { --rx: 220px; --ry: 150px; }
.s-convert .hud-in  { top: 10%; left: 0; }
.s-convert .hud-out { bottom: 8%; right: 2%; }
.s-convert .hud-fmt { top: 10%; right: 2%; }

/* ==========================================================================
   Scene: API (API hero) — request card beams up to a response card
   ========================================================================== */
.s-api .platform { --x: 40px; --y: 40px; --w: 360px; --h: 220px; --d: 10px; --c: #17171a; border: 1px solid rgba(255, 255, 255, .06); }
.s-api .platform .face-label { align-items: flex-end; justify-content: flex-start; padding: 0 0 10px 14px; font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(255, 255, 255, .35); }
.s-api .req { --x: 70px; --y: 70px; --w: 270px; --h: 160px; --z: 30px; animation: bob 6s ease-in-out infinite; }
.s-api .res { --x: 110px; --y: 60px; --w: 250px; --h: 120px; --z: 120px; animation: bob 6s ease-in-out infinite; animation-delay: -3s; }
.code3d {
  position: absolute;
  inset: 34px 16px 12px;
  font: 500 11px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #d4d4d8;
  white-space: pre;
  overflow: hidden;
}
.code3d .k { color: #ff8a8a; }
.code3d .s { color: #fde2b8; }
.s-api .res .big { position: absolute; top: 34px; left: 16px; font: 700 24px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #fff; }
.s-api .res .lines { inset: 72px 16px 10px; scale: .7; transform-origin: 0 0; }
.s-api .bit { --w: 10px; --h: 10px; --d: 10px; --x: 215px; --y: 120px; --z: 40px; --c: #f04848; box-shadow: 0 0 16px #f04848; animation: rise 2.4s ease-in infinite; }
.s-api .bit.b2 { --x: 245px; --y: 140px; animation-delay: .8s; }
.s-api .bit.b3 { --x: 185px; --y: 132px; animation-delay: 1.6s; }
.s-api .hud-status { bottom: 8%; right: 2%; }
.s-api .hud-verb { top: 10%; right: 2%; }

/* ==========================================================================
   Scene: workflow (integrations panel) — inputs fan in, outputs fan out
   ========================================================================== */
.s-flow .engine { --x: 180px; --y: 110px; --w: 80px; --h: 80px; --d: 64px; }
.s-flow .pulse-ring { --rx: 220px; --ry: 150px; }
.s-flow .f1 { --x: 10px;  --y: 60px; }
.s-flow .f2 { --x: 10px;  --y: 190px; }
.s-flow .f3 { --x: 346px; --y: 20px; }
.s-flow .f4 { --x: 346px; --y: 128px; }
.s-flow .f5 { --x: 346px; --y: 236px; }
.s-flow .w1 { --wx: 52px;  --wy: 85px;  --a: 21.2deg;  --len: 176px; }
.s-flow .w2 { --wx: 52px;  --wy: 215px; --a: -21.2deg; --len: 176px; --delay: .6s; }
.s-flow .w3 { --wx: 220px; --wy: 150px; --a: -32deg;   --len: 190px; --delay: 1.2s; }
.s-flow .w4 { --wx: 220px; --wy: 150px; --a: 1deg;     --len: 160px; --delay: 1.6s; }
.s-flow .w5 { --wx: 220px; --wy: 150px; --a: 33.5deg;  --len: 192px; --delay: 2s; }

@keyframes rise { 0% { translate: 0 0 0; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { translate: 0 0 80px; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before, .scene *::after { animation: none !important; }
  .stage { transition: none; }
  .wire::after { left: 60%; }
}

/* Flat plane lying on (or floating above) the floor at elevation --z */
.plane { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); transform: translateZ(var(--z, 11px)); transform-style: preserve-3d; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ==========================================================================
   Scene: browser (web app hero) — drop files, convert locally, download
   ========================================================================== */
.s-browser .window { --x: 20px; --y: 20px; --w: 400px; --h: 260px; --d: 12px; --c: #17171a; border: 1px solid rgba(255, 255, 255, .07); }
.s-browser .chrome {
  position: absolute; left: 0; right: 0; top: 0; height: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle, #f04848 3.5px, transparent 4.5px) 10px 50% / 14px 14px no-repeat,
    radial-gradient(circle, #6b6b74 3.5px, transparent 4.5px) 26px 50% / 14px 14px no-repeat,
    radial-gradient(circle, #6b6b74 3.5px, transparent 4.5px) 42px 50% / 14px 14px no-repeat,
    #1f1f23;
}
.s-browser .url {
  position: absolute; left: 70px; top: 6px; height: 16px; padding: 0 8px;
  border-radius: 8px; background: #111113;
  font: 600 9px/16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(255, 255, 255, .5);
}
.s-browser .drop { --x: 46px; --y: 70px; --w: 170px; --h: 186px; --z: 13px; border: 2px dashed rgba(240, 72, 72, .55); border-radius: 10px; background: rgba(240, 72, 72, .05); animation: drop-zone 7s infinite; }
.s-browser .drop span { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.s-browser .file { --x: 70px; --w: 120px; --h: 84px; --z: 14px; animation: drop-in 7s cubic-bezier(.5, 0, .3, 1) infinite; }
.s-browser .file.f1 { --y: 84px; }
.s-browser .file.f2 { --y: 104px; --x: 78px; animation-delay: .35s; }
.s-browser .file.f3 { --y: 124px; --x: 86px; animation-delay: .7s; }
.s-browser .bar { --x: 238px; --y: 92px; --w: 160px; --h: 10px; --z: 13px; border-radius: 5px; background: #26262b; overflow: hidden; }
.s-browser .bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #a2160f, #f04848); transform-origin: left; animation: fill 7s ease-in-out infinite; box-shadow: 0 0 12px rgba(240, 72, 72, .7); }
.s-browser .out { --x: 258px; --y: 140px; --w: 120px; --h: 84px; --z: 14px; animation: pop-out 7s cubic-bezier(.3, 1.4, .5, 1) infinite; }
.s-browser .out.o2 { --y: 160px; --x: 266px; animation-delay: .2s; }
.s-browser .hud-local { top: 10%; right: 2%; }
.s-browser .hud-done { bottom: 8%; right: 2%; }

@keyframes drop-in {
  0% { translate: 0 0 150px; opacity: 0; }
  8% { opacity: 1; }
  24%, 82% { translate: 0 0 0; opacity: 1; }
  92%, 100% { translate: 0 0 0; opacity: 0; }
}
@keyframes drop-zone { 0%, 18% { border-color: rgba(240, 72, 72, .9); background: rgba(240, 72, 72, .14); } 30%, 100% { border-color: rgba(240, 72, 72, .4); background: rgba(240, 72, 72, .04); } }
@keyframes fill { 0%, 28% { transform: scaleX(0); } 58%, 86% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes pop-out {
  0%, 56% { translate: 0 0 -20px; opacity: 0; }
  64%, 86% { translate: 0 0 0; opacity: 1; }
  94%, 100% { translate: 0 0 0; opacity: 0; }
}

/* ==========================================================================
   Scene: CLI (CLI hero) — on-premise, air-gapped processing
   ========================================================================== */
.s-cli .fence {
  --x: 6px; --y: 14px; --w: 316px; --h: 272px; --z: 1px;
  border: 2px dashed rgba(240, 72, 72, .7);
  border-radius: 14px;
  background: rgba(240, 72, 72, .05);
  box-shadow: inset 0 0 40px rgba(240, 72, 72, .12);
  animation: fence 3s ease-in-out infinite;
}
.s-cli .fence span { position: absolute; left: 14px; bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(240, 72, 72, .85); }
.s-cli .unit { --x: 30px; --y: 66px; --w: 112px; --h: 80px; --d: 22px; --c: #26262b; }
.s-cli .unit::before {
  background:
    radial-gradient(circle, #f04848 2px, transparent 3px) 8px 50% / 12px 100% repeat-x,
    color-mix(in srgb, var(--c) 55%, #000);
  background-size: 12px 100%, auto;
}
.s-cli .u2 { --z: 24px; }
.s-cli .u3 { --z: 48px; }
.s-cli .unit .led { position: absolute; left: 10px; right: 10px; top: 10px; height: 4px; border-radius: 2px; background: #f04848; box-shadow: 0 0 10px #f04848; animation: led 1.6s steps(2, jump-none) infinite; }
.s-cli .u2 .led { animation-delay: .4s; }
.s-cli .u3 .led { animation-delay: .8s; }
.s-cli .term { --x: 168px; --y: 48px; --w: 136px; --h: 200px; --z: 40px; --c: #0d0d0f; animation: bob 6s ease-in-out infinite; }
.s-cli .term .lines-out { position: absolute; inset: 30px 12px 12px; font: 600 10px/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #d4d4d8; }
.s-cli .term .lines-out span { display: block; white-space: nowrap; overflow: hidden; width: 0; animation: type 8s steps(22, end) infinite; }
.s-cli .term .lines-out span:nth-child(2) { animation-delay: .9s; }
.s-cli .term .lines-out span:nth-child(3) { animation-delay: 1.8s; }
.s-cli .term .lines-out span:nth-child(4) { animation-delay: 2.7s; color: #4ade80; }
.s-cli .term .lines-out b { color: #f04848; font-weight: 600; }
.s-cli .cloud { --x: 360px; --y: 216px; --w: 76px; --h: 50px; --d: 14px; --c: #222226; opacity: .75; }
.s-cli .cloud .face-label { font-size: 11px; color: rgba(255, 255, 255, .6); }
.s-cli .cut { --wx: 323px; --wy: 241px; --len: 37px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 4px, transparent 4px 8px); }
.s-cli .cut::after { display: none; }
.s-cli .x { --x: 333px; --y: 232px; --w: 18px; --h: 18px; --z: 3px; }
.s-cli .x::before, .s-cli .x::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #f04848; box-shadow: 0 0 8px #f04848; transform: rotate(45deg); }
.s-cli .x::after { transform: rotate(-45deg); }
.s-cli .hud-gap { top: 10%; right: 2%; }
.s-cli .hud-os { bottom: 8%; right: 2%; }

@keyframes fence { 0%, 100% { box-shadow: inset 0 0 30px rgba(240, 72, 72, .08); } 50% { box-shadow: inset 0 0 60px rgba(240, 72, 72, .22); } }
@keyframes led { 0% { opacity: 1; } 50% { opacity: .35; } 100% { opacity: 1; } }
@keyframes type { 0% { width: 0; } 12%, 88% { width: 100%; } 96%, 100% { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .s-cli .term .lines-out span { width: 100%; }
  .s-browser .bar i { transform: scaleX(1); }
}

/* ==========================================================================
   Scene: providers (integrations hero) — engine inside a circuit of
   provider docks; one packet travels the loop dock to dock.
   ========================================================================== */
.s-providers .engine { --x: 180px; --y: 110px; --w: 80px; --h: 80px; --d: 64px; }
.s-providers .pulse-ring { --rx: 220px; --ry: 150px; }
.s-providers .dock { --w: 108px; --h: 62px; --d: 12px; --c: #222226; border: 1px solid rgba(255, 255, 255, .07); }
.s-providers .dock .face-label { flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.1; }
.s-providers .dock .face-label small { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ccc-red-bright); }
.s-providers .d1 { --x: 16px;  --y: 18px; }
.s-providers .d2 { --x: 316px; --y: 18px; }
.s-providers .d3 { --x: 316px; --y: 220px; }
.s-providers .d4 { --x: 16px;  --y: 220px; }
.s-providers .dock .plug {
  position: absolute; right: -5px; top: 50%; width: 10px; height: 18px; margin-top: -9px;
  border-radius: 3px; background: #f04848; box-shadow: 0 0 10px #f04848;
  animation: led 2.4s ease-in-out infinite;
}
.s-providers .d2 .plug { animation-delay: .6s; }
.s-providers .d3 .plug { animation-delay: 1.2s; }
.s-providers .d4 .plug { animation-delay: 1.8s; }
/* circuit: four legs, each packet runs during its quarter of the loop */
.s-providers .leg { --speed: 6.4s; --wz: 2px; }
.s-providers .leg::after { animation-name: leg; }
.s-providers .l1 { --wx: 70px;  --wy: 49px;  --a: 0deg;   --len: 300px; --delay: 0s; }
.s-providers .l2 { --wx: 370px; --wy: 49px;  --a: 90deg;  --len: 202px; --delay: 1.6s; }
.s-providers .l3 { --wx: 370px; --wy: 251px; --a: 180deg; --len: 300px; --delay: 3.2s; }
.s-providers .l4 { --wx: 70px;  --wy: 251px; --a: -90deg; --len: 202px; --delay: 4.8s; }
/* faint spokes from the engine to each dock */
.s-providers .spoke { --wx: 220px; --wy: 150px; background: linear-gradient(90deg, rgba(240, 72, 72, .45), rgba(255, 255, 255, .06)); }
.s-providers .spoke::after { display: none; }
.s-providers .s1 { --a: -146deg; --len: 150px; }
.s-providers .s2 { --a: -34deg;  --len: 150px; }
.s-providers .s3 { --a: 34deg;   --len: 150px; }
.s-providers .s4 { --a: 146deg;  --len: 150px; }
.s-providers .hud-count { top: 10%; right: 2%; }
.s-providers .hud-own { bottom: 8%; right: 2%; }

@keyframes leg {
  0% { left: 0; opacity: 0; }
  3% { opacity: 1; }
  23% { opacity: 1; }
  25% { left: calc(100% - 8px); opacity: 0; }
  100% { left: calc(100% - 8px); opacity: 0; }
}