/* One 12-second sequence, with the complete composition as the default state. */
.cyber-assembly{width:100%;aspect-ratio:2048/1837;container-type:inline-size;background:transparent}
.homepage-refresh .solutions .family-cyber{width:100%;max-width:460px;justify-self:center;background:#fff}
.cyber-assembly .network-animation{inset:0 0 8%;overflow:hidden}
.cyber-assembly .network-montage>.cyber-portrait{position:absolute;left:12%;top:0;width:76%;height:100%;object-fit:contain;padding:0;background:transparent}
.cyber-device{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;width:24%;aspect-ratio:1/1.18;padding:4%;box-sizing:border-box;background:#ffffffed;border:1px solid #e4e8e8;border-radius:16px;box-shadow:0 7px 24px #2637480b}
.cyber-device img{width:100%;height:70%;object-fit:contain;padding:0;min-height:0}
.cyber-device small{display:block;color:#485156;font-size:clamp(12px,3cqw,14px);font-weight:500;line-height:1.2;text-align:center}
.cyber-device.endpoint{left:2%;top:15%}
.cyber-device.access{right:2%;top:48%}
.cyber-device.backup{left:6%;bottom:2%}
.cyber-assembly .network-orbit{overflow:hidden}
.cyber-assembly .network-orbit img{width:86%;height:86%}
.cyber-assembly.running .network-assembly-halo{border:0;left:14%;top:11%;width:72%;animation:cyber-halo 12s ease-in-out 1 both}
.cyber-ring{display:block;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.cyber-ring circle{fill:none;stroke:#f04c23;stroke-width:10;stroke-linecap:round;stroke-dasharray:271;stroke-dashoffset:0}
.cyber-assembly.running .cyber-ring circle{animation:cyber-circle-draw 12s ease-in-out 1 both}
.cyber-assembly.running .network-assembly-card,.cyber-assembly.running .network-orbit,.cyber-assembly.running .network-status{animation-duration:12s}
.cyber-assembly.running .network-montage{animation:cyber-portrait-arrive 12s ease-in-out 1 both}
.cyber-assembly.running .cyber-device.endpoint{animation:cyber-endpoint-arrive 12s ease-in-out 1 both}
.cyber-assembly.running .cyber-device.access{animation:cyber-access-arrive 12s ease-in-out 1 both}
.cyber-assembly.running .cyber-device.backup{animation:cyber-backup-arrive 12s ease-in-out 1 both}
.cyber-assembly .network-status{top:3%;right:2%;font-size:clamp(12px,3cqw,14px)}
@keyframes cyber-circle-draw{0%,3%{stroke-dashoffset:271}25%,100%{stroke-dashoffset:0}}
@keyframes cyber-halo{0%{opacity:0;transform:scale(.92)}7%,32%{opacity:1;transform:none}53%,100%{opacity:0;transform:none}}
@keyframes cyber-portrait-arrive{0%,32%{opacity:0;transform:translateY(12px) scale(.94)}56%,100%{opacity:1;transform:none}}
@keyframes cyber-endpoint-arrive{0%,50%{opacity:0;transform:translate(14px,8px) scale(.9)}66%,100%{opacity:1;transform:none}}
@keyframes cyber-access-arrive{0%,58%{opacity:0;transform:translate(-14px,8px) scale(.9)}74%,100%{opacity:1;transform:none}}
@keyframes cyber-backup-arrive{0%,66%{opacity:0;transform:translate(14px,-8px) scale(.9)}82%,100%{opacity:1;transform:none}}
@media(max-width:650px){.homepage-refresh .solutions .family-cyber{max-width:360px}.cyber-device{border-radius:12px}.cyber-assembly .network-status{padding:6px 9px;gap:5px}}
@media(prefers-reduced-motion:reduce){.cyber-assembly *{animation:none!important}.cyber-assembly.running :is(.network-assembly-halo,.network-assembly-card,.network-orbit){display:none}}