.cover-bg {
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.cover-bg__waves-container,
.cover-bg__top-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 768px;
}
.cover-bg__waves-container,
.cover-bg__noise {
  top: -60px;
}
.cover-bg__top-container {
  top: -30px;
}
.cover-bg__outer-container {
  height: 100%;
  position: relative;
  width: 100%;
}
.cover-bg__waves-container {
  height: 100%;
}
.cover-bg__outer-waves {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}
.cover-bg__outer-waves svg {
  height: 100%;
  width: 100%;
  position: absolute;
}
.cover-bg__inner-waves {
  height: 100%;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.cover-bg__inner-waves svg {
  height: 100%;
  width: 100%;
}
.cover-bg__color {
  background: #001f6d;
  background-position: center 30%;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  mask-position: center bottom;
  mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
}
.cover-bg__gradient-1 {
  background: radial-gradient(circle, rgba(161,60,185,1) 0%, rgba(97,23,178,1) 100%);
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}
.cover-bg__light-1 {
  background: radial-gradient(circle, rgba(243,137,195,1) 0%, rgba(243,137,195,0.8) 20%, rgba(209,82,191,0.7) 40%, rgba(174,57,187,0.6) 52%, rgba(150,48,184,0.4) 60%, rgba(65,36,141,0) 70%);
  height: 900px;
  left: 50%;
  mix-blend-mode: lighten;
  position: absolute;
  top: 70%;
  transform: translate(-50%,-50%);
  width: 900px;
}
.cover-bg__light-2 {
  background: radial-gradient(circle, rgba(203,53,203,0.8) 0%, rgba(203,53,203,0) 70%);
  height: 800px;
  left: 50%;
  mix-blend-mode: lighten;
  position: absolute;
  top: 90%;
  transform: translate(-50%,-50%);
  width: 800px;
}
.cover-bg__top-container {
  background: #41248d;
  height: 420px;
  mask-position: center bottom;
  mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
}
.cover-bg__top-wave-blue,
.cover-bg__top-wave-dark-purple,
.cover-bg__top-wave-pink,
.cover-bg__top-wave-light-purple {
  height: 100%;
  position: absolute;
  width: 100%;
}
.cover-bg__top-container svg {
  bottom: 0px;
  height: auto;
  position: absolute;
  width: 100%;
}
.cover-bg__bottom-wave-blue,
.cover-bg__bottom-wave-purple,
.cover-bg__bottom-wave-pink {
  height: 100%;
  position: absolute;
  width: 100%;
}
.cover-bg__noise {
  opacity: 0.3;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0.4) 97%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0.4) 97%, rgba(0,0,0,0) 100%);
}

.wave-animation-1 {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}
.wave-animation-2 {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}
.wave-animation-3 {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}
.wave-animation-4 {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}

@media (min-width: 768px) {
  .cover-bg__waves-container,
  .cover-bg__noise {
    top: -70px;
  }
  .cover-bg__top-container {
    top: 0;
  }
  .cover-bg__waves-container,
  .cover-bg__top-container {
    width: 1024px;
  }
  .cover-bg__top-container {
    height: 605px;
  }
  .cover-bg__light-1 {
    height: 1200px;
    top: 65%;
    width: 1200px;
  }
}

@media (min-width: 1024px) {
  .cover-bg__waves-container,
  .cover-bg__noise {
    top: -120px;
  }
  .cover-bg__waves-container,
  .cover-bg__top-container {
    width: 1360px;
  }
  .cover-bg__top-container {
    height: 515px;
  }
  .cover-bg__light-1 {
    height: 1600px;
    top: 60%;
    width: 1600px;
  }
  .wave-animation-1 {
    animation: blueLightWave 12s linear infinite alternate-reverse;
  }
  .wave-animation-2 {
    animation: darkWave 10s linear infinite alternate-reverse;
  }
  .wave-animation-3 {
    animation: pinkWave 14s linear infinite alternate-reverse;
  }
  .wave-animation-4 {
    animation: lightWave 10s linear infinite alternate-reverse;
  }

  .pause-animation-waves {
    animation-play-state: paused;
  }
}

@media (min-width: 1360px) {
  .cover-bg__waves-container,
  .cover-bg__noise {
    top: -90px;
  }
  .cover-bg__waves-container,
  .cover-bg__top-container {
    width: 1920px;
  }
  .cover-bg__top-container {
    height: 660px;
  }
   .cover-bg__light-1 {
    height: 120vw;
    top: 60%;
    width: 120vw;
  }
  .cover-bg__light-2 {
    height: 1200px;
    top: 85%;
    width: 1200px;
  }
}

@media (min-width: 1500px) {
  .cover-bg__light-1 {
    height: 100vw;
    top: 55%;
    transform: translate(-50%,-50%) scale(1.2,0.9);
    width: 100vw;
  }
  .cover-bg__light-2 {
    top: 80%;
  }
}


@media (min-width: 1920px) {
  .cover-bg__waves-container,
  .cover-bg__noise {
    top: -200px;
  }
  .cover-bg__waves-container,
  .cover-bg__top-container {
    width: 100%;
  }
  .cover-bg__top-container {
    height: 700px;
  }
}

@keyframes blueLightWave {
  0% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  25% { transform: scaleX(1.1) skewX(2deg) skewY(2deg); }
  50% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  75% { transform: scaleX(1.1) skewX(-2deg) skewY(-2deg); }
  100% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
}

@keyframes darkWave {
  0% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  25% { transform: scaleX(1.1) skewX(-2deg) skewY(-1deg); }
  50% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  75% { transform: scaleX(1.1) skewX(2deg) skewY(1deg); }
  100% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
}

@keyframes pinkWave {
  0% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  25% { transform: scaleX(1.1) skewX(2deg) skewY(1deg); }
  50% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  75% { transform: scaleX(1.1) skewX(-2deg) skewY(-1deg); }
  100% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
}

@keyframes lightWave {
  0% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  25% { transform: scaleX(1.1) skewX(-2deg) skewY(-2deg); }
  50% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  75% { transform: scaleX(1.1) skewX(2deg) skewY(2deg); }
  100% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
}