/* DESKTOP */
.soccer-peek-wave {
  position: absolute;
  left: 0;
  bottom: 95px;
  width: 250px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 999;

  transform: translateY(150px) rotate(0deg);
  will-change: transform, opacity;
}

.soccer-peek-wave img {
  display: block;
  width: 250px;
  height: auto;
}

.soccer-peek-wave.is-visible {
  animation: soccerBottomRevealWave 6400ms ease-in-out forwards;
}

@keyframes soccerBottomRevealWave {
  0% {
    opacity: 0;
    transform: translateY(150px) rotate(0deg);
  }

  14% {
    opacity: 1;
    transform: translateY(100px) rotate(0deg);
  }

  28% {
    opacity: 1;
    transform: translateY(100px) rotate(-4deg);
  }

  42% {
    opacity: 1;
    transform: translateY(100px) rotate(4deg);
  }

  56% {
    opacity: 1;
    transform: translateY(100px) rotate(-3deg);
  }

  68% {
    opacity: 1;
    transform: translateY(100px) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translateY(150px) rotate(0deg);
  }
}

/* MOBILE <= 960px */
@media (max-width: 960px) {

  .soccer-peek-wave {
    left: auto;
    bottom: auto;

    right: -45px;
    top: -5px;

    z-index: 20;

    transform: translateY(-150px) rotate(-90deg);
  }

  .soccer-peek-wave img {
    width: 210px;
  }

  .soccer-peek-wave.is-visible {
    animation: soccerTopRevealWaveMobile 6400ms ease-in-out forwards;
  }

  @keyframes soccerTopRevealWaveMobile {

    0% {
      opacity: 0;
      transform: translateY(-150px) rotate(-90deg);
    }

    14% {
      opacity: 1;
      transform: translateY(70px) rotate(-90deg);
    }

    28% {
      opacity: 1;
      transform: translateY(70px) rotate(-94deg);
    }

    42% {
      opacity: 1;
      transform: translateY(70px) rotate(-86deg);
    }

    56% {
      opacity: 1;
      transform: translateY(70px) rotate(-93deg);
    }

    68% {
      opacity: 1;
      transform: translateY(70px) rotate(-90deg);
    }

    100% {
      opacity: 0;
      transform: translateY(-150px) rotate(-90deg);
    }
  }
}

/* SMALL MOBILE <= 480px */
@media (max-width: 480px) {
  .soccer-peek-wave {
    right: -32px;
    top: -4px;
    width: 150px;

    transform: translateY(-115px) rotate(-90deg);
  }

  .soccer-peek-wave img {
    width: 150px;
  }

  .soccer-peek-wave.is-visible {
    animation: soccerTopRevealWaveMobileSmall 6400ms ease-in-out forwards;
  }

  @keyframes soccerTopRevealWaveMobileSmall {
    0% {
      opacity: 0;
      transform: translateY(-115px) rotate(-90deg);
    }

    14% {
      opacity: 1;
      transform: translateY(48px) rotate(-90deg);
    }

    28% {
      opacity: 1;
      transform: translateY(48px) rotate(-94deg);
    }

    42% {
      opacity: 1;
      transform: translateY(48px) rotate(-86deg);
    }

    56% {
      opacity: 1;
      transform: translateY(48px) rotate(-93deg);
    }

    68% {
      opacity: 1;
      transform: translateY(48px) rotate(-90deg);
    }

    100% {
      opacity: 0;
      transform: translateY(-115px) rotate(-90deg);
    }
  }
}