/**
 * FOMENT — Efeitos de Movimento Personalizados para Elementor
 * Integração 100% nativa com o painel de "Efeitos de Movimento" do Elementor
 * Compatível com Seções clássicas, Colunas, Widgets e Flexbox Containers (.e-con)
 */

/* =========================================================
   1. KEYFRAMES DO EFEITO FUMAÇA (SMOKE)
   ========================================================= */

/* Fumaça Suave (Padrão) */
@keyframes fomentSmokeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* Fumaça Subindo (Marcante - 38px) */
@keyframes fomentSmokeUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 38px, 0);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* Fumaça Descendo (-24px) */
@keyframes fomentSmokeDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -24px, 0);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* Fumaça com Zoom (Scale 0.95 -> 1 + translateY 16px) */
@keyframes fomentSmokeZoom {
    0% {
        opacity: 0;
        transform: translate3d(0, 16px, 0) scale3d(0.95, 0.95, 1);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        filter: blur(0);
    }
}

/* Fumaça Estática (Fade + Blur sem deslocamento) */
@keyframes fomentSmokeFade {
    0% {
        opacity: 0;
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/* =========================================================
   2. CLASSES ACIONADAS PELO ELEMENTOR (via Animate.css)
   ========================================================= */

.animated.fomentSmokeIn,
.animated.fomentSmokeUp,
.animated.fomentSmokeDown,
.animated.fomentSmokeZoom,
.animated.fomentSmokeFade {
    animation-duration: var(--foment-smoke-dur, 0.75s);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

.animated.fomentSmokeIn   { animation-name: fomentSmokeIn; }
.animated.fomentSmokeUp   { animation-name: fomentSmokeUp; }
.animated.fomentSmokeDown { animation-name: fomentSmokeDown; }
.animated.fomentSmokeZoom { animation-name: fomentSmokeZoom; }
.animated.fomentSmokeFade { animation-name: fomentSmokeFade; }

/* Duração quando o usuário seleciona "Lento" ou "Rápido" no Elementor */
.animated-slow.fomentSmokeIn,
.animated-slow.fomentSmokeUp,
.animated-slow.fomentSmokeDown,
.animated-slow.fomentSmokeZoom,
.animated-slow.fomentSmokeFade {
    animation-duration: 1.25s !important;
}

.animated-fast.fomentSmokeIn,
.animated-fast.fomentSmokeUp,
.animated-fast.fomentSmokeDown,
.animated-fast.fomentSmokeZoom,
.animated-fast.fomentSmokeFade {
    animation-duration: 0.5s !important;
}

/* Acessibilidade: respeita a preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .animated.fomentSmokeIn,
    .animated.fomentSmokeUp,
    .animated.fomentSmokeDown,
    .animated.fomentSmokeZoom,
    .animated.fomentSmokeFade,
    .foment-smoke,
    .foment-smoke-up,
    .foment-smoke-down,
    .foment-smoke-zoom,
    .foment-smoke-fade {
        animation: none !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}

/* =========================================================
   3. SUPORTE PARA ELEMENTOS ATÔMICOS / DIV BLOCKS (via Classe CSS)
   - Para elementos do Elementor que não possuem a aba "Efeitos de Movimento"
   - Basta adicionar 'foment-smoke' no campo "Classes CSS" do elemento
   ========================================================= */

/* Estado inicial oculto até rolar a tela */
.foment-smoke,
.foment-smoke-up,
.foment-smoke-down,
.foment-smoke-zoom,
.foment-smoke-fade {
    opacity: 0;
}

/* Quando entra na tela (.foment-in adicionado pelo observador) */
.foment-smoke.foment-in {
    animation: fomentSmokeIn var(--foment-smoke-dur, 0.75s) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.foment-smoke-up.foment-in {
    animation: fomentSmokeUp var(--foment-smoke-dur, 0.75s) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.foment-smoke-down.foment-in {
    animation: fomentSmokeDown var(--foment-smoke-dur, 0.75s) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.foment-smoke-zoom.foment-in {
    animation: fomentSmokeZoom var(--foment-smoke-dur, 0.75s) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.foment-smoke-fade.foment-in {
    animation: fomentSmokeFade var(--foment-smoke-dur, 0.75s) cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Classes manuais de atraso (Delay) */
.delay-1, .foment-delay-1 { animation-delay: 150ms !important; }
.delay-2, .foment-delay-2 { animation-delay: 300ms !important; }
.delay-3, .foment-delay-3 { animation-delay: 450ms !important; }
.delay-4, .foment-delay-4 { animation-delay: 600ms !important; }
.delay-5, .foment-delay-5 { animation-delay: 750ms !important; }
.delay-6, .foment-delay-6 { animation-delay: 900ms !important; }

/* No editor do Elementor: permite a animação acontecer ao aplicar a classe (.foment-in), mas nunca deixa o bloco invisível antes */
body.elementor-editor-active .foment-smoke:not(.foment-in),
body.elementor-editor-active .foment-smoke-up:not(.foment-in),
body.elementor-editor-active .foment-smoke-down:not(.foment-in),
body.elementor-editor-active .foment-smoke-zoom:not(.foment-in),
body.elementor-editor-active .foment-smoke-fade:not(.foment-in),
body.elementor-editor-active [class*="foment-smoke"]:not(.foment-in) {
    opacity: 1 !important;
}