/* ==========================================================================
   CLOUD COMPUTERS - Keyframe Animations & Glow Effects
   Optimized for GPU acceleration (transform & opacity only)
   ========================================================================== */

/* Hero Graphic Floating Animation */
@keyframes floatGentle {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(0.6deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.floating-idle {
  animation: floatGentle 6s ease-in-out infinite;
  will-change: transform;
}

/* Base Pedestal Rings Rotation */
@keyframes spinSlow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spin-slow {
  transform-origin: center;
  animation: spinSlow 30s linear infinite;
}

.spin-slow-reverse {
  transform-origin: center;
  animation: spinSlow 45s linear infinite reverse;
}

/* Neon Breathing Glow */
@keyframes neonPulse {
  0%, 100% {
    filter: drop-shadow(0 0 25px rgba(0, 180, 255, 0.45)) drop-shadow(0 0 45px rgba(0, 100, 255, 0.2));
    opacity: 0.95;
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(0, 220, 255, 0.75)) drop-shadow(0 0 70px rgba(0, 140, 255, 0.4));
    opacity: 1;
  }
}

.pulse-glow {
  animation: neonPulse 4s ease-in-out infinite;
}

/* Node Ping Ring Indicator */
@keyframes pingRing {
  0% {
    transform: scale(0.85);
    opacity: 0.9;
  }
  75%, 100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.ping-indicator {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
}

.ping-indicator .ping-dot {
  width: 8px;
  height: 8px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent-cyan);
}

.ping-indicator .ping-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--accent-cyan);
  animation: pingRing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Constellation Dots Blink */
@keyframes constellationBlink {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.constellation-node {
  animation: constellationBlink 3s ease-in-out infinite;
}

.constellation-node:nth-child(2n) {
  animation-delay: 0.7s;
  animation-duration: 2.5s;
}

.constellation-node:nth-child(3n) {
  animation-delay: 1.4s;
  animation-duration: 3.8s;
}

/* Network Path Glow Animation */
@keyframes pathGlowDash {
  to {
    stroke-dashoffset: -40;
  }
}

.path-pulse-flow {
  stroke-dasharray: 6, 12;
  animation: pathGlowDash 1.4s linear infinite;
}

/* Shimmer scanline effect on server blade */
@keyframes scanlineServer {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

.server-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(0, 229, 255, 0.2), transparent);
  pointer-events: none;
  animation: scanlineServer 3s ease-in-out infinite;
}

/* Smooth reveal initial classes for GSAP */
.reveal-init {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}