/* Eight one-second phases repeat continuously while the diagram is visible. */
:root {
  --integration-flight: 1s;
  --integration-cycle: calc(var(--integration-flight) * 8);
  --integration-packet-radius: 2.8px;
  --integration-halo-radius: 6px;
  --integration-halo-opacity: .2;
  --integration-ring-width: 1px;
  --integration-ring-opacity: .7;
  --integration-ring-scale: 1.2;
  --integration-link-opacity: .65;
  --integration-issue-font: .75rem;
  --integration-marker-size: 1.25rem;
  --integration-item-font: .88rem;
  --integration-description-font: .78rem;
  --integration-node-offset: -1.5rem;
  --integration-row-height: 3.5rem;
  --integration-diagram-width: 26rem;
  --integration-copy-gap: .25rem;
}

.integration-packet {
  fill: var(--muted);
  opacity: 0;
  pointer-events: none;
}
.is-after .integration-packet { fill: var(--accent); }
.is-before .integration-packet { fill: var(--warm); }
.point-link.has-issue { stroke: var(--warm); opacity: var(--integration-link-opacity); }
.compare-card { --integration-status: var(--warm); }
.compare-card.is-after { --integration-status: var(--accent); }
.compare-card > p { line-height: var(--line-body); min-height: 3.2em; }
.mini-scene { width: 100%; max-width: var(--integration-diagram-width); align-self: center; margin-bottom: calc(var(--space-lg) + var(--space-xs)); }
.is-before .tool-tile > .icon { border-color: var(--warm); color: var(--warm); }
.integration-node-number, .integration-item-number {
  display: grid;
  place-items: center;
  width: var(--integration-marker-size);
  height: var(--integration-marker-size);
  border: var(--border-thin) solid var(--integration-status);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--integration-status);
  font-size: var(--integration-issue-font);
  line-height: 1;
  flex: none;
}
.integration-node-number {
  position: absolute;
  right: var(--integration-node-offset);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.tool-tile.is-left .integration-node-number { right: auto; left: var(--integration-node-offset); }
.compare-card .compare-list { margin-top: auto; gap: 0; }
.compare-list li {
  min-height: var(--integration-row-height);
  padding-block: var(--space-xs);
  border-top: var(--border-thin) solid var(--line);
}
.compare-list li > div { min-width: 0; }
.compare-list h4 {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin: 0;
  color: var(--integration-status);
  font-size: var(--integration-item-font);
  font-weight: 600;
  line-height: var(--line-heading);
}
.compare-card .compare-list h4 .icon { color: var(--integration-status); margin: .1em 0 0; align-self: flex-start; }
.compare-list p { margin: var(--integration-copy-gap) 0 0; font-size: var(--integration-description-font); line-height: var(--line-body); color: var(--muted); }
.integration-packet-core { r: var(--integration-packet-radius); }
.integration-packet-halo {
  r: var(--integration-halo-radius);
  opacity: var(--integration-halo-opacity);
}
.mini-hub::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--integration-ring-width) solid var(--accent);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .mini-scene.is-live .integration-packet {
    animation: integration-packet var(--integration-cycle) linear var(--packet-delay) infinite both;
  }
  .mini-scene.is-live .mini-hub::after {
    animation: integration-receipt var(--integration-cycle) ease-out infinite both;
  }
  .mini-scene.is-live .integration-packet.is-slow {
    animation-name: integration-slow-packet;
  }
  .mini-scene.is-live .integration-packet.is-retry { animation-name: integration-retry-packet; }
  .mini-scene.is-live .integration-packet.is-deduplicated { animation-name: integration-deduplicated-packet; }
}

/* Fast approach, a slowdown through manual work, then fast delivery.
   The packet keeps moving; other exchanges continue during this two-second trip. */
@keyframes integration-slow-packet {
  0% { transform: translate(0, 0); opacity: 0; }
  2%, 23% { opacity: 1; }
  4.375% { transform: translate(calc(var(--packet-x) * var(--slow-start)), calc(var(--packet-y) * var(--slow-start))); opacity: 1; }
  20.625% { transform: translate(calc(var(--packet-x) * var(--slow-end)), calc(var(--packet-y) * var(--slow-end))); opacity: 1; }
  25%, 100% { transform: translate(var(--packet-x), var(--packet-y)); opacity: 0; }
}

@keyframes integration-packet {
  0% { transform: translate(0, 0); opacity: 0; }
  2%, 10.5% { opacity: 1; }
  12.5%, 100% { transform: translate(var(--packet-x), var(--packet-y)); opacity: 0; }
}

/* A failed delivery returns to its source, then is sent again. */
@keyframes integration-retry-packet {
  0% { transform: translate(0, 0); opacity: 0; }
  2%, 23% { opacity: 1; }
  6.25% { transform: translate(calc(var(--packet-x) * .72), calc(var(--packet-y) * .72)); opacity: 1; }
  12.5% { transform: translate(0, 0); opacity: 1; }
  25%, 100% { transform: translate(var(--packet-x), var(--packet-y)); opacity: 0; }
}

/* The repeated event is absorbed at the hub before the downstream phase. */
@keyframes integration-deduplicated-packet {
  0% { transform: translate(0, 0); opacity: 0; }
  2%, 7.5% { opacity: 1; }
  9.375%, 100% { transform: translate(var(--packet-x), var(--packet-y)); opacity: 0; }
}

/* Receipts follow the four inbound phases: CDR, CRM, carrier data, message. */
@keyframes integration-receipt {
  0%, 12%, 37%, 62%, 87% { transform: scale(1); opacity: 0; }
  12.5%, 37.5%, 62.5%, 87.5% { transform: scale(1); opacity: var(--integration-ring-opacity); }
  20%, 45%, 70%, 95%, 100% { transform: scale(var(--integration-ring-scale)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mini-scene .integration-packet,
  .mini-scene .mini-hub::after { animation: none; opacity: 0; }
}