/* Motion is illustrative, not live monitoring or transfer progress. */
.motion-scene{position:relative}
.motion-packet{animation:packet-flow 3.8s linear infinite;animation-delay:var(--delay,0s);animation-play-state:paused}
@keyframes packet-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.motion-scene .traffic-lines i{position:relative;overflow:hidden}
.motion-scene .traffic-lines i:after{content:"";position:absolute;inset:0 auto 0 0;width:22%;background:#F49F20;border-radius:4px;animation:traffic-flow 3.2s linear infinite;animation-play-state:paused}
.motion-scene .traffic-lines i:nth-child(2):after{animation-delay:-1.1s}.motion-scene .traffic-lines i:nth-child(3):after{animation-delay:-2.2s}.motion-scene .traffic-lines i:nth-child(4):after{animation-delay:-.6s}
.motion-scene .traffic-lines:not(.clean) i:nth-child(even):after{animation-name:traffic-filter}
.motion-scene .guard-icon{animation:shield-pulse 3.2s ease-in-out infinite;animation-play-state:paused;transform-origin:center}
@keyframes traffic-flow{from{transform:translateX(-120%)}to{transform:translateX(570%)}}
@keyframes traffic-filter{0%{transform:translateX(-120%);opacity:1}65%{opacity:1}100%{transform:translateX(380%);opacity:0}}
@keyframes shield-pulse{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 7px #f49f2066)}}
.motion-scene.motion-running .motion-packet,.motion-scene.motion-running .traffic-lines i:after,.motion-scene.motion-running .guard-icon{animation-play-state:running}
.motion-toggle{display:block;margin:10px 0 0 auto;padding:7px 12px;border:1px solid #cad4e2;border-radius:20px;background:#fff;color:#0d2148;font:600 12px/1.4 inherit;cursor:pointer}.motion-toggle:hover{border-color:#0d2148}.motion-toggle:focus-visible{outline:3px solid #F49F20;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.motion-scene .motion-packet,.motion-scene .guard-icon,.motion-scene .traffic-lines i:after{animation:none!important}.motion-toggle{display:none}.motion-scene .traffic-lines i:after{display:none}}