/*==========================================================================
  Wave animation
  ========================================================================== */

.waves
  width: 350px
  height: 150px

  .wave
    width: 100%
    height: 50px
    position: relative

    .wave-line
      width: 100%

      path
        stroke-dasharray: 370px

        +animation-name(mainWaves)
        animation-timing-function: linear
        +animation-duration(9s)
        +animation-iteration-count(infinite)

    &:nth-child(1)
      .wave-line
        path
          animation-delay: 0s

    &:nth-child(2)
      top: -10px
      .wave-line
        path
          animation-delay: -3s

    &:nth-child(3)
      top: -20px
      .wave-line
        path
          animation-delay: -6s

@keyframes mainWaves
  0%
    stroke-dashoffset: 0
  100%
    stroke-dashoffset: 740px