/* ============================
   BASE GERAL DA ANIMAÇÃO
============================ */

.ocultar-left,
.ocultar-right,
.ocultar-top,
.ocultar-bottom,
.animated-element {
    opacity: 0;
    transform: translate(0, 0);
    filter: blur(10px);
    transition: opacity .6s ease, transform .6s ease, filter .6s ease;
    will-change: opacity, transform, filter;
}

/* ============================
   DIREÇÕES (ESTADO INICIAL)
============================ */

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

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

.ocultar-top {
    transform: translateY(-40px);
}

.ocultar-bottom {
    transform: translateY(40px);
}

.animated-element {
    transform: translateY(20px);
}

/* padrão leve */


/* ============================
   ESTADO ATIVO (APARECE)
============================ */

.exibir,
.animar {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
}


/* ============================
   MODO EDITOR DO ELEMENTOR
============================ */

.elementor-editor-active .ocultar-left,
.elementor-editor-active .ocultar-right,
.elementor-editor-active .ocultar-top,
.elementor-editor-active .ocultar-bottom,
.elementor-editor-active .animated-element {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
    filter: blur(0) !important;
    transition: none !important;
}


/* ============================
   CLASSES OPCIONAIS DE FADE (SEM DIREÇÃO)
============================ */

.fade {
    opacity: 0;
    transition: opacity .6s ease;
}

.fade.animar {
    opacity: 1;
}


/* ============================
   CLASSES UTILITÁRIAS
============================ */

.no-select {
    user-select: none;
}