/* Signal accents retain the editorial diagrams' original geometry. */
.protocol-diagram .pd-motion {
  animation-play-state: paused;
  animation-delay: var(--pd-delay, 0s);
  animation-duration: var(--pd-duration, 5s);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.protocol-diagram .pd-flow-packet,
.protocol-diagram .pd-core-packet {
  animation-name: pd-signal-travel;
}
.protocol-diagram .pd-layer-packet {
  animation-name: pd-layer-travel;
}
.protocol-diagram .pd-transaction {
  animation-name: pd-transaction-travel;
  transform: translateX(var(--pd-rest-x, 240px));
}
.protocol-diagram .pd-finality-wave,
.protocol-diagram .pd-finality-wave-halo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.feature-card.is-visible .protocol-diagram .pd-motion {
  animation-play-state: running;
}
@keyframes pd-signal-travel {
  0% { stroke-dashoffset: 80; opacity: 0; }
  9% { opacity: 1; }
  88% { opacity: 1; }
  100% { stroke-dashoffset: -1000; opacity: 0; }
}
@keyframes pd-layer-travel {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1000; }
}
@keyframes pd-transaction-travel {
  0% { transform: translateX(24px); opacity: 0; }
  9%, 86% { opacity: 1; }
  100% { transform: translateX(598px); opacity: 0; }
}
/* Halo opacity is kept separate from the moving trace's entrance/exit fade. */
.protocol-diagram .pd-packet-halo {
  stroke-opacity: .24;
}
@media (prefers-reduced-motion: reduce) {
  .protocol-diagram .pd-motion {
    animation: none;
    stroke-dashoffset: var(--pd-rest, -450);
  }
  .protocol-diagram .pd-transaction {
    transform: translateX(var(--pd-rest-x, 240px));
  }
}