/*Animação que balança levemente da esquerda pra direita*/
/*Recomendado para popups ou qualquer outra coisa que aprecise*/
/*Chamar atenção do player*/
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}


/*Animação basica do background de gradiend com 3 cores*/
/*Recomendado para botões de Continue*/
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/*Animação da logo sair do centro e ir para esquerda*/
/*Recomendado apenas para a logo*/
@keyframes slideToLeft {
    0% {
        transform: translateX(0); 
    }
    100% {
        transform: translateX(-42vw); 
    }
}

@media (max-width: 1024px) {
  @keyframes slideToLeft {
      0% {
          transform: translateX(0);
      }
      100% {
          transform: translateX(-38vw);
      }
  }
}

@media (max-width: 768px) { 
  @keyframes slideToLeft {
      0% {
          transform: translateX(0);
      }
      100% {
          transform: translateX(-33vw); 
      }
  }
}

@media (max-width: 403px) { 
  @keyframes slideToLeft {
      0% {
          transform: translateX(0);
      }
      100% {
          transform: translateX(-24vw); 
      }
  }
}


/*Animação dos corações aparecendo em ordem*/
/*Recomendado apenas para os corações*/
@keyframes slide-in {
    0% {
      transform: translateX(-50px); 
      opacity: 0; 
    }
    100% {
      transform: translateX(0);
      opacity: 1; 
    }
}


/*Animação de "brilho" passando da esquerda pra direita*/
/*Usado da div de demonstração de pontos ganhos*/
@keyframes load89234 {
    100% {
      background-position: -100% 0;
    }
}

/*Animação de quando o player tá com 1 coração de vida*/
/*Essa animação é apenas pro background*/
@keyframes pulseRed {
    0% {
      box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.5);
    }
    50% {
      box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.8);
    }
    100% {
      box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.5);
    }
}

/*Animação de coração pulsando quando tá com 1 vida*/
@keyframes pulseHeart {
    0% {
      transform: scale(1);
      filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.295));
    }
    50% {
      transform: scale(1.2);
      filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.63));
    }
    100% {
      transform: scale(1);
      filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.288));
    }
}

/*Animação para o coração, animação mais leve*/
/*Usada quando o player fica com 2 corações*/
@keyframes pulseSoft {
    0% {
      transform: scale(1);
      filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.3));
    }
    50% {
      transform: scale(1.1);
      filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6));
    }
    100% {
      transform: scale(1);
      filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.3));
    }
}