/* Motion stays within the original illustration; layout never moves. */
.hero-art{width:100%;height:100%;transform-origin:50% 50%;animation:tech-arrive 1.35s cubic-bezier(.16,1,.3,1) both}
.hero-art>svg{display:block;width:100%;height:100%;overflow:visible}
.tech-layer,.tech-emblem,.tech-card{animation:tech-float 4.2s ease-in-out infinite;--float-y:-30px}
.tech-layer-back{--float-y:-8px;animation-delay:-1.4s;animation-duration:5s}
.tech-layer-middle{--float-y:9px;animation-delay:-.6s}
.tech-layer-top,.tech-emblem{animation-delay:0s}
.tech-card{--float-y:-16px;animation-duration:4.8s}
.tech-card-mobile{--float-x:9px;animation-delay:-1.6s}
.tech-card-server{--float-x:-7px;animation-delay:-3.2s}
.tech-orbit-track{stroke-width:1.3;opacity:.4;animation:tech-orbit 8s linear infinite}
.tech-nodes{animation:tech-light 4s ease-in-out infinite}
.motion-toggle{position:absolute;z-index:2;right:10px;top:-8px;display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #89b9ff30;border-radius:20px;background:#102345b3;color:#9ebbe2;font-size:9px;line-height:1.5;transition:color .2s,border-color .2s}
.motion-toggle[hidden]{display:none}
.motion-toggle:hover{color:#e3f2ff;border-color:#89b9ff80}
.motion-toggle-icon{font-size:10px;min-width:9px;text-align:center}
.hero-visual.motion-paused .hero-art,.hero-visual.motion-paused svg *,.hero-visual.motion-sleep .hero-art,.hero-visual.motion-sleep svg *{animation-play-state:paused!important}
@keyframes tech-arrive{from{opacity:0;transform:translateY(40px) scale(.91)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes tech-float{0%,100%{transform:translateY(0)}50%{transform:translate(var(--float-x,0px),var(--float-y))}}
@keyframes tech-orbit{to{stroke-dashoffset:-240}}
@keyframes tech-light{0%,100%{opacity:.55}50%{opacity:1}}
@media(max-width:760px){.motion-toggle{top:-17px;right:0;font-size:8px;padding:3px 6px}.motion-toggle-text{display:none}}
@media(prefers-reduced-motion:reduce){.hero-art,.hero-art svg *{animation:none!important}.hero-art{transform:none!important;opacity:1!important}.motion-toggle{display:none!important}}

/* The central light rotates independently on its isometric surface. */
.tech-emblem path{transform-box:fill-box;transform-origin:center;animation:tech-core-spin 10s linear infinite}
@keyframes tech-core-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.tech-emblem path{animation:none!important}}