/* Decorative passes with a still interval. Complete production artwork stays visible. */
[data-diagram-motion] {
  position: relative;
  --cs-motion-highlight: #c1c8d6;
  --cs-motion-opacity: .6;
}
[data-diagram-motion] .dm-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; background: none; border: 0;
}
[data-diagram-motion] .dm-effect {
  fill: none !important; stroke: var(--cs-motion-highlight) !important;
  opacity: 0; pointer-events: none; stroke-linecap: round; stroke-linejoin: round;
}
@media screen and (prefers-reduced-motion: no-preference) {
  [data-diagram-motion][data-motion-state="playing"] .dm-effect {
    animation: dm-emphasis var(--dm-duration) ease-in-out var(--dm-delay) both;
  }
  [data-diagram-motion][data-motion-state="playing"] .dm-trace {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation-name: dm-trace;
    animation-timing-function: cubic-bezier(.22,.61,.36,1);
  }
}
@keyframes dm-emphasis {
  0%, 100% { opacity: 0; }
  35%, 60% { opacity: var(--cs-motion-opacity); }
}
@keyframes dm-trace {
  0% { opacity: 0; stroke-dashoffset: 1; }
  15% { opacity: var(--cs-motion-opacity); }
  70% { opacity: var(--cs-motion-opacity); stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce), print {
  [data-diagram-motion] .dm-layer,
  [data-diagram-motion] .dm-effect { display: none !important; animation: none !important; }
}