/* Subtle Background Animations */
/* Add this after wmw-site.css */

/* Hero animated background */
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 50%);
  animation: heroFloat 20s ease-in-out infinite;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(0,0,0,0.1) 0%, transparent 50%);
  animation: heroFloat 25s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes heroFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(10%, 10%) rotate(5deg); }
  66% { transform: translate(-10%, 5%) rotate(-5deg); }
}

/* Feature section glow */
.features::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: featureGlow 10s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes featureGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

/* Section alt animated gradients */
.section-alt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(192, 132, 252, 0.03) 0%, transparent 50%);
  animation: sectionPulse 15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sectionPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

/* Problem grid subtle shift */
.grid-3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.02) 10px,
    rgba(255, 255, 255, 0.02) 11px
  );
  animation: problemShift 20s linear infinite;
  pointer-events: none;
}

@keyframes problemShift {
  from { transform: translateX(0); }
  to { transform: translateX(20px); }
}

/* Pricing cards ambient glow */
.pricing-grid::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: pricingBreath 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes pricingBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.6; }
}

/* CTA section wave */
.section:has(.btn-lg)::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: ctaWave 8s ease-in-out infinite;
}

@keyframes ctaWave {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

/* Additional positioning for animated elements */
.section {
  overflow: hidden;
}

.pricing-grid {
  position: relative;
}

.section:has(.btn-lg) {
  position: relative;
}