/* 1. Classe base para todos os elementos animados */
  .animate-on-scroll {
    opacity: 0;
    /* Define a transição suave para opacidade e posição */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  /* 2. Classes de direção (definem o estado inicial, antes de aparecer) */
  .fade-up {
    transform: translateY(30px); /* Começa 30px abaixo */
  }

  .fade-down {
    transform: translateY(-30px); /* Começa 30px acima */
  }

  .fade-left {
    transform: translateX(30px); /* Começa 30px à direita */
  }

  .fade-right {
    transform: translateX(-30px); /* Começa 30px à esquerda */
  }
  
  /* Adicionando um efeito de cascata (stagger) para as dúvidas */
  .stagger-children > * {
    transition-delay: var(--stagger-delay, 0ms);    

  }


  /* 3. Classe final (adicionada via JS quando o elemento está visível) */
  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: none; /* Reseta qualquer transformação (translate) */
  }