Animated Wave Background

.wave-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: linear-gradient(180deg, #0d1126 0%, #1a1a2e 100%);
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,50 Q300,0 600,50 T1200,50 L1200,120 L0,120 Z' fill='%233a7bff' fill-opacity='0.3'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 50% 100%;
  animation: wave-move 15s linear infinite;
}

.wave:nth-child(2) {
  opacity: 0.5;
  animation: wave-move 20s linear infinite reverse;
  background-size: 45% 100%;
}

.wave:nth-child(3) {
  opacity: 0.3;
  animation: wave-move 25s linear infinite;
  background-size: 55% 100%;
}

@keyframes wave-move {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pure CSS wave alternative */
.css-wave {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 150px;
  background: 
    radial-gradient(ellipse 800px 150px at 50% 150px, #3a7bff, transparent);
  border-radius: 50%;
  animation: wave-move 10s ease-in-out infinite;
}