/* Caminho.DEV — the live integrations map in the /api-integrations hero
   (assets/js/map-demo.js). Applies only once the script has taken the map over (.is-live),
   so without it the drawing in pages.css stands as it was. */

/* Wires: the dashed line turns solid blue while an event runs along it. */
.mp-sysmap.is-live .mp-sysmap-wires > path { transition: stroke .3s, stroke-width .3s; }
.mp-sysmap.is-live .mp-sysmap-wires > path.is-on { stroke: var(--mp-accent); stroke-width: 2; stroke-dasharray: none; }
.mp-sysmap.is-live:not(.is-calm) .mp-sysmap-wires > path:not(.is-on) { animation: mpMpDash 1.6s linear infinite; }
@keyframes mpMpDash { to { stroke-dashoffset: -16; } }
.mp-mp-packet { fill: var(--mp-accent); filter: drop-shadow(0 0 4px rgba(37, 99, 235, .8)); }
.mp-mp-packet.is-trail { fill: #7da2f5; filter: none; }

/* Cards: lift and glow while involved; a status tag pops above the corner. */
.mp-sysmap.is-live .mp-sysmap-node { transition: box-shadow .3s, border-color .3s; }
.mp-sysmap.is-live .mp-sysmap-node.is-active { border-color: #bcd0fb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .08), 0 14px 30px -12px rgba(31, 45, 96, .35); }
.mp-mp-tag { position: absolute; right: 10px; top: 0; transform: translateY(-60%) scale(.8); display: inline-flex; align-items: center; gap: 4px;
  max-width: none; padding: 3px 8px; border-radius: 99px; font-style: normal; font-size: .56rem; font-weight: 700; white-space: nowrap;
  color: #fff; background: var(--mp-accent); box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .7); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); z-index: 3; }
.mp-mp-tag span { overflow: hidden; text-overflow: ellipsis; }
.mp-mp-tag svg { flex: none; width: 10px; height: 10px; stroke-width: 2.6; }
.mp-mp-tag[data-kind] { opacity: 1; transform: translateY(-60%); }
.mp-mp-tag[data-kind="out"] { background: #16a34a; box-shadow: 0 6px 14px -6px rgba(22, 163, 74, .7); }

/* The middle: a spinning ring while it processes, a green flash when it hands on. */
.mp-sysmap.is-live .mp-sysmap-core { transition: box-shadow .3s, border-color .3s; }
.mp-mp-ring { position: absolute; inset: -7px; border-radius: 24px; border: 2px solid transparent; pointer-events: none; opacity: 0; transition: opacity .25s; }
.mp-sysmap-core.is-busy .mp-mp-ring { opacity: 1; border-top-color: var(--mp-accent); border-right-color: rgba(37, 99, 235, .35); animation: mpMpSpin .9s linear infinite; }
.mp-sysmap-core.is-busy { box-shadow: 0 0 0 9px rgba(37, 99, 235, .12), 0 18px 44px rgba(37, 99, 235, .28); }
.mp-sysmap-core.is-done { border-color: #a7e3bd; box-shadow: 0 0 0 9px rgba(22, 163, 74, .1), 0 18px 40px rgba(37, 99, 235, .18); }
@keyframes mpMpSpin { to { transform: rotate(360deg); } }

/* Reduced motion: wires and tags still change; nothing travels, spins or crawls. */
.mp-sysmap.is-calm .mp-mp-tag { transition: opacity .3s; transform: translateY(-60%); }
.mp-sysmap.is-calm .mp-sysmap-core.is-busy .mp-mp-ring { animation: none; border-color: var(--mp-accent); }

/* Phones: pages.css lays the map out as a grid, and layout() in map-demo.js redraws the
   wires up the gap between the columns; the cards sit above them and need a box for the tag. */
@media (max-width: 560px) {
  /* left/top are the desktop map position, set inline; as offsets here they push the
     card out of its grid cell and off the side of the screen. */
  .mp-sysmap.is-live .mp-sysmap-node { position: relative; left: auto !important; top: auto !important; z-index: 1; }
  .mp-sysmap.is-live .mp-sysmap-core { position: relative; left: auto; top: auto; z-index: 1; }
  /* Bolder on a small screen, where the wires are short and run in a narrow gap. */
  .mp-sysmap.is-live .mp-sysmap-wires > path { stroke: #85a5f2; stroke-width: 2; }
  .mp-sysmap.is-live .mp-sysmap-wires > path.is-on { stroke: var(--mp-accent); stroke-width: 2.8; }
}