/* Ripple container */
.ripple-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Behind all content */
  overflow: hidden; /* No scrollbars */
  pointer-events: none; /* Non-interactive */
  background: radial-gradient(circle at 50% 50%, rgba(52, 152, 219, 0.4), rgba(155, 89, 182, 0.2) 70%);
  background-size: 250%; /* Slightly larger for smoother movement */
  animation: ripple-animation 20s linear infinite;
}

@keyframes ripple-animation {
  0% {
    background-position: 50% 50%;
    background-size: 100%;
  }
  50% {
    background-position: 75% 75%;
    background-size: 130%;
  }
  100% {
    background-position: 50% 50%;
    background-size: 100%;
  }
}

/* Water effect */
.water-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.15));
  opacity: 0.25; /* Increased visibility */
  animation: water-movement 15s ease-in-out infinite;
}

@keyframes water-movement {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(60px) translateY(40px); /* More noticeable movement */
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}