.cover-bg-pinguinos {
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.cover-bg-pinguinos__outer-container {
  height: 100%;
  position: relative;
  width: 100%;
}
.cover-bg-pinguinos__bg-gradient {
  background: linear-gradient(345deg, rgba(52,187,243,1) 0%, rgba(0,171,233,1) 50%);
  height: 100%;
  left: -1%;
  mask-position: bottom center;
  mask-repeat: no-repeat;
  mask-size: cover;
  position: relative;
  top: -40px;
  width: 102%;
  -webkit-mask-position: bottom center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
}
.cover-bg-pinguinos__waves-container {
  height: 100%;
  left: -1%;
  position: absolute;
  top: -40px;
  width: 102%;
}
.cover-bg-pinguinos__waves {
  height: 100%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: auto;
}
.cover-bg-pinguinos__light {
  background: radial-gradient(rgba(105, 216, 254,0.8) 25%,rgba(14,174,234,0.05) 60%,rgba(14,174,234,0) 70%);
  height: 250px;
  left: 50%;
  position: absolute;
  top: 60%;
  transform: translate(-50%, -50%);
  width: 360px;
}
.cover-bg-pinguinos__top {
  background-color: #0040aa;
  height: 400px;
  left: 50%;
  mask-position: bottom center;
  mask-repeat: no-repeat;
  mask-size: cover;
  position: absolute;
  top: 0px;
  transform: translateX(-50%);
  width: 500px;
  -webkit-mask-position: bottom center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
}
.cover-bg-pinguinos__top-gradient {
  background: radial-gradient(circle, rgba(46, 81, 211,0) 0%,rgba(46, 81, 211,1) 25%,rgba(0,52,141,1) 70%);
  height: 150%;
  position: absolute;
  width: 100%;
}
.cover-bg-pinguinos__top-light {
  background: radial-gradient(circle,rgba(46, 81, 211,1) 0%,rgba(0,52,141,0) 70%);
  height: 768px;
  left: 50%;
  mix-blend-mode: color-dodge;
  position: absolute;
  top: 70%;
  transform: translate(-50%, -50%);
  width: 100vw;
}
.pinguinos-top-wave {
  bottom: 0px;
  height: auto;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 100%;
}

.cover-bg-pinguinos__waves-purple-container,
.cover-bg-pinguinos__waves-white-container,
.cover-bg-pinguinos__waves-blue-container,
.cover-bg-pinguinos__top-shape-container {
  height: 100%;
  position: absolute;
  width: 100%;
}
.waves-purple,
.waves-white,
.waves-blue,
.pinguinos-top-wave {
  bottom: 0;
  height: auto;
  position: absolute;
  width: 100%;
}
.cover-bg-pinguinos__top-noise {
  top: 0;
  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%);
}

.purple-animation {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.white-animation {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.blue-animation {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.white-animation {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}

@media (min-width: 500px) {
  .cover-bg-pinguinos__top {
    height: 1250px;
    width: 768px;
  }
}

@media (min-width: 768px) {
  .cover-bg-pinguinos__bg-gradient,
  .cover-bg-pinguinos__waves-container  {
    top: -70px;
  }
  .cover-bg-pinguinos__light {
    height: 1900px;
    top: 50%;
    width: 200vw;
  }
  .cover-bg-pinguinos__top {
    height: 540px;
    width: 1024px;
  }
  .cover-bg-pinguinos__top-light {
    height: 120vw;
    top: 90%;
    width: 120vw;
  }
}

@media (min-width: 1024px) {
  .cover-bg-pinguinos__bg-gradient,
  .cover-bg-pinguinos__waves-container  {
    top: -200px;
  }
  .cover-bg-pinguinos__light {
    height: 2000px;
  }
  .cover-bg-pinguinos__top {
    height: 570px;
    width: 1360px;
  }
  .cover-bg-pinguinos__top-light {
    height: 90vw;
    top: 80%;
    width: 90vw;
  }
  .purple-animation {
    animation: animationWave 12s ease-in-out infinite alternate-reverse;
  }
  .blue-animation {
    animation: animationWave 14s ease-in-out infinite alternate-reverse;
  }
  .white-animation {
    animation: animationWave 16s ease-in-out infinite alternate-reverse;
  }
  .pause-animation-waves {
    animation-play-state: paused;
  }
}

@media (min-width: 1360px) {
  .cover-bg-pinguinos__bg-gradient,
  .cover-bg-pinguinos__waves-container  {
    top: -220px;
  }
  .cover-bg-pinguinos__light {
    width: 150vw;
  }
  .cover-bg-pinguinos__top {
    height: 720px;
    width: 1500px;
  }
  .cover-bg-pinguinos__top-light {
    height: 1500px;
    top: 90%;
    width: 1500px;
  }
}

@media (min-width: 1500px) {
  .cover-bg-pinguinos__top {
    height: 800px;
    width: 1920px;
  }
}

@media (min-width: 1920px) {
  .cover-bg-pinguinos__bg-gradient,
  .cover-bg-pinguinos__waves-container  {
    top: -135px;
  }
  .cover-bg-pinguinos__light {
    height: 210vw;
    top: 50%;
    width: 100vw;
  }
  .cover-bg-pinguinos__top {
    aspect-ratio: 1920/800;
    height: auto;
    width: 100%;
  }
}

@media (min-width: 2090px) {
  .cover-bg-pinguinos__waves {
    height: auto;
    width: 100%;
    left: 0;
    bottom: 0;
    transform: translate(0, 0);
  }
  .waves-purple,
  .waves-blue,
  .waves-yellow {
    height: auto;
    width: 100%;
    left: 0;
    bottom: 0;
    transform: translate(0, 0);
  }
}

@media (min-width: 2200px) {
  .cover-bg-pinguinos__top {
    aspect-ratio: 2240/855;
  }
}

@keyframes purpleWave {
  0% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  25% { transform: scaleX(1.03) skewX(3deg) skewY(-1deg); }
  50% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  75% { transform: scaleX(1.03) skewX(-3deg) skewY(-1deg); }
  100% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
}

@keyframes animationWave {

  0% { transform: scaleX(1) translate(0px, 0px); }
  25% { transform: scaleX(1.02) translate(20px ,2px); }
  50% { transform: scaleX(1) translate(0px, 0px); }
  75% { transform: scaleX(1.02) translate(-20px, -2px); }
  100% { transform: scaleX(1) translate(0px, 0px); }
}