/* ANIMAÇÕES: Área específica das animações */
@keyframes gradientPulse {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

@keyframes stretchInFirstAccess {
  0% {
    width: 0;
    height: 0;
    transform: scale(0);
    opacity: 0;
  }
  30% {
    width: 6vw;
    height: 10vh;
    transform: scale(1);
    opacity: 1;
  }
  60% {
    width: 60vw;
    height: 50%;
    transform: scale(0.95);
  }
  100% {
    width: 60vw;
    height: 54%;
    transform: scale(1);
  }
}

@keyframes stretchInMessage {
  0% {
    width: 0;
    height: 0;
    transform: scale(0);
    opacity: 0;
  }
  30% {
    width: 2rem;
    height: 2rem;
    transform: scale(1);
    opacity: 1;
  }
  60% {
    width: 4rem;
    height: 2rem;
    transform: scale(0.95);
  }
  100% {
    width: 50%;
    height: 2.5rem;
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes stretchBoth {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 100px;
    height: 50px;
  }
}

@keyframes showContent {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hideContent {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    display: none;
  }
}

@keyframes leaveToLeft {
  0% { }
  100% {
    transform: translate(-200%); 
  }
}

@media screen and (min-width: 1024px) and (max-width: 1350px) {
  @keyframes stretchIn {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    30% {
      width: 12rem;
      height: 12rem;
      transform: scale(1);
      opacity: 1;
    }
    60% {
      width: 80rem;
      height: 60rem;
      transform: scale(0.95);
    }
    100% {
      width: 100rem;
      height: 60rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInTerms {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 40rem;
      transform: scale(0.95);
    }
    50% {
      width: 90rem;
      height: 78rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(80rem - 4rem);
      height: 70rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInRanking {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 40rem;
      transform: scale(0.95);
    }
    50% {
      width: 70rem;
      height: 53rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(80rem - 4rem);
      height: 44rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInPhoto {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 20rem;
      height: 20rem;
      transform: scale(0.95);
    }
    50% {
      width: 60rem;
      height: 60rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(50rem - 4rem);
      height: 50rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInProfile {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 30rem;
      transform: scale(0.95);
    }
    50% {
      width: 58rem;
      height: 56rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(48rem - 4rem);
      height: 50rem;
      transform: scale(1);
    }
  }

  #contentProfileVisible {
    & .header {
      & .description {
        font-size: 1rem !important;
      }
    }
  }

  @keyframes stretchInAvatar {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 20rem;
      transform: scale(0.95);
    }
    50% {
      width: 40rem;
      height: 40rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(60rem - 4rem);
      height: 58rem;
      transform: scale(1);
    }
  }

  #contentAvatarVisible {
    & .select-gender {
      & .gender-man,
      & .gender-woman {
        font-size: 1rem !important;
      }
    }

    & .firstlevel-avatar {
      & .avatar-area {
        & .avatar-content {
          align-items: center;
        }
      }
    }
  }

  @keyframes stretchInClub {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 20rem;
      transform: scale(0.95);
    }
    50% {
      width: 40rem;
      height: 40rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(45.8rem - 4rem);
      height: 58rem;
      transform: scale(1);
    }
  }
}

@media screen and (min-width: 1351px) and (max-width: 1599px) {
  @keyframes stretchIn {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    30% {
      width: 12rem;
      height: 12rem;
      transform: scale(1);
      opacity: 1;
    }
    60% {
      width: 80rem;
      height: 54rem;
      transform: scale(0.95);
    }
    100% {
      width: 100rem;
      height: 54rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInFirstAccess {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    30% {
      width: 20rem;
      height: 20rem;
      transform: scale(1);
      opacity: 1;
    }
    60% {
      width: 70vw;
      height: 50rem;
      transform: scale(0.95);
    }
    100% {
      width: 60vw;
      height: 50rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInTerms {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 20rem;
      height: 20rem;
      transform: scale(0.95);
    }
    50% {
      width: 90rem;
      height: 51rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(80rem - 4rem);
      height: 51rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInRanking {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 40rem;
      transform: scale(0.95);
    }
    50% {
      width: 70rem;
      height: 53rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(80rem - 4rem);
      height: 44rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInPhoto {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 20rem;
      height: 20rem;
      transform: scale(0.95);
    }
    50% {
      width: 60rem;
      height: 40rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(50rem - 4rem);
      height: 50rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInProfile {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 30rem;
      transform: scale(0.95);
    }
    50% {
      width: 58rem;
      height: 40rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(48rem - 4rem);
      height: 47rem;
      transform: scale(1);
    }
  }

  #contentProfileVisible {
    & .header {
      & .description {
        font-size: 1rem !important;
      }
    }
  }

  @keyframes stretchInAvatar {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 20rem;
      transform: scale(0.95);
    }
    50% {
      width: 40rem;
      height: 40rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(60rem - 4rem);
      height: 58rem;
      transform: scale(1);
    }
  }

  #contentAvatarVisible {
    & .select-gender {
      & .gender-man,
      & .gender-woman {
        font-size: 1rem !important;
      }
    }

    & .firstlevel-avatar {
      & .avatar-area {
        & .avatar-content {
          align-items: center;
        }
      }
    }
  }

  @keyframes stretchInClub {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 20rem;
      transform: scale(0.95);
    }
    50% {
      width: 40rem;
      height: 40rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(45.8rem - 4rem);
      height: 58rem;
      transform: scale(1);
    }
  }
}

@media screen and (min-width: 1366px) and (max-width: 1439px) {
  @keyframes stretchIn {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    30% {
      width: 12rem;
      height: 12rem;
      transform: scale(1);
      opacity: 1;
    }
    60% {
      width: 80rem;
      height: 54rem;
      transform: scale(0.95);
    }
    100% {
      width: 100rem;
      height: 54rem;
      transform: scale(1);
    }
  }
  
  @keyframes stretchInTerms {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 40rem;
      transform: scale(0.95);
    }
    50% {
      width: 90rem;
      height: 78rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(80rem - 4rem);
      height: 70rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInRanking {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 40rem;
      transform: scale(0.95);
    }
    50% {
      width: 70rem;
      height: 53rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(80rem - 4rem);
      height: 44rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInPhoto {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 20rem;
      height: 20rem;
      transform: scale(0.95);
    }
    50% {
      width: 60rem;
      height: 60rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(50rem - 4rem);
      height: 50rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInProfile {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 30rem;
      transform: scale(0.95);
    }
    50% {
      width: 58rem;
      height: 60rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(48rem - 4rem);
      height: 50rem;
      transform: scale(1);
    }
  }

  #contentProfileVisible {
    & .header {
      & .description {
        font-size: 1.2rem !important;
      }
    }
  }

  #contentRankingVisible {
    & .list {
      & .box {
        & .info {
          & .description {
            font-size: 1.2rem;
          }
        }
      }
    }
  }

  @keyframes stretchInAvatar {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 30rem;
      transform: scale(0.95);
    }
    50% {
      width: 90rem;
      height: 70rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(80rem - 4rem);
      height: 63rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInClub {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 30rem;
      transform: scale(0.95);
    }
    50% {
      width: 56rem;
      height: 70rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(45.8rem - 4rem);
      height: 63rem;
      transform: scale(1);
    }
  }
}

@media screen and (min-width: 1440px) {
  @keyframes stretchIn {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    30% {
      width: 12rem;
      height: 12rem;
      transform: scale(1);
      opacity: 1;
    }
    60% {
      width: 80rem;
      height: 54rem;
      transform: scale(0.95);
    }
    100% {
      width: 100rem;
      height: 64rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInTerms {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 40rem;
      transform: scale(0.95);
    }
    50% {
      width: 90rem;
      height: 78rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(80rem - 4rem);
      height: 70rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInSession {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 20rem;
      height: 20rem;
      transform: scale(0.95);
    }
    50% {
      width: 50rem;
      height: 60rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(60rem - 4rem);
      height: 50rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInRanking {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 40rem;
      transform: scale(0.95);
    }
    50% {
      width: 70rem;
      height: 53rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(80rem - 4rem);
      height: 44rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInPhoto {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 20rem;
      height: 20rem;
      transform: scale(0.95);
    }
    50% {
      width: 60rem;
      height: 60rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(50rem - 4rem);
      height: 50rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInProfile {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 30rem;
      transform: scale(0.95);
    }
    50% {
      width: 58rem;
      height: 60rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(48rem - 4rem);
      height: 50rem;
      transform: scale(1);
    }
  }

  #contentProfileVisible {
    & .header {
      & .description {
        font-size: 1.2rem !important;
      }
    }
  }

  #contentRankingVisible {
    & .list {
      & .box {
        & .info {
          & .description {
            font-size: 1.2rem;
          }
        }
      }
    }
  }

  @keyframes stretchInAvatar {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 30rem;
      transform: scale(0.95);
    }
    50% {
      width: 90rem;
      height: 70rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(80rem - 4rem);
      height: 63rem;
      transform: scale(1);
    }
  }

  @keyframes stretchInClub {
    0% {
      width: 0;
      height: 0;
      transform: scale(0);
      opacity: 0;
    }
    25% {
      width: 30rem;
      height: 30rem;
      transform: scale(0.95);
    }
    50% {
      width: 56rem;
      height: 70rem;
      transform: scale(0.95);
    }
    100% {
      width: calc(45.8rem - 4rem);
      height: 63rem;
      transform: scale(1);
    }
  }
}