/* Living cloud: floating hardware, orbiting packets, and a soft scan. */
.hero-art{isolation:isolate;perspective:1100px;--cloud-x:0px;--cloud-y:0px;--cloud-tilt:0deg}
.hero-art:before{content:'';position:absolute;inset:14% 2% 9%;border-radius:50%;background:radial-gradient(ellipse,#ff5e1f16,transparent 65%);filter:blur(12px);animation:cloud-glow 7s ease-in-out infinite;pointer-events:none;z-index:-1}
.server-stack{translate:var(--cloud-x) var(--cloud-y);rotate:y var(--cloud-tilt);transition:translate .7s cubic-bezier(.22,1,.36,1),rotate .7s cubic-bezier(.22,1,.36,1);will-change:translate}
.server{animation:cloud-float 7s ease-in-out infinite;transition:box-shadow .6s,border-color .6s;background:linear-gradient(135deg,#fffaf7,#ffe8d9 60%,#fff8f3);border-color:#e9b494}
.s1{animation-delay:0s}.s2{animation-delay:-1.2s}.s3{animation-delay:-2.4s}
.server:after{content:'';position:absolute;inset:11px 16px 48px;border-radius:4px;pointer-events:none;background:linear-gradient(100deg,transparent 20%,#ff5e1f55 48%,#fff9 52%,transparent 75%);background-size:260% 100%;animation:cloud-scan 6s ease-in-out infinite;mix-blend-mode:multiply}
.s2:after{animation-delay:1s}.s3:after{animation-delay:2s}
.server i{animation:cloud-led 4s ease-in-out infinite;box-shadow:0 0 0 4px #ff5e1f10,0 0 15px #ff5e1f55}.s2 i{animation-delay:1s}.s3 i{animation-delay:2s}
.hero-art:hover .server{border-color:#ff5e1f88;box-shadow:0 17px 0 #f0ccb5,0 18px 0 #d89970,0 34px 42px #ff5e1f20}
.orbit{pointer-events:none;border-color:#ff5e1f26}
.orbit:before{content:'';position:absolute;inset:-1px;border:1px solid transparent;border-top-color:#ff5e1f75;border-radius:50%;animation:cloud-orbit 16s linear infinite}
/* Keep the entire light dot inside its paint box, with room for its glow. */
.orbit:after{content:'';position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle at 50% 12px,#fff 0 2px,#ff5e1f 3px,transparent 6px);filter:drop-shadow(0 0 5px #ff5e1f);animation:cloud-orbit 16s linear infinite}
.orbit-two:before,.orbit-two:after{animation-duration:24s;animation-direction:reverse}.orbit-two:after{animation-delay:-8s}
.floating-tag{animation:cloud-tag 8s ease-in-out infinite;border-color:#ff5e1f35;box-shadow:0 12px 35px #be6c2610}
.art-plus{opacity:.7;animation:cloud-cross 18s linear infinite}
@keyframes cloud-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes cloud-tag{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes cloud-orbit{to{transform:rotate(360deg)}}
@keyframes cloud-scan{0%,25%{background-position:160% 0;opacity:0}35%{opacity:.8}75%{opacity:.5}85%,100%{background-position:-60% 0;opacity:0}}
@keyframes cloud-led{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes cloud-glow{0%,100%{opacity:.5;scale:.95}50%{opacity:1;scale:1.05}}
@keyframes cloud-cross{to{rotate:180deg}}
.hero-art[data-motion=paused],.hero-art[data-motion=paused] *, .hero-art[data-motion=paused]:before,.hero-art[data-motion=paused] *:before,.hero-art[data-motion=paused] *:after{animation-play-state:paused!important}
@media(max-width:700px){.server-stack{translate:0 0;rotate:none}.hero-art:before{filter:none}}
@media(prefers-reduced-motion:reduce){.hero-art,.hero-art *,.hero-art:before,.hero-art *:before,.hero-art *:after{animation:none!important;transition:none!important}.server-stack{translate:0 0!important;rotate:none!important;will-change:auto}.server:after{display:none}}