/* Progressive enhancement: HTML is visible until the observer is ready. */
.motion-item {
  opacity: 1;
  transform: none;
  transition: opacity .44s ease-out, transform .44s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--enter-delay, 0ms);
}
.motion-item.motion-pending { opacity: 0; transform: translateY(14px); }
.motion-item:focus-within { opacity: 1; transform: none; transition: none; }

/* The original connections and all labels remain visible beneath a single trace. */
.flow-pulse { fill: none; opacity: 0; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; pointer-events: none; }
.flow-pulse-trigger { stroke: var(--accent-orange); --flow-delay: .16s; }
.flow-pulse-export { stroke: var(--accent-green); --flow-delay: .42s; }
.flow-pulse-process { stroke: var(--accent-blue); --flow-delay: .68s; }
.flow-pulse-delivery { stroke: var(--accent-blue); --flow-delay: .94s; }
.is-flow-active .flow-pulse { animation: flow-trace .4s ease-out var(--flow-delay) both; }
.is-flow-active .flow-envelope { animation: flow-arrival .32s ease-out 1.12s both; transform-box: fill-box; transform-origin: center; }
.automation-trigger.is-flow-active { animation: trigger-emphasis .6s ease-out both; }
.automation-node.is-flow-active { animation: node-arrival .4s ease-out both; }
@keyframes flow-trace {
  0% { opacity: 0; stroke-dashoffset: 1; }
  18% { opacity: 1; }
  72% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes flow-arrival { from { opacity: .45; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes trigger-emphasis { from { border-left-color: var(--accent-orange); } 45% { border-left-color: var(--diagram-peach); } to { border-left-color: var(--accent-orange); } }
@keyframes node-arrival { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 800px) {
  .motion-item { transition-duration: .36s; transition-delay: 0s; }
  .motion-item.motion-pending { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce), print {
  .motion-item.motion-pending { opacity: 1; transform: none; }
  .motion-item { transition: none !important; }
  .flow-pulse { opacity: 0 !important; animation: none !important; }
  .flow-envelope, .automation-trigger, .automation-node { animation: none !important; }
}