/* Animated footer waves that follow theme variables */
.footer-waves {
  position: relative;
  width: 100%;
  height: 120px;
  margin-top: 40px;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.03) 100%);
}

.footer-waves .waves {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* Use theme variables for colors to auto-sync on theme change */
.footer-waves .wave1 { fill: color-mix(in oklab, var(--primary-color) 35%, transparent); animation: moveWaves 22s cubic-bezier(.36,.45,.63,.53) infinite; }
.footer-waves .wave2 { fill: color-mix(in oklab, var(--primary-color) 55%, var(--primary-dark) 45%); opacity: .8; animation: moveWaves 18s cubic-bezier(.36,.45,.63,.53) -3s infinite; }
.footer-waves .wave3 { fill: color-mix(in oklab, var(--primary-dark) 60%, var(--secondary-color) 40%); opacity: .7; animation: moveWaves 14s cubic-bezier(.36,.45,.63,.53) -6s infinite; }
.footer-waves .wave4 { fill: var(--secondary-color); opacity: .9; animation: moveWaves 10s cubic-bezier(.36,.45,.63,.53) -9s infinite; }

@keyframes moveWaves {
  0% { transform: translate3d(-90px,0,0); }
  50% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-90px,0,0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .footer-waves .wave1,
  .footer-waves .wave2,
  .footer-waves .wave3,
  .footer-waves .wave4 { animation: none; }
}

/* Tweak for dark theme, leveraging existing .dark-theme body class */
.dark-theme .footer-waves {
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.05) 100%);
}