.ocean {
  position: relative;
  width: 100%;
  height: 400px;
  background: linear-gradient(
    180deg,
    #4a4a4a 0%,    
    #2e3b4e 50%,   
    #1e2a38 100%  
  );
  overflow: hidden;
}

.rain-container {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 2;
}

.raindrop {
  position: absolute;
  width: 2px;
  height: 12px;
  background: rgba(173, 216, 230, 0.6);
  border-radius: 20%;
  opacity: 0;
  animation: fall linear forwards;
}

.splash-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(173, 216, 230, 0.8);
  border-radius: 50%;
  opacity: 1;
  animation: splashParticles 0.4s ease-out forwards;
}

@keyframes fall {
  0% { transform: translateY(-10px); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 1; } 
  100% { transform: translateY(calc(100vh - 25px)); opacity: 0; } /* Stop before bottom */
}

@keyframes splashParticles {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(0.5); opacity: 0; }
}