@keyframes led-blink-network{0%,20%,40%,60%,80%,to{opacity:1;filter:brightness(1.2)}10%,30%,50%,70%,90%{opacity:.3;filter:brightness(.8)}15%,45%,85%{opacity:.8}25%,75%{opacity:.1}}@keyframes led-blink-status{0%,to{opacity:1;filter:brightness(1.2)}50%{opacity:.4;filter:brightness(.8)}}@keyframes bar-shimmer{0%{transform:translate(-100%) skew(-20deg)}to{transform:translate(300%) skew(-20deg)}}@keyframes power-surge{0%{background:#fff;box-shadow:0 0 40px #0ea5e9e6,inset 0 0 20px #fff}20%{background:#e0f2fe;box-shadow:0 0 20px #0ea5e999,inset 0 0 10px #fffc}to{background:linear-gradient(180deg,#f8fafc,#e2e8f0);box-shadow:0 2px 8px #0000000f}}.server-rack{position:relative;background:linear-gradient(160deg,#1e293b,#334155 40%,#334155 60%,#1e293b);border:1px solid rgba(148,163,184,.25);border-radius:16px;padding:20px 16px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease;box-shadow:0 8px 32px #00000040,inset 0 1px #ffffff0f,inset 0 -1px #0003,0 0 0 1px #64748b1f;overflow:hidden}.server-rack:before{content:"";position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,#0ea5e9,#3b82f6,transparent 70%);opacity:.15;filter:blur(60px);pointer-events:none;z-index:0}.server-rack:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);border-radius:16px;pointer-events:none;z-index:1}.server-rack.is-active{opacity:1;transform:translateY(0)}.server-unit{position:relative;display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#f8fafc,#e2e8f0);border:1px solid rgba(203,213,225,.5);border-radius:10px;padding:14px 16px;opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease,box-shadow .3s ease,background .15s ease;box-shadow:0 2px 8px #0000000f,inset 0 1px #fffc,inset 0 -1px #0000000a;z-index:2}.server-unit:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000001a,inset 0 1px #fffc,inset 0 -1px #0000000a}.server-unit.is-installed{opacity:1;transform:translateY(0);border-left:3px solid #0ea5e9}.server-unit.power-flash{animation:power-surge .6s cubic-bezier(.1,.9,.2,1) forwards}.server-leds{display:flex;gap:6px;flex-shrink:0}.server-led{display:inline-block;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.3),transparent 60%),#94a3b8;transition:background .4s ease,box-shadow .4s ease}.server-led.on-green{background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.8),transparent 55%),radial-gradient(circle,#4ade80,#22c55e 60%,#16a34a);box-shadow:0 0 8px #22c55e99,0 0 16px #22c55e66,inset 0 -1px 2px #00000026;animation:led-blink-status 2.5s ease-in-out infinite}.server-led.on-sky{background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.8),transparent 55%),radial-gradient(circle,#38bdf8,#0ea5e9 60%,#0284c7);box-shadow:0 0 8px #0ea5e999,0 0 16px #0ea5e966,inset 0 -1px 2px #00000026;animation:led-blink-network 1.1s cubic-bezier(.4,0,.2,1) infinite}.server-label{font-family:Courier New,monospace;font-size:.7rem;font-weight:700;color:#64748b;letter-spacing:.05em;flex-shrink:0;min-width:48px}.server-bar-track{flex:1;height:8px;background:#e2e8f0;border-radius:100px;overflow:hidden}.server-bar{position:relative;height:100%;width:0%;background:linear-gradient(90deg,#0ea5e9,#22c55e);border-radius:100px;transition:width 1.6s cubic-bezier(.22,1,.36,1);overflow:hidden}.server-bar:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:25%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),rgba(255,255,255,1),rgba(255,255,255,.8),transparent);transform:translate(-100%) skew(-20deg);pointer-events:none;opacity:0;filter:blur(1px)}.server-bar.shimmer:after{opacity:1;animation:bar-shimmer 2s cubic-bezier(.4,0,.2,1) infinite}.server-bar.high{background:linear-gradient(90deg,#f59e0b,#ef4444)}.server-bar-pct{font-family:Courier New,monospace;font-size:.7rem;font-weight:700;color:#0ea5e9;min-width:32px;text-align:right;flex-shrink:0}.server-stats{display:flex;justify-content:space-around;gap:12px;margin-top:16px;padding:16px 8px;background:#ffffff14;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 16px #0000001f,inset 0 1px #ffffff0f;z-index:2}.server-stat{text-align:center;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}.server-stat.is-visible{opacity:1;transform:translateY(0)}.server-stat-value{font-family:Courier New,monospace;font-size:1.25rem;font-weight:800;color:#f1f5f9;text-shadow:0 0 8px rgba(14,165,233,.25)}.stat-accent{color:#0ea5e9;text-shadow:0 0 12px rgba(14,165,233,.4)}.server-stat-label{font-size:.75rem;color:#94a3b8;margin-top:2px;text-transform:uppercase;letter-spacing:.05em}.server-matrix-tagline{text-align:center;margin-top:20px;font-size:1.125rem;color:#0ea5e9;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease;text-shadow:0 0 10px rgba(14,165,233,.2)}.server-matrix-tagline.is-visible{opacity:1;transform:translateY(0)}@media(max-width:480px){.server-unit{gap:8px;padding:10px 12px}.server-label{display:none}.server-stat-value{font-size:1rem}.server-stats{flex-direction:column;gap:8px}.server-rack:before{width:120px;height:120px}}@media(prefers-reduced-motion:reduce){.server-rack,.server-unit,.server-stat,.server-matrix-tagline{transition:none;opacity:1;transform:none}.server-bar{transition:none}.server-led.on-sky{animation:none}.server-bar.shimmer:after{animation:none}.server-unit.power-flash{transition:none}}
