/* Homepage hero only. Animate inner SVG layers; retain the approved image geometry. */
body.front.index #banner.hero-2026 .hero-art-animated{overflow:visible;}
body.front.index #banner.hero-2026 .hero-map-flow{opacity:0;stroke-dasharray:.1 .9;animation:hero-map-flow 4.8s linear var(--motion-delay,0s) infinite both;}
body.front.index #banner.hero-2026 .hero-server-led{animation:hero-server-led 4.8s ease-in-out var(--motion-delay,0s) infinite both;}
body.front.index #banner.hero-2026 .hero-cert-check{animation:hero-cert-check 6.4s ease-in-out var(--motion-delay,0s) infinite both;}
body.front.index #banner.hero-2026 .hero-product-card{animation:hero-product-float 6s ease-in-out var(--motion-delay,0s) infinite both;}
body.front.index #banner.hero-2026 .hero-product-accent{opacity:0;animation:hero-product-accent 6s ease-in-out var(--motion-delay,0s) infinite both;}
body.front.index #banner.hero-2026 .hero-security-shield{animation:hero-shield-float 6.4s ease-in-out infinite both;}
body.front.index #banner.hero-2026 .hero-security-check{animation:hero-cert-check 6.4s ease-in-out .4s infinite both;}
body.front.index #banner.hero-2026 .hero-security-status{animation:hero-server-led 4.8s ease-in-out infinite both;}
body.front.index #banner.hero-2026 .hero-motion{animation-play-state:paused;}
body.front.index #banner.hero-2026:not(.hero-motion-paused) .swiper-slide-active .hero-motion{animation-play-state:running;}
@keyframes hero-map-flow{0%{stroke-dashoffset:1;opacity:0;}12%,75%{opacity:.65;}100%{stroke-dashoffset:-1;opacity:0;}}
@keyframes hero-server-led{0%,100%{opacity:.4;}40%,65%{opacity:1;}}
@keyframes hero-cert-check{0%,5%{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;}22%,77%{stroke-dasharray:1;stroke-dashoffset:0;opacity:1;}94%,100%{stroke-dasharray:1;stroke-dashoffset:0;opacity:0;}}
@keyframes hero-product-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes hero-product-accent{0%,40%,100%{opacity:0;}12%,26%{opacity:.48;}}
@keyframes hero-shield-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@media(prefers-reduced-motion:reduce){
 body.front.index #banner.hero-2026 .hero-motion{animation:none!important;transform:none!important;}
 body.front.index #banner.hero-2026 .hero-map-flow,body.front.index #banner.hero-2026 .hero-product-accent{opacity:0;}
 body.front.index #banner.hero-2026 .hero-cert-check,body.front.index #banner.hero-2026 .hero-security-check,body.front.index #banner.hero-2026 .hero-server-led,body.front.index #banner.hero-2026 .hero-security-status{opacity:1;stroke-dasharray:none;stroke-dashoffset:0;}
}

/* Minimal rack modules: headline -> rack -> its own one or two documents. */
body.front.index #banner.hero-2026 .hero-kclm .hero-data-packet,body.front.index #banner.hero-2026 .hero-copy-link .hero-data-packet{opacity:0;stroke-dasharray:.065 1;stroke-dashoffset:.065;animation-duration:6.4s;animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;animation-delay:0s;animation-play-state:paused;}
body.front.index #banner.hero-2026 .hero-data-ingress{animation-name:hero-data-ingress;}
body.front.index #banner.hero-2026 .hero-data-dispatch{animation-name:hero-data-dispatch;}
body.front.index #banner.hero-2026 .hero-data-delivery{animation-name:hero-data-delivery;}
@keyframes hero-data-ingress{0%{stroke-dashoffset:.065;opacity:0;}3%{stroke-dashoffset:.065;opacity:1;}24%{stroke-dashoffset:-1;opacity:1;}25%,100%{stroke-dashoffset:-1;opacity:0;}}
@keyframes hero-data-dispatch{0%,25%{stroke-dashoffset:.065;opacity:0;}28%{stroke-dashoffset:.065;opacity:1;}54%{stroke-dashoffset:-1;opacity:1;}55%,100%{stroke-dashoffset:-1;opacity:0;}}
@keyframes hero-data-delivery{0%,56%{stroke-dashoffset:.065;opacity:0;}59%{stroke-dashoffset:.065;opacity:1;}83%{stroke-dashoffset:-1;opacity:1;}84%,100%{stroke-dashoffset:-1;opacity:0;}}
body.front.index #banner.hero-2026 .hero-copy-link{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;overflow:hidden;}
body.front.index #banner.hero-2026[data-active-slide="0"] .hero-copy-link[data-ready="true"]{opacity:1;}
body.front.index #banner.hero-2026:not(.hero-motion-paused) .hero-kclm.swiper-slide-active .hero-motion,body.front.index #banner.hero-2026:not(.hero-motion-paused)[data-active-slide="0"] .hero-copy-link[data-ready="true"] .hero-motion{animation-play-state:running;}
@media(max-width:768px){body.front.index #banner.hero-2026 .hero-kclm .hero-art-animated{right:50%;top:370px;width:min(84vw,360px);}}
@media(prefers-reduced-motion:reduce){body.front.index #banner.hero-2026 .hero-data-packet{animation:none!important;opacity:0;}body.front.index #banner.hero-2026 .hero-copy-link{opacity:0!important;}}

@media(max-width:768px) and (max-height:760px){body.front.index #banner.hero-2026 .hero-kclm .hero-art-animated{right:58%;width:min(74vw,310px);}}

/* Acknowledgement appears only after the delivery phase reaches the document. */
body.front.index #banner.hero-2026 .hero-kclm .hero-arrival-check{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:hero-document-arrival 6.4s ease-out infinite both;animation-play-state:paused;}
body.front.index #banner.hero-2026 .hero-kclm .hero-arrival-badge{opacity:.2;animation:hero-document-badge 6.4s ease-out infinite both;animation-play-state:paused;}
@keyframes hero-document-arrival{0%,84%{stroke-dashoffset:1;opacity:0;}85%{stroke-dashoffset:1;opacity:1;}92%,99%{stroke-dashoffset:0;opacity:1;}100%{stroke-dashoffset:0;opacity:0;}}
@keyframes hero-document-badge{0%,83%{opacity:.2;}89%,99%{opacity:1;}100%{opacity:.2;}}
body.front.index #banner.hero-2026:not(.hero-motion-paused) .hero-kclm.swiper-slide-active .hero-arrival-check,body.front.index #banner.hero-2026:not(.hero-motion-paused) .hero-kclm.swiper-slide-active .hero-arrival-badge{animation-play-state:running;}
@media(prefers-reduced-motion:reduce){body.front.index #banner.hero-2026 .hero-kclm .hero-arrival-check,body.front.index #banner.hero-2026 .hero-kclm .hero-arrival-badge{animation:none!important;opacity:1;stroke-dashoffset:0;}}


/* Keep the headline and its period in front of the data connections. */
body.front.index #banner.hero-2026 .main .swiper-info-container{z-index:4;}

/* One inlet, then the distribution spine, simultaneous rack delivery. */
body.front.index #banner.hero-2026 .hero-data-distribution{animation-name:hero-data-distribution;}
body.front.index #banner.hero-2026 .hero-data-branch{animation-name:hero-data-branch;}
@keyframes hero-data-distribution{0%,25%{stroke-dashoffset:.065;opacity:0;}27%{stroke-dashoffset:.065;opacity:1;}38%{stroke-dashoffset:-1;opacity:1;}39%,100%{stroke-dashoffset:-1;opacity:0;}}
@keyframes hero-data-branch{0%,39%{stroke-dashoffset:.065;opacity:0;}41%{stroke-dashoffset:.065;opacity:1;}54%{stroke-dashoffset:-1;opacity:1;}55%,100%{stroke-dashoffset:-1;opacity:0;}}

/* Hold each completed connection in red until the document checks finish. */
body.front.index #banner.hero-2026 .hero-copy-link .hero-data-ingress,body.front.index #banner.hero-2026 .hero-copy-link .hero-data-distribution,body.front.index #banner.hero-2026 .hero-copy-link .hero-data-branch{stroke-dasharray:1;stroke-dashoffset:1;}
body.front.index #banner.hero-2026 .hero-copy-link .hero-data-ingress{animation-name:hero-trail-ingress;}
body.front.index #banner.hero-2026 .hero-copy-link .hero-data-distribution{animation-name:hero-trail-distribution;}
body.front.index #banner.hero-2026 .hero-copy-link .hero-data-branch{animation-name:hero-trail-branch;}
@keyframes hero-trail-ingress{0%,3%{stroke-dashoffset:1;opacity:1;}24%,97%{stroke-dashoffset:0;opacity:1;}100%{stroke-dashoffset:0;opacity:0;}}
@keyframes hero-trail-distribution{0%,26%{stroke-dashoffset:1;opacity:1;}38%,97%{stroke-dashoffset:0;opacity:1;}100%{stroke-dashoffset:0;opacity:0;}}
@keyframes hero-trail-branch{0%,40%{stroke-dashoffset:1;opacity:1;}54%,97%{stroke-dashoffset:0;opacity:1;}100%{stroke-dashoffset:0;opacity:0;}}

@media(min-width:769px){body.front.index #banner.hero-2026 .hero-kclm .hero-art-animated{transform:translate(var(--hero-rack-shift,0px),-50%);}}

/* Seven rack environments: larger modules/documents with the same shared flow. */
@media(min-width:769px){body.front.index #banner.hero-2026 .hero-kclm .hero-art-animated{width:min(53vw,760px);}}
@media(max-width:768px){body.front.index #banner.hero-2026 .hero-kclm .hero-art-animated{width:min(104vw,440px);right:50%;top:325px;transform:translateX(39%);}}
@media(max-width:768px) and (max-height:760px){body.front.index #banner.hero-2026 .hero-kclm .hero-art-animated{width:min(96vw,380px);right:50%;top:330px;transform:translateX(35%);}}