.cloud path{stroke-dashoffset:0;animation:network-flow 7s linear infinite}
.cloud path:nth-of-type(even){animation-direction:reverse}
.cloud .data-packets{fill:#745cff;stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 7px #745cffaa)}
.cloud>strong{isolation:isolate}
.cloud>strong:before,.cloud>strong:after{content:"";position:absolute;inset:-1px;border:1px solid #7358ff55;border-radius:inherit;z-index:-1;animation:hub-pulse 3s ease-out infinite}
.cloud>strong:after{animation-delay:1.5s}
.cloud>strong span{display:block;margin-top:7px;color:#25a975;font:700 9px "Plus Jakarta Sans";letter-spacing:.04em}
.cloud>i{transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;animation:node-receive 6s ease-in-out infinite}
.cloud>i:nth-of-type(2){animation-delay:1s}.cloud>i:nth-of-type(3){animation-delay:2s}.cloud>i:nth-of-type(4){animation-delay:3s}.cloud>i:nth-of-type(5){animation-delay:4s}.cloud>i:nth-of-type(6){animation-delay:5s}
@keyframes network-flow{to{stroke-dashoffset:-72}}
@keyframes hub-pulse{0%{opacity:.6;transform:scale(1)}75%,100%{opacity:0;transform:scale(1.2)}}
@keyframes node-receive{0%,12%,100%{border-color:#e4e8ee;box-shadow:0 14px 40px #1d31531c;transform:translateY(0)}5%{border-color:#806cff;box-shadow:0 14px 34px #7358ff32,0 0 0 4px #7358ff12;transform:translateY(-3px)}}
@media(max-width:740px){.cloud>strong span{font-size:8px}.cloud .data-packets circle{r:4px}}
@media(prefers-reduced-motion:reduce){.cloud path,.cloud>strong:before,.cloud>strong:after,.cloud>i{animation:none}.cloud .data-packets{display:none}}