/* ================================================================
   ANIMATED SVG ICONS - Pure CSS Animations
   ================================================================ */
.icon-container {
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
  position: relative;
}

.icon-container svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* === CLOUD VPS ICON === */
.vps-base { animation: vpsBaseGlow 3s ease-in-out infinite; }
@keyframes vpsBaseGlow {
  0%,100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.vps-chip { animation: vpsChipFloat 4s ease-in-out infinite; }
@keyframes vpsChipFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.vps-bolt-l, .vps-bolt-r { animation: boltFlash 2.5s ease-in-out infinite; }
.vps-bolt-r { animation-delay: 0.8s; }
@keyframes boltFlash {
  0%,20%,100% { opacity: 0.3; }
  10% { opacity: 1; }
}

.vps-holo { animation: holoFloat 5s ease-in-out infinite; }
@keyframes holoFloat {
  0%,100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-5px); opacity: 0.85; }
}

.vps-particle { animation: particleUp 3s ease-in-out infinite; }
.vps-particle:nth-child(2) { animation-delay: 0.5s; }
.vps-particle:nth-child(3) { animation-delay: 1s; }
.vps-particle:nth-child(4) { animation-delay: 1.5s; }
@keyframes particleUp {
  0% { opacity: 0; transform: translateY(10px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* === PROXY ICON === */
.proxy-globe {
  animation: proxyGlobeSpin 10s linear infinite;
  transform-origin: center center;
}
@keyframes proxyGlobeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.proxy-node { animation: nodeGlow 2s ease-in-out infinite; }
.proxy-node:nth-child(2) { animation-delay: 0.3s; }
.proxy-node:nth-child(3) { animation-delay: 0.6s; }
.proxy-node:nth-child(4) { animation-delay: 0.9s; }
@keyframes nodeGlow {
  0%,100% { r: 3; opacity: 0.6; }
  50% { r: 5; opacity: 1; }
}

.proxy-ring { animation: ringPulse 3s ease-in-out infinite; }
.proxy-ring:nth-child(2) { animation-delay: 1s; }
@keyframes ringPulse {
  0%,100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.05); }
}

.proxy-connector {
  animation: connectorFlow 2s linear infinite;
  stroke-dasharray: 8 4;
}
@keyframes connectorFlow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -24; }
}

.proxy-float { animation: proxyFloat 4s ease-in-out infinite; }
@keyframes proxyFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* === S3 STORAGE ICON === */
.s3-stack { animation: s3Float 4.5s ease-in-out infinite; }
@keyframes s3Float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.s3-layer-purple { animation: layerPulse1 3s ease-in-out infinite; }
.s3-layer-cyan { animation: layerPulse2 3s ease-in-out infinite 0.5s; }
.s3-layer-green { animation: layerPulse3 3s ease-in-out infinite 1s; }
@keyframes layerPulse1 { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes layerPulse2 { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } }
@keyframes layerPulse3 { 0%,100% { opacity: 0.75; } 50% { opacity: 1; } }

.s3-cube { animation: cubeFloat 3s ease-in-out infinite; }
.s3-cube:nth-child(2) { animation-delay: 0.6s; }
.s3-cube:nth-child(3) { animation-delay: 1.2s; }
.s3-cube:nth-child(4) { animation-delay: 1.8s; }
@keyframes cubeFloat {
  0%,100% { transform: translateY(0) scale(1); opacity: 0.7; }
  50% { transform: translateY(-8px) scale(1.1); opacity: 1; }
}

.s3-glow { animation: s3GlowPulse 3s ease-in-out infinite; }
@keyframes s3GlowPulse {
  0%,100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* === SERVER ICON === */
.server-body { animation: serverFloat 5s ease-in-out infinite; }
@keyframes serverFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.server-led { animation: ledBlink 1.2s ease-in-out infinite; }
.server-led:nth-child(2) { animation-delay: 0.2s; }
.server-led:nth-child(3) { animation-delay: 0.4s; }
.server-led:nth-child(4) { animation-delay: 0.6s; }
@keyframes ledBlink {
  0%,40%,100% { opacity: 0.4; }
  20% { opacity: 1; }
}

.server-bolt { animation: srvBolt 2s ease-in-out infinite; }
.server-bolt:nth-child(2) { animation-delay: 0.6s; }
@keyframes srvBolt {
  0%,25%,100% { opacity: 0.2; }
  12% { opacity: 1; }
}

.server-wave { animation: serverWave 4s ease-in-out infinite; }
.server-wave:nth-child(2) { animation-delay: 1.3s; }
@keyframes serverWave {
  0% { opacity: 0.6; r: 20; }
  100% { opacity: 0; r: 50; }
}

.server-platform-glow { animation: platformGlow 3s ease-in-out infinite; }
@keyframes platformGlow {
  0%,100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}