/*
  ARQUIVO DE EFEITOS DE ANIMAÇÃO NO SCROLL
  -----------------------------------------
  Este arquivo controla a aparência inicial e final dos elementos que serão animados.
*/

/*
  1. ESTADO INICIAL (ESCONDIDO)
  - Define que todos os elementos com a classe .fade-in-element ou .fade-in-section
    começarão transparentes (opacity: 0) e ligeiramente deslocados para baixo (transform: translateY(20px)).
  - A propriedade 'transition' garante que qualquer mudança nessas propriedades (opacidade ou posição)
    aconteça de forma suave durante 0.6 segundos.
*/
.fade-in-element,
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/*
  2. ESTADO FINAL (VISÍVEL)
  - Quando a classe '.visible' for ADICIONADA pelo JavaScript,
    o elemento se tornará totalmente opaco (opacity: 1) e voltará à sua posição original (transform: translateY(0)).
  - A mágica da animação acontece por causa da propriedade 'transition' definida acima.
*/
.fade-in-element.visible,
.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}