/* Ambient motion preserves each theme's existing transforms and perspective. */
.motion-scene{--look-x:0px;--look-y:0px;--tilt-x:0deg;--tilt-y:0deg}
.motion-scene:not(.motion-symbol-scene){transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-origin:50% 50%}
.motion-scene .motion-float{--drift:9px;translate:var(--look-x) var(--look-y);animation:dao-object-float 7s ease-in-out infinite}
.motion-scene-sleeping,.motion-scene-sleeping *,.motion-scene-sleeping *::before,.motion-scene-sleeping *::after{animation-play-state:paused!important}
@keyframes dao-object-float{0%,100%{translate:var(--look-x) calc(var(--look-y) - var(--drift))}50%{translate:var(--look-x) calc(var(--look-y) + var(--drift))}}
@keyframes dao-orbit-turn{to{rotate:360deg}}
@keyframes dao-orbit-sway{0%,100%{rotate:-8deg}50%{rotate:8deg}}
@keyframes dao-signal-glow{0%,100%{opacity:.35;scale:.82}50%{opacity:1;scale:1.12}}
@keyframes dao-shadow-breathe{0%,100%{opacity:.45;scale:.9}50%{opacity:.85;scale:1.06}}
@keyframes dao-data-travel{0%{translate:-10px 0;opacity:0}18%,75%{opacity:1}100%{translate:100px 0;opacity:0}}

/* 1C: a floating nucleus, independent labels and travelling gold signals. */
[data-site=erp] .system-art.motion-scene .system-disc{--drift:9px;animation:dao-object-float 7s ease-in-out infinite}
[data-site=erp] .system-art.motion-scene .disc-back{animation-delay:-.3s}
[data-site=erp] .system-art.motion-scene .art-label{--drift:5px;animation:dao-object-float 9s ease-in-out infinite}
[data-site=erp] .system-art.motion-scene .label-right{animation-delay:-2s}
[data-site=erp] .system-art.motion-scene .label-bottom{animation-delay:-4s}
[data-site=erp] .system-art.motion-scene .label-left{animation-delay:-6s}
[data-site=erp] .system-art.motion-scene .art-connections path{stroke-dasharray:10 18;animation:dao-business-flow 12s linear infinite}
[data-site=erp] .system-art.motion-scene .art-connections circle[fill]{animation:dao-signal-glow 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
[data-site=erp] .system-art.motion-scene .art-connections circle[fill]:nth-last-child(2){animation-delay:-1s}
[data-site=erp] .system-art.motion-scene .art-connections circle[fill]:last-child{animation-delay:-2s}
@keyframes dao-business-flow{to{stroke-dashoffset:-112}}

/* Digital studio: an orbiting asterisk and a softly suspended design object. */
[data-site=web] .motion-scene .hero-asterisk{padding-right:0;margin-right:5%;translate:var(--look-x) var(--look-y);animation:dao-orbit-turn 36s linear infinite;transform-origin:50% 50%}
[data-site=web] .lamp-stage.motion-scene{animation:dao-lamp-hover 8s ease-in-out infinite}
[data-site=web] .lamp-stage.motion-scene .lamp-halo{animation:dao-lamp-light 7s ease-in-out infinite}
@keyframes dao-lamp-hover{0%,100%{translate:0 -5px}50%{translate:0 5px}}
@keyframes dao-lamp-light{0%,100%{opacity:.6}50%{opacity:1}}

/* SOC: the sphere keeps its construction while its orbit planes rotate. */
[data-site=soc] .motion-scene .sphere{--drift:8px;animation:dao-object-float 9s ease-in-out infinite}
[data-site=soc] .motion-scene .sphere-orbit{animation:dao-orbit-turn 45s linear infinite}
[data-site=soc] .motion-scene .orbit-b{animation-duration:62s;animation-direction:reverse}
[data-site=soc] .motion-scene .orbit-c{animation-duration:78s;animation-delay:-18s}
[data-site=soc] .motion-scene .sphere-equator{animation:dao-orbit-sway 14s ease-in-out infinite}
[data-site=soc] .motion-scene .sphere-light{animation:dao-signal-glow 8s ease-in-out infinite}
[data-site=soc] .motion-scene .sphere-point{animation:dao-signal-glow 4s ease-in-out infinite}
[data-site=soc] .motion-scene .point-b{animation-delay:-1.3s}
[data-site=soc] .motion-scene .point-c{animation-delay:-2.6s}

/* Hosting: floating compute layers retain their skewed three-dimensional faces. */
[data-site=cloud] .motion-scene .compute-object{--drift:9px;animation:dao-object-float 8s ease-in-out infinite}
[data-site=cloud] .motion-scene .compute-layer{animation:dao-cloud-layer 6s ease-in-out infinite}
[data-site=cloud] .motion-scene .layer-top{--layer-travel:-10px;animation-delay:-1s}
[data-site=cloud] .motion-scene .layer-middle{--layer-travel:-3px;animation-delay:-2s}
[data-site=cloud] .motion-scene .layer-bottom{--layer-travel:6px;animation-delay:-3s}
[data-site=cloud] .motion-scene .art-orbit{animation:dao-orbit-sway 20s ease-in-out infinite}
[data-site=cloud] .motion-scene .orbit-two{animation-direction:reverse;animation-delay:-8s}
[data-site=cloud] .motion-scene .object-shadow{animation:dao-shadow-breathe 8s ease-in-out infinite}
@keyframes dao-cloud-layer{0%,100%{translate:0 0}50%{translate:0 var(--layer-travel)}}

/* Architecture: four independent levels breathe along the original vertical axis. */
[data-site=infra] .architecture-art.motion-scene svg{overflow:visible}
[data-site=infra] .motion-scene .art-level{animation:dao-architecture-layer 8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
[data-site=infra] .motion-scene .base-level{--layer-travel:5px;animation-delay:-.5s}
[data-site=infra] .motion-scene .compute-level{--layer-travel:-3px;animation-delay:-1s}
[data-site=infra] .motion-scene .environment-level{--layer-travel:-12px;animation-delay:-1.5s}
[data-site=infra] .motion-scene .app-level{--layer-travel:-22px;animation-delay:-2s}
@keyframes dao-architecture-layer{0%,100%{translate:0 0}50%{translate:calc(var(--look-x) * .5) var(--layer-travel)}}

/* Applied AI: a repeating scan, moving data pulses and a floating result. */
[data-site=ai] .motion-scene .document-card{--drift:9px;animation:dao-object-float 7s ease-in-out infinite}
[data-site=ai] .motion-scene .output-card{--drift:7px;animation:dao-object-float 8s -3s ease-in-out infinite}
[data-site=ai] .motion-scene .intelligence-core{--drift:5px;animation:dao-object-float 6s -1s ease-in-out infinite}
[data-site=ai] .motion-scene .core-symbol{display:inline-block;animation:dao-orbit-turn 28s linear infinite}
[data-site=ai] .motion-scene .core-orbit{animation:dao-orbit-sway 13s ease-in-out infinite}
[data-site=ai] .motion-scene .scan-line{animation:dao-document-scan 5s ease-in-out infinite}
[data-site=ai] .motion-scene .orbit-line{animation:dao-orbit-sway 22s ease-in-out infinite}
[data-site=ai] .motion-scene .orbit-two{animation-direction:reverse;animation-delay:-7s}
[data-site=ai] .motion-scene .connection{overflow:hidden}
[data-site=ai] .motion-scene .connection::after{content:"";display:block;width:10px;height:2px;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:dao-data-travel 4s linear infinite}
[data-site=ai] .motion-scene .connection-two::after{animation-delay:-2s}
[data-site=ai] .motion-scene .output-status i{animation:dao-signal-glow 4s ease-in-out infinite}
@keyframes dao-document-scan{0%,8%{top:22%;opacity:0}16%{opacity:1}76%{top:85%;opacity:1}88%,100%{top:85%;opacity:0}}

@media(max-width:800px){.motion-scene{--look-x:0px;--look-y:0px}[data-site=erp] .system-art.motion-scene .system-disc,[data-site=cloud] .motion-scene .compute-object,[data-site=ai] .motion-scene .document-card{--drift:6px}[data-site=infra] .motion-scene .app-level{--layer-travel:-14px}}
@media(prefers-reduced-motion:reduce){.motion-scene:not(.motion-symbol-scene){transform:none!important}.motion-scene,.motion-scene *,.motion-scene *::before,.motion-scene *::after{animation:none!important;translate:none!important;rotate:none!important}.motion-scene .connection::after{display:none}}