/* Animated hero layer for the «Зарубежные сервера» pages. Source: /root/needsys-site/scripts/site/zs-hero.css
   Deployed to /assets/zs-hero.css by add_hero_fx.py. All motion is disabled under prefers-reduced-motion. */
.zs-hero-host{position:relative;overflow:hidden}
.zs-hero-host>.uk-container,.zs-hero-host>.nhp-inner{position:relative;z-index:1}
.zs-fx{--zs:#58e1ff;--zs2:#9ddcff;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.zs-fx[data-theme=hetzner]{--zs:#ff7b8a;--zs2:#ffc2c9}
.zs-fx[data-theme=aws]{--zs:#ffb02e;--zs2:#ffe0a3}
.zs-fx[data-theme=ovh]{--zs:#5aa9ff;--zs2:#bcdcff}
.zs-fx[data-theme=do]{--zs:#3ea0ff;--zs2:#b5dbff}
.zs-fx[data-theme=auction]{--zs:#5be3b0;--zs2:#b9f5de}
.zs-fx svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.zs-fx .g-fill{fill:url(#zsGlobe)}
.zs-fx .g-ring{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.4}
.zs-fx .g-lat{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1}
.zs-fx .g-mer{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.1;transform-box:fill-box;transform-origin:center;animation:zs-mer 14s linear infinite}
.zs-fx .g-mer:nth-of-type(2){animation-delay:-4.6s}.zs-fx .g-mer:nth-of-type(3){animation-delay:-9.3s}
.zs-fx .orbit{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:3 9;transform-box:fill-box;transform-origin:center;animation:zs-spin 60s linear infinite}
.zs-fx .sat{fill:var(--zs);filter:drop-shadow(0 0 6px var(--zs))}
.zs-fx .arc{fill:none;stroke:var(--zs);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:5 11;opacity:.8;animation:zs-flow 1.6s linear infinite}
.zs-fx .arc.b{animation-duration:2.2s;opacity:.6}.zs-fx .arc.c{animation-duration:2.8s;opacity:.5}
.zs-fx .pk{fill:#fff;filter:drop-shadow(0 0 7px var(--zs))}
.zs-fx .node{fill:var(--zs)}
.zs-fx .ring{fill:none;stroke:var(--zs);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:zs-ping 2.6s ease-out infinite}
.zs-fx .ring.r2{animation-delay:-1.3s}
.zs-fx .lbl{font:600 11px/1 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.12em;fill:rgba(255,255,255,.78)}
.zs-fx .rack{animation:zs-float 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.zs-fx .rack.k2{animation-duration:9s;animation-delay:-3s}
.zs-fx .rk{fill:rgba(255,255,255,.09);stroke:rgba(255,255,255,.28);stroke-width:1.2}
.zs-fx .slot{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.14)}
.zs-fx .led{fill:var(--zs);animation:zs-blink 1.8s steps(2,end) infinite}
.zs-fx .led.l2{animation-delay:-.6s;fill:#7dffb2}.zs-fx .led.l3{animation-delay:-1.2s;fill:#fff}
.zs-fx .coin{animation:zs-bob 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.zs-fx .coin.c2{animation-duration:8s;animation-delay:-2s}.zs-fx .coin.c3{animation-duration:7s;animation-delay:-4s}
.zs-fx .coin circle{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.34);stroke-width:1.4}
.zs-fx .coin text{font:700 22px -apple-system,"Segoe UI",Arial,sans-serif;fill:var(--zs2);text-anchor:middle;dominant-baseline:central}
.zs-fx .star{fill:#fff;animation:zs-tw 3.4s ease-in-out infinite}
.zs-fx .star:nth-of-type(3n){animation-delay:-1.1s}.zs-fx .star:nth-of-type(3n+1){animation-delay:-2.2s}
@keyframes zs-mer{0%{transform:scaleX(1)}50%{transform:scaleX(0)}100%{transform:scaleX(-1)}}
@keyframes zs-spin{to{transform:rotate(360deg)}}
@keyframes zs-flow{to{stroke-dashoffset:-32}}
@keyframes zs-ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes zs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes zs-bob{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(6px,-16px) rotate(5deg)}}
@keyframes zs-blink{0%{opacity:1}50%{opacity:.18}}
@keyframes zs-tw{0%,100%{opacity:.15}50%{opacity:.85}}
/* entrance of the hero content (both hero families) */
@keyframes zs-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes zs-slide{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes zs-shine{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes zs-glow{0%,100%{box-shadow:0 10px 26px rgba(0,163,224,.38)}50%{box-shadow:0 12px 40px rgba(0,163,224,.7)}}
@keyframes zs-dot{0%{box-shadow:0 0 0 0 rgba(0,163,224,.55)}100%{box-shadow:0 0 0 10px rgba(0,163,224,0)}}
.zs-hero-host .nhp-left>*,.zs-hero-host .ns-hetz-center>*{animation:zs-rise .7s cubic-bezier(.2,.7,.2,1) backwards}
.zs-hero-host .nhp-left>:nth-child(2),.zs-hero-host .ns-hetz-center>:nth-child(2){animation-delay:.08s}
.zs-hero-host .nhp-left>:nth-child(3),.zs-hero-host .ns-hetz-center>:nth-child(3){animation-delay:.16s}
.zs-hero-host .nhp-left>:nth-child(4),.zs-hero-host .ns-hetz-center>:nth-child(4){animation-delay:.24s}
.zs-hero-host .nhp-left>:nth-child(5),.zs-hero-host .ns-hetz-center>:nth-child(5){animation-delay:.32s}
.zs-hero-host .nhp-left>:nth-child(n+6){animation-delay:.4s}
.zs-hero-host .nhp-feat,.zs-hero-host .ns-hetz-feature{animation:zs-slide .7s cubic-bezier(.2,.7,.2,1) backwards}
.zs-hero-host .nhp-feat:nth-child(1),.zs-hero-host .ns-hetz-feature:nth-child(1){animation-delay:.25s}
.zs-hero-host .nhp-feat:nth-child(2),.zs-hero-host .ns-hetz-feature:nth-child(2){animation-delay:.4s}
.zs-hero-host .nhp-feat:nth-child(3),.zs-hero-host .ns-hetz-feature:nth-child(3){animation-delay:.55s}
.zs-hero-host .nhp-feat:nth-child(4),.zs-hero-host .ns-hetz-feature:nth-child(4){animation-delay:.7s}
.zs-hero-host .nhp-accent{background-size:200% 100%!important;animation:zs-shine 5s linear infinite}
.zs-hero-host .nhp-btn-primary{animation:zs-glow 2.8s ease-in-out infinite}
.zs-hero-host .nhp-kicker::before{animation:zs-dot 1.8s ease-out infinite}
.zs-hero-host .nhp-brand-chip{transition:transform .2s ease,background .2s ease}
.zs-hero-host .nhp-brand-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.18)}
.zs-hero-host .ns-hetz-logo{animation:zs-bob 6s ease-in-out infinite}
/* live stat cards (auction hero) */
.zs-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zs-stat{padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:zs-slide .7s cubic-bezier(.2,.7,.2,1) backwards}
.zs-stat:nth-child(2){animation-delay:.15s}.zs-stat:nth-child(3){animation-delay:.3s}
.zs-stat b{display:block;font-size:30px;line-height:1.1;font-weight:700;color:#fff;letter-spacing:-.01em}
.zs-stat span{display:block;margin-top:4px;font-size:13px;color:rgba(255,255,255,.72)}
.zs-stat.wide{grid-column:1/-1}
.zs-live{display:inline-flex;align-items:center;gap:8px}
.zs-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#5be3b0;animation:zs-dot-g 1.6s ease-out infinite}
@keyframes zs-dot-g{0%{box-shadow:0 0 0 0 rgba(91,227,176,.6)}100%{box-shadow:0 0 0 10px rgba(91,227,176,0)}}
@media (max-width:900px){.zs-fx{opacity:.6}.zs-fx svg{height:380px;bottom:auto}.zs-fx .rack,.zs-fx .coin.c3,.zs-fx .lbl{display:none}}
@media (max-width:640px){.zs-fx{opacity:.5}.zs-fx .coin{display:none}.zs-stats{grid-template-columns:1fr 1fr}.zs-stat b{font-size:24px}}
@media (prefers-reduced-motion:reduce){
  .zs-fx *,.zs-hero-host *,.zs-stat,.zs-live::before{animation:none!important;transition:none!important}
  .zs-fx .pk{display:none}
}

/* frosted glass for the feature cards so the scene behind them does not fight with the text */
.zs-hero-host .nhp-feat{background:rgba(30,50,105,.34)!important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.zs-hero-host .ns-hetz-features{position:relative}

/* short Hetzner hero: calmer scene, the feature list gets its own glass panel */
.zs-fx[data-fam=hetz] .lbl{display:none}
.zs-fx[data-fam=hetz] .arc,.zs-fx[data-fam=hetz] .pk{opacity:.4}
.zs-hero-host .ns-hetz-features{background:rgba(30,50,105,.38);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 20px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@media (max-width:959px){.zs-hero-host .ns-hetz-features{margin-top:14px}}
.zs-fx[data-fam=hetz] svg{transform:scale(1.45);transform-origin:100% 50%}
@media (min-width:960px){.zs-hero-host .ns-hetz-features{margin-right:22px}}
.zs-stat b.zs-live{display:flex;align-items:center;gap:10px}