@use "../mixins/bem" as *;
@use "../mixins/function" as *;

@include b(waves) {
  margin-top: -11vh;
  position: relative;
  width: 100%;
  height: 12vh;
  min-height: 3.125rem;
  max-height: 9.375rem;
  z-index: 10;

  .parallax {
    .use {
      animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;

      &:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
        fill: getCssVar("lower-color-6");

        :is(.dark .dark\:fill-black) {
          fill: #000 !important;
        }
      }

      &:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
        fill: getCssVar("lower-color-5");

        :is(.dark .dark\:fill-black) {
          fill: #000;
        }
      }

      &:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
        fill: getCssVar("lower-color-4");
      }

      &:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
        fill: getCssVar("lower-color-3");
      }
    }
  }
}

/* 波浪动画 */
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}