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

/* Keep equipment surfaces continuous with the containing section. */
.cabling-assembly .network-animation,.cabling-assembly .network-montage,.cabling-assembly .network-assembly-card,.cabling-assembly .network-orbit,.cabling-assembly .network-status{background:var(--cabling-surface)}
.cabling-assembly .network-diagram img,.cabling-assembly .network-orbit img,.cabling-device img{mix-blend-mode:multiply}
.cabling-assembly .network-status{max-width:96%;text-align:center}

/* A group of real cable cutaway photos in neutral grey. */
.cabling-cable-group{display:block;position:relative;overflow:hidden;isolation:isolate;background:var(--cabling-surface);aspect-ratio:1;flex-shrink:0}
.cabling-assembly .network-diagram .cabling-cable-group{width:27%;height:auto}
.cabling-assembly .network-orbit .cabling-cable-group{width:86%;height:86%}
.cabling-device .cabling-cable-group{width:100%;height:70%;min-height:0;flex-shrink:1}
.cabling-assembly .cabling-cable-group img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;padding:0;filter:grayscale(1);mix-blend-mode:multiply}
.cabling-cable-group img:first-child{transform:translateX(-18%)}
.cabling-cable-group img:last-child{transform:translateX(18%)}