.workflow-motion-toggle { display: none; min-height: 32px; padding: 5px 10px; margin: -16px 0 24px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.js .workflow-motion-toggle { display: inline-flex; align-items: center; }
.workflow-motion-toggle:hover { color: var(--accent); border-color: var(--accent); }
.project-visual .flow-line { position: relative; background: none; opacity: 1; }
.project-visual .flow-line::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .25; }
.project-visual .flow-line::after { content: ""; position: absolute; top: 0; left: -1px; width: 3px; height: 5px; border-radius: 2px; background: currentColor; opacity: 0; animation: workflow-packet-down 6s linear infinite; animation-play-state: paused; }
.project-visual .flow-line:nth-child(4)::after { animation-delay: 1.6s; }
.project-visual .flow-line:nth-child(6)::after { animation-delay: 3.2s; }
.project-visual .flow-node, .project-visual .flow-branches > span { animation: workflow-step 6s ease infinite; animation-play-state: paused; animation-delay: 1.3s; }
.project-visual .diagram-flow > :nth-child(5), .project-visual .flow-branches > span { animation-delay: 2.9s; }
.js .workflow-running .flow-line::after, .js .workflow-running .flow-node, .js .workflow-running .flow-branches > span { animation-play-state: running; }
@keyframes workflow-packet-down {
  0% { top: 0; transform: translateY(0); opacity: 0; }
  3% { opacity: .85; }
  23% { top: 100%; transform: translateY(-100%); opacity: .85; }
  27%, 100% { top: 100%; transform: translateY(-100%); opacity: 0; }
}
@keyframes workflow-packet-right {
  0% { left: 0; transform: translateX(0); opacity: 0; }
  3% { opacity: .85; }
  23% { left: 100%; transform: translateX(-100%); opacity: .85; }
  27%, 100% { left: 100%; transform: translateX(-100%); opacity: 0; }
}
@keyframes workflow-step {
  0%, 22%, 100% { box-shadow: 0 0 0 0 transparent; }
  6%, 12% { box-shadow: 0 0 0 1px currentColor, 0 0 12px 2px #ffffff60; }
}
@media (max-width: 640px) {
  .project-visual .flow-line::after { top: -1px; left: 0; width: 5px; height: 3px; animation-name: workflow-packet-right; }
}
@media (prefers-reduced-motion: reduce) {
  .project-visual .flow-line::after, .project-visual .flow-node, .project-visual .flow-branches > span { animation: none; }
  .js .workflow-motion-toggle { display: none; }
}
@media print { .js .workflow-motion-toggle, .project-visual .flow-line::after { display: none; } }