/* Container */
.page {
  position: absolute;
  overflow: hidden;
}


/* Water & Waves */
.water {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0.75;
  z-index: 2000;
  bottom: 0;
  left: 0;
  background: #32bafa;
  transform: translate(0, 100%);
  transition: transform 0.5s ease; /* เพิ่มเพื่อให้การเคลื่อนที่ของระดับน้ำดูนุ่มนวล */
}

.water__inner {
  position: absolute;
  width: 100%;
  height: 50%;
  overflow: hidden;
}

.water__wave {
  width: 200%;
  position: absolute;
  bottom: 100%;
}

.water__wave_back {
  right: 0;
  fill: #2c7fbe;
  animation: wave-back 2.7s infinite linear;
}

.water__wave_front {
  left: 0;
  fill: #32bafa;
  margin-bottom: -1px;
  animation: wave-front 2.1s infinite linear;
}

/* Wave Movement Animations */
@keyframes wave-front {
  100% {
    transform: translate(-50%, 0);
  }
}

@keyframes wave-back {
  100% {
    transform: translate(50%, 0);
  }
}