/*
  Classes base para as animações
  -----------------------------
  Essas classes são essenciais e devem ser adicionadas a todos os elementos
  que você deseja animar, junto com a classe 'animate'.
*/
.animate {
  /* Define a transição para todas as propriedades com uma duração suave. */
  transition: all 0.6s ease-out;
  /* Começa a animação com opacidade 0 (invisível). */
  opacity: 0;
}

/* Estado final da animação
  ------------------------
  Esta classe é adicionada via JavaScript quando o elemento entra em evidência.
  Ela 'reseta' as transformações e a opacidade, fazendo com que o elemento
  apareça suavemente na tela.
*/
.animate.is-visible {
  /* O elemento se torna totalmente visível. */
  opacity: 1;
  /* O elemento volta à sua posição original. */
  transform: translate(0, 0);
}

/*
  Classes de animação (tipos de movimento)
  -----------------------------------------
  Escolha uma dessas classes para adicionar à classe 'animate' no seu HTML
  para determinar o tipo de movimento.
*/

/* Animação: Fade in */
.fade-in {
  opacity: 0;
}

/* Animação: Deslizamento da esquerda para a direita */
.slide-left {
  transform: translateX(-30px);
}

/* Animação: Deslizamento da direita para a esquerda */
.slide-right {
  transform: translateX(30px);
}

/* Animação: Deslizamento de baixo para cima */
.slide-up {
  transform: translateY(30px);
}

/* Animação: Deslizamento de cima para baixo */
.slide-down {
  transform: translateY(-30px);
}

/*
  Classes de utilitários
  ----------------------
  Adicione estas classes para personalizar a duração e o delay das animações.
  Combine-as com as classes de animação e a classe 'animate'.
*/

/* Duração da animação */
.duration-1s { transition-duration: 1s; }
.duration-1_5s { transition-duration: 1.5s; }
.duration-2s { transition-duration: 2s; }

/* Delay para o início da animação */
.delay-0_2s { transition-delay: 0.2s; }
.delay-0_5s { transition-delay: 0.5s; }
.delay-1s { transition-delay: 1s; }