/********************************************
 * Hero Animation - Gradient Mesh
 * Simple, visible, performant CSS animation
 ********************************************/

/* Animation Container */
.hero-animation-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Animated Gradient Orbs - More Visible */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.7;
  animation: float 8s infinite ease-in-out;
  mix-blend-mode: screen;
}

.orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #8B5CF6 0%, #6366F1 50%, transparent 70%);
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}

.orb-2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, #3B82F6 0%, #2563EB 50%, transparent 70%);
  bottom: -80px;
  right: -80px;
  animation-delay: -2.7s;
}

.orb-3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #EC4899 0%, #8B5CF6 50%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -5.3s;
}

/* Glass Overlay */
.glass-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  pointer-events: none;
}

/* Keyframes */
@keyframes float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(20px, -30px) scale(1.05);
  }

  50% {
    transform: translate(-15px, 15px) scale(0.95);
  }

  75% {
    transform: translate(10px, -20px) scale(1.02);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-animation-container {
    min-height: 300px;
  }

  .orb {
    filter: blur(40px);
  }

  .orb-1 {
    width: 300px;
    height: 300px;
  }

  .orb-2 {
    width: 250px;
    height: 250px;
  }

  .orb-3 {
    width: 200px;
    height: 200px;
  }
}