.cover-bg-triki-trakes {
  height: 95%;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.cover-bg-triki-trakes__outer-container {
  height: 100%;
  position: relative;
  width: 100%;
}
.cover-bg-triki-trakes__waves-container {
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 768px;
}
.cover-bg-triki-trakes__wave-noise {
  opacity: 0.2;
}
.cover-bg-triki-trakes__container-mask {
  background:  radial-gradient(circle, rgb(169 37 175) 0%, rgba(83,14,124,1) 50%, rgba(78,13,117,1) 100%);
  height: 100%;
  mask-position: bottom center;
  mask-repeat: no-repeat;
  mask-size: cover;
  position: relative;
  top: 0px;
  width: 100%;
  -webkit-mask-position: bottom center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
}
.cover-bg-triki-trakes__top-green {
  background: linear-gradient(0deg, rgb(12 125 0) 0%, rgba(3,82,41,1) 55%, rgba(3,53,27,1) 100%);
  height: 390px;
  mask-position: bottom center;
  mask-repeat: no-repeat;
  mask-size: cover;
  position: absolute;
  top: 0px;
  width: 100%;
  -webkit-mask-position: bottom center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
}
.triki-trakes-top-wave {
  bottom: 0px;
  height: auto;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 100%;
}
.cover-bg-triki-trakes__shape-container {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.cover-bg-triki-trakes__shape-container svg {
  object-fit: cover;
  opacity: 0.1;
  filter: brightness(0.1);
  height: 2500px;
  left: 0px;
  position: absolute;
  top: 0px;
  transform: scale(1.6);
}
.cover-bg-triki-trakes__shape-gradient {
  background: linear-gradient(0deg, rgba(4,109,52,0) 0%, rgba(3,82,41,0) 70%, rgba(3,53,27,0.8) 100%);
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}
.cover-bg-triki-trakes__light1 {
  background: radial-gradient(rgb(15 230 65 / 55%) 0%, rgba(70,199,247,0) 70%, rgba(17,160,242,0) 100%);
  bottom: -130px;
  height: 450px;
  left: 50%;
  mix-blend-mode: plus-lighter;
  opacity: 0.2;
  position: absolute;
  transform: translateX(-50%);
  width: 450px;
  z-index: 1;
  mask-image: radial-gradient(rgba(0,0,0,1) 0%,rgba(0,0,0,0.8) 35%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(rgba(0,0,0,1) 0%,rgba(0,0,0,0.8) 35%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
}
.cover-bg-triki-trakes__light2,
.cover-bg-triki-trakes__noise2 {
  top: 62%;
  height: 70%;
  left: 50%;
  position: absolute;
  transform: translate(-50%,-50%);
  width: 100%;
  mask-image: radial-gradient(rgba(0,0,0,1) 0%,rgba(0,0,0,0.8) 35%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(rgba(0,0,0,1) 0%,rgba(0,0,0,0.8) 35%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
}
.cover-bg-triki-trakes__light2 {
  background: radial-gradient(rgba(152,45,175,1) 25%,rgba(128,29,157,0) 80%,rgba(128,29,157,0) 100%);
  mix-blend-mode: screen;
  opacity: 0.7;
  z-index: 1;
}
.cover-bg-triki-trakes__noise2 {
  opacity: 0.8;
}
.cover-bg-triki-trakes__waves-bottom-container {
  height: 100%;
  position: absolute;
  bottom: -5px;
  width: 100%;
  z-index: -1;
}
.triki-trakes-bottom-wave {
  bottom: 0px;
  height: auto;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 100%;
}
.yellow-wave-animation {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}
.yellow-wave-bottom-animation {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}

@media (min-width: 768px) {
  .cover-bg-triki-trakes__waves-container {
    width: 1024px;
  }
  .cover-bg-triki-trakes__top-green {
    height: 615px;
  }
  .cover-bg-triki-trakes__light1 {
    bottom: -100px;
    height: 500px;
    width: 800px;
  }
  .cover-bg-triki-trakes__light2,
  .cover-bg-triki-trakes__noise2 {
    height: 1400px;
    top: 65%;
    width: 1100px;
  }
}

@media (min-width: 1024px) {
  .cover-bg-triki-trakes__waves-container {
    width: 1360px;
  }
  .cover-bg-triki-trakes__top-green {
    height: 510px;
  }
  .cover-bg-triki-trakes__light2,
  .cover-bg-triki-trakes__noise2 {
    top: 58%;
    height: 1500px;
    width: 1300px;
  }
  .yellow-wave-animation {
    animation: yellowAnimationWave 12s ease-in-out infinite alternate-reverse;
  }
  .yellow-wave-bottom-animation {
    animation: orangeAnimationWave 12s ease-in-out infinite alternate-reverse;
  }
  .pause-animation-waves {
    animation-play-state: paused;
  }
}

@media (min-width: 1360px) {
  .cover-bg-triki-trakes__waves-container {
    width: 1920px;
  }
  .cover-bg-triki-trakes__top-green {
    height: 630px;
  }
  .cover-bg-triki-trakes__light1 {
    height: 600px;
    width: 1000px;
  }
  .cover-bg-triki-trakes__light2,
  .cover-bg-triki-trakes__noise2 {
    height: 1700px;
    top: 60%;
    width: 1500px;
  }
}

@media (min-width: 1920px) {
  .cover-bg-triki-trakes__waves-container {
    width: 102%;
  }
  .cover-bg-triki-trakes__top-green {
    height: 660px;
  }
  .cover-bg-triki-trakes__light1 {
    bottom: -120px;
    height: 660px;
    width: 1400px;
  }
}

@keyframes yellowAnimationWave {
  0% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  25% { transform: scaleX(1.1) skewX(2deg) skewY(0deg); }
  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 orangeAnimationWave {
  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); }
}