/* Small, illustrative capability diagrams. Each loop explains a flow in 4.8s. */
.capability-motion{width:min(100%,230px);height:85px;isolation:isolate}
.capability-motion svg{display:block;width:100%;height:100%;overflow:visible}
.capability-motion .cm-node{fill:var(--surface);stroke:var(--line);stroke-width:1}
.capability-motion .cm-track{fill:none;stroke:var(--line);stroke-width:1.2}
.capability-motion .cm-arrow{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.capability-motion .cm-label{fill:var(--paper);font:500 9px var(--body,Arial,sans-serif);text-anchor:middle;dominant-baseline:middle}
.capability-motion .cm-caption{fill:var(--muted);font:500 9px var(--body,Arial,sans-serif);letter-spacing:.3px;text-anchor:middle}
.capability-motion .cm-grid{stroke:var(--muted);stroke-width:1;opacity:.5}
.capability-motion .cm-lime{fill:var(--lime)}
.capability-motion .cm-blue{fill:var(--blue)}
.capability-motion .cm-packet{fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-dasharray:12 88;stroke-dashoffset:100;animation:cm-travel 4.8s linear infinite}
.capability-motion .cm-packet.cm-second{animation-delay:.7s}
.capability-motion .cm-packet.cm-third{animation-delay:1.05s}
.capability-motion .cm-focus{stroke:var(--lime);animation:cm-focus 4.8s ease-in-out infinite}
.capability-motion .cm-output{animation:cm-result 4.8s ease-in-out infinite}
.capability-motion .cm-output.cm-second{animation-delay:.16s}
.capability-motion .cm-output.cm-third{animation-delay:.32s}
.capability-motion .cm-check{fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:cm-check 4.8s ease-in-out infinite}
.capability-motion .cm-check.cm-second{animation-delay:.16s}
.capability-motion .cm-check.cm-third{animation-delay:.32s}
.capability-motion .cm-bar{fill:var(--lime);transform-box:fill-box;transform-origin:center bottom;animation:cm-bar 4.8s ease-in-out infinite}
.capability-motion .cm-bar:nth-of-type(2){animation-delay:.12s}
.capability-motion .cm-bar:nth-of-type(3){animation-delay:.24s}
.capability-motion .cm-model{fill:none;stroke:var(--paper);stroke-width:1;opacity:.7}
.capability-motion .cm-model-dot{fill:var(--blue);animation:cm-dot 4.8s ease-in-out infinite}
.capability-motion .cm-model-dot.cm-second{animation-delay:.2s}
.capability-motion .cm-model-dot.cm-third{animation-delay:.4s}
.capability-motion .cm-signal{fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:0;animation:cm-signal 4.8s ease-in-out infinite}
.capability-motion .cm-pulse{fill:none;stroke:var(--lime);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:cm-pulse 4.8s ease-out infinite}
.capability-motion .cm-pulse.cm-second{animation-delay:1.1s}
.capability-motion .cm-pulse.cm-third{animation-delay:2.2s}
.capability-motion .cm-integration-link{fill:none;stroke:var(--lime);stroke-width:1.6;stroke-dasharray:5 7;animation:cm-link 4.8s linear infinite}
.motion-paused .capability-motion *{animation-play-state:paused!important}
@keyframes cm-travel{0%,8%{stroke-dashoffset:100;opacity:0}12%{opacity:1}57%{stroke-dashoffset:-100;opacity:1}61%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes cm-focus{0%,16%,84%,100%{stroke:var(--line)}27%,68%{stroke:var(--lime)}}
@keyframes cm-result{0%,44%,92%,100%{stroke:var(--line)}59%,80%{stroke:var(--lime)}}
@keyframes cm-check{0%,50%,95%,100%{opacity:.18}62%,84%{opacity:1}}
@keyframes cm-bar{0%,10%,100%{transform:scaleY(.35);opacity:.5}28%,76%{transform:scaleY(1);opacity:1}}
@keyframes cm-dot{0%,23%,86%,100%{fill:var(--blue);opacity:.55}40%,67%{fill:var(--lime);opacity:1}}
@keyframes cm-signal{0%,42%,100%{stroke-dashoffset:50;opacity:.3}64%,87%{stroke-dashoffset:0;opacity:1}}
@keyframes cm-pulse{0%,9%,70%,100%{transform:scale(1);opacity:0}15%{transform:scale(1);opacity:.75}40%{transform:scale(1.3);opacity:0}}
@keyframes cm-link{from{stroke-dashoffset:48}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .capability-motion *{animation:none!important}
  .capability-motion .cm-packet{display:none}
  .capability-motion .cm-focus,.capability-motion .cm-output{stroke:var(--lime)}
  .capability-motion .cm-check,.capability-motion .cm-bar,.capability-motion .cm-model-dot,.capability-motion .cm-signal{opacity:1;transform:none;stroke-dashoffset:0}
  .capability-motion .cm-pulse{display:none}
  .capability-motion .cm-integration-link{stroke-dasharray:none}
}