/*
 * Animações de entrada (equivalentes a fadeInUp/fadeInLeft/fadeInRight do Elementor).
 * Uso: <div data-reveal="fade-up">. js/reveal.js marca "is-reveal-pendente" (escondido) e, quando o
 * elemento entra na tela (inclusive ao abrir a página), "is-reveal-visivel" (anima).
 * Sem JS ou com movimento reduzido, tudo aparece normalmente.
 *
 * O deslocamento fica só na animação: enquanto pendente o elemento está no lugar certo, então
 * a detecção de "entrou na tela" não é enganada por um elemento empurrado para fora dela.
 * --reveal-distancia e --reveal-duracao (padrão 40px e 700ms) permitem reproduzir o Elementor
 * onde o original usa a animação cheia (100% do tamanho do elemento em 1.25s).
 */

@layer components {
  [data-reveal="fade-up"] { --reveal-de: translate3d(0, var(--reveal-distancia, 40px), 0); }
  [data-reveal="fade-left"] { --reveal-de: translate3d(calc(-1 * var(--reveal-distancia, 40px)), 0, 0); }
  [data-reveal="fade-right"] { --reveal-de: translate3d(var(--reveal-distancia, 40px), 0, 0); }

  [data-reveal].is-reveal-pendente {
    opacity: 0;
  }

  [data-reveal].is-reveal-visivel {
    animation: reveal-entrada var(--reveal-duracao, 700ms) ease both;
  }

  @keyframes reveal-entrada {
    from {
      opacity: 0;
      transform: var(--reveal-de, none);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    [data-reveal].is-reveal-pendente {
      opacity: 1;
    }

    [data-reveal].is-reveal-visivel {
      animation: none;
    }
  }
}