/* Caminho.DEV — the live hub diagram (assets/js/hub-demo.js). Only applies once the
   script has run (.hubd-on), so the static drawing is untouched without it. */

/* Wires: a slow "current" running along the drawn lines. */
.hubd-on .hubd-wire { stroke-dasharray: 5 7; animation: hubd-flow 1.6s linear infinite; }
@keyframes hubd-flow { to { stroke-dashoffset: -24; } }

/* Packets */
.hubd-pkt { pointer-events: none; }
.hubd-pkt--req { fill: #4f6ef7; }
.hubd-pkt--res { fill: #22b573; }
.hubd-pkt--out { fill: #8b5cf6; }
.hubd-head.hubd-pkt--req { filter: drop-shadow(0 0 4px rgba(79, 110, 247, .9)); }
.hubd-head.hubd-pkt--res { filter: drop-shadow(0 0 4px rgba(34, 181, 115, .9)); }
.hubd-head.hubd-pkt--out { filter: drop-shadow(0 0 4px rgba(139, 92, 246, .9)); }

/* Cards react */
.hubd-on .mp-hub-node { transition: transform .25s ease, box-shadow .25s ease; }
.hubd-on .mp-hub-node .mp-ico { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }

.mp-hub-node.hubd-send { box-shadow: 0 0 0 3px rgba(79, 110, 247, .18), 0 8px 18px -10px rgba(79, 110, 247, .6); }
.mp-hub-node.hubd-send .mp-ico { transform: translateY(2px) scale(.92); }

.mp-hub-node.hubd-ack { box-shadow: 0 0 0 3px rgba(34, 181, 115, .2); }
.mp-hub-node.hubd-ack .mp-ico { animation: hubd-pop .5s cubic-bezier(.3, 1.6, .5, 1); }

.mp-hub-node.hubd-got { transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(139, 92, 246, .16), 0 14px 26px -14px rgba(109, 74, 230, .55); }
.mp-hub-node.hubd-got .mp-ico { animation: hubd-pop .55s cubic-bezier(.3, 1.6, .5, 1); }

/* The core: a ripple on every hit, and a spinning ring while traffic flows. */
.hubd-on .mp-hub-node--core { position: relative; overflow: visible; }
.hubd-on .mp-hub-node--core .mp-ico { position: relative; }
.hubd-on .mp-hub-node--core .mp-ico::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: rgba(79, 110, 247, .55); border-right-color: rgba(139, 92, 246, .35);
  animation: hubd-spin 2.4s linear infinite;
}
.mp-hub-node--core.hubd-hit::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(79, 110, 247, .45); animation: hubd-ripple .8s ease-out;
}
.mp-hub-node--core.hubd-hit .mp-ico { animation: hubd-pop .45s cubic-bezier(.3, 1.6, .5, 1); }

@keyframes hubd-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes hubd-spin { to { transform: rotate(360deg); } }
@keyframes hubd-ripple { to { box-shadow: 0 0 0 14px rgba(79, 110, 247, 0); } }

/* The live log line inside the core card. */
.hubd-log {
  display: inline-flex !important; align-items: center; gap: 6px; margin-top: 7px !important;
  padding: 3px 9px 3px 7px; border-radius: 999px; background: #0f172a; color: #cbd5e1;
  font: 600 0.66rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap;
  max-width: 100%; overflow: hidden;
}
.hubd-log i { width: 6px; height: 6px; border-radius: 50%; background: #64748b; flex: none; }
.hubd-log code { font: inherit; color: inherit; background: none; padding: 0; }
.hubd-log b { display: inline; font-size: inherit; line-height: inherit; color: #93a8ff; font-weight: 700; }
.hubd-log em { color: #4ade80; font-style: normal; font-weight: 700; }
.hubd-log.hubd-req i { background: #4f6ef7; box-shadow: 0 0 6px #4f6ef7; }
.hubd-log.hubd-res i { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.hubd-log.hubd-tick code { animation: hubd-type .3s steps(8, end); }
@keyframes hubd-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .hubd-on .hubd-wire, .hubd-on .mp-hub-node--core .mp-ico::after { animation: none; }
}