/* TERAL Waves - Decorative wave animations */

/* Bottom waves */
.tw-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 5;
  pointer-events: none;
}
.tw-waves::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -80px;
  height: 80px;
  background: var(--color-primary-subtle, #e6f6fc);
}
.tw-waves svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tw-waves use {
  animation: tw-wave-anim 5s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  fill: #5dccf5;
  opacity: 0.5;
}
.tw-waves-back {
  z-index: 5;
}
.tw-waves-back use:nth-child(2) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.tw-waves-back use:nth-child(3) {
  animation-delay: -5s;
  animation-duration: 20s;
}
.tw-waves-front {
  z-index: -6;
}
.tw-waves-front use:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.tw-waves-front use:nth-child(3) {
  animation-delay: -3s;
  animation-duration: 10s;
}

@keyframes tw-wave-anim {
  0% {
    transform: translate(-90px);
  }
  100% {
    transform: translate(85px);
  }
}

/* Left-side vertical waves */
.tw-waves-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.tw-waves-left svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
  transform-origin: right center;
}
.tw-waves-left use {
  animation: tw-wave-anim 5s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  /* fill: rgba(2, 162, 228, 0.8); */
  fill: #5dccf5;
  opacity: 0.6;
}
.tw-waves-left-back {
  z-index: 5;
}
.tw-waves-left-back use:nth-child(2) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.tw-waves-left-back use:nth-child(3) {
  animation-delay: -5s;
  animation-duration: 20s;
}
.tw-waves-left-front {
  z-index: 6;
}
.tw-waves-left-front use:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.tw-waves-left-front use:nth-child(3) {
  animation-delay: -3s;
  animation-duration: 10s;
}