/* ========================================================= */
/* 1. BASE: Estilos Iniciais e Configuração de Transição      */
/* ========================================================= */

.animate {
    /* Estado inicial: Invisível e com interações desativadas */
    opacity: 0;
    pointer-events: none;

    /* will-change: Indicativo para o navegador otimizar (uso opcional, mas útil) */
    will-change: opacity, transform, filter;

    /* CRÍTICO: Define as propriedades que serão animadas */
    transition-property: opacity, transform, filter;

    /* Variáveis CSS aplicadas aos parâmetros de transição */
    transition-duration: var(--animation-duration, 0.7s);
    transition-delay: var(--animation-delay, 0s);
    transition-timing-function: var(--animation-easing, ease);
}

/* Estado final: Visível (Gatilho da Transição) */
.animate.is-visible {
    opacity: 1;
    pointer-events: auto;

    /* Reset: Todas as animações terminam neste estado */
    transform: none;
    filter: none;
}

/* ========================================================= */
/* 2. ESTADOS INICIAIS (Classes específicas para o ponto de partida) */
/* ========================================================= */

/* O 'fade-in' usa o opacity: 0 da classe .animate, sem transform inicial. */
/* .animate--fade-in { } */

/* Movimento */
.animate--slide-up {
    transform: translateY(40px);
}

.animate--slide-down {
    transform: translateY(-40px);
}

.animate--slide-right {
    transform: translateX(-40px);
}

.animate--slide-left {
    transform: translateX(40px);
}

/* Escala */
.animate--zoom-in {
    transform: scale(0.85);
}

.animate--zoom-out {
    transform: scale(1.2);
}

/* Rotação/Flip */
.animate--flip-x {
    transform: rotateX(85deg);
}

.animate--flip-y {
    transform: rotateY(85deg);
}

/* Filtro */
.animate--blur-in {
    filter: blur(6px);
}


/* ========================================================= */
/* 3. REVERSE DIRECTION (Aplica a lógica de inversão)        */
/* ========================================================= */

/* Note que o seletor é baseado no estado inicial da classe invertida */

.animate[data-reverse="true"].animate--slide-up {
    /* Slide Up Invertido -> Parte de baixo */
    transform: translateY(-40px);
}

.animate[data-reverse="true"].animate--slide-down {
    /* Slide Down Invertido -> Parte de cima */
    transform: translateY(40px);
}

.animate[data-reverse="true"].animate--slide-right {
    /* Slide Right Invertido -> Parte da esquerda */
    transform: translateX(40px);
}

.animate[data-reverse="true"].animate--slide-left {
    /* Slide Left Invertido -> Parte da direita */
    transform: translateX(-40px);
}

.animate[data-reverse="true"].animate--zoom-in {
    transform: scale(1.2);
}

.animate[data-reverse="true"].animate--zoom-out {
    transform: scale(0.85);
}

.animate[data-reverse="true"].animate--flip-x {
    transform: rotateX(-85deg);
}

.animate[data-reverse="true"].animate--flip-y {
    transform: rotateY(-85deg);
}


/* ========================================================= */
/* 4. LOOP (Requer Animações - @keyframes)                   */
/* ========================================================= */

/* ATENÇÃO: Se usar 'data-loop', você precisará mudar de 'transition' para 'animation'.
   Abaixo está o seletor, mas as keyframes específicas não estão definidas aqui.
   
   .animate[data-loop="true"].is-visible {
       animation-iteration-count: infinite;
       ...
   }
*/

/* ========================================================= */
/* 5. PREFERS REDUCED MOTION                                 */
/* ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .animate,
    .animate.is-visible {
        /* Desativa todas as animações e transições */
        transition: none !important;
        animation: none !important;

        /* Garante que o estado final seja visível e sem transformações */
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}