/* WEBOSCELL_LANDING_STAGE1_13_4_MARCA_DAGUA_PROFUNDIDADE_SEM_REFLOW
 * Escopo estrito: aprimorar somente o fundo e a marca-d'água Consult Dev.
 * Não altera grid, flex, ordem, margens, paddings, dimensões, cards, botões ou alinhamentos.
 */

/* Mantém o fundo escuro, porém cria uma área central de profundidade para a marca. */
body.weboscell-lp-stage1-13-4-watermark-fx {
    background-color: #041318;
    background-image:
        radial-gradient(ellipse at 50% 43%, rgba(8, 47, 51, .42), transparent 55%),
        radial-gradient(circle at 12% 17%, rgba(16, 185, 129, .14), transparent 34%),
        radial-gradient(circle at 87% 18%, rgba(34, 211, 238, .10), transparent 32%),
        linear-gradient(180deg, #041318 0%, #061a20 48%, #041116 100%) !important;
    background-attachment: fixed;
    background-size: 100% 100%, 116% 116%, 120% 120%, 100% 100%;
    animation: webosStage134BackgroundDepth 34s ease-in-out infinite alternate !important;
}

/* Fallback: logo original com baixa opacidade para navegadores sem CSS Mask. */
body.weboscell-lp-stage1-13-4-watermark-fx::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("/assets/img/logo_consult_dev.png") !important;
    background-repeat: no-repeat !important;
    background-position: center 45% !important;
    background-size: min(980px, 70vw) !important;
    opacity: .070 !important;
    filter:
        saturate(126%)
        drop-shadow(0 0 30px rgba(34, 211, 238, .18))
        drop-shadow(0 0 54px rgba(16, 185, 129, .12)) !important;
    transform-origin: 50% 45%;
    mix-blend-mode: screen;
    animation: webosStage134WatermarkFloat 22s ease-in-out infinite !important;
}

/* Em navegadores modernos, usa a transparência da própria logo como máscara.
 * O gradiente percorre apenas a marca, criando brilho orgânico sem poluir o hero.
 */
@supports ((-webkit-mask-image: url("/assets/img/logo_consult_dev.png")) or (mask-image: url("/assets/img/logo_consult_dev.png"))) {
    body.weboscell-lp-stage1-13-4-watermark-fx::after {
        background-image: linear-gradient(
            112deg,
            rgba(34, 211, 238, .58) 0%,
            rgba(226, 232, 240, .31) 30%,
            rgba(74, 222, 128, .59) 54%,
            rgba(45, 212, 191, .39) 73%,
            rgba(34, 211, 238, .54) 100%
        ) !important;
        background-repeat: no-repeat !important;
        background-position: 0% 50% !important;
        background-size: 230% 230% !important;
        -webkit-mask-image: url("/assets/img/logo_consult_dev.png");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center 45%;
        -webkit-mask-size: min(980px, 70vw);
        mask-image: url("/assets/img/logo_consult_dev.png");
        mask-repeat: no-repeat;
        mask-position: center 45%;
        mask-size: min(980px, 70vw);
        opacity: .105 !important;
        filter:
            drop-shadow(0 0 18px rgba(34, 211, 238, .23))
            drop-shadow(0 0 48px rgba(16, 185, 129, .16)) !important;
    }
}

/* Halo difuso atrás da marca: cria profundidade sem encobrir textos. */
body.weboscell-lp-stage1-13-4-watermark-fx .page-glow::before {
    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(34, 211, 238, .15) 0%,
            rgba(16, 185, 129, .085) 26%,
            rgba(6, 78, 78, .035) 45%,
            transparent 67%
        ) !important;
    opacity: .56 !important;
    filter: blur(46px) !important;
    transform-origin: 50% 45%;
    animation: webosStage134WatermarkHalo 18s ease-in-out infinite alternate !important;
}

/* Arco luminoso muito suave, lembrando as ondas da identidade Consult Dev. */
body.weboscell-lp-stage1-13-4-watermark-fx .page-glow::after {
    background:
        conic-gradient(
            from 205deg at 50% 45%,
            transparent 0deg,
            rgba(34, 211, 238, .070) 38deg,
            transparent 76deg,
            rgba(74, 222, 128, .055) 142deg,
            transparent 190deg,
            rgba(34, 211, 238, .045) 256deg,
            transparent 315deg
        ) !important;
    opacity: .40 !important;
    filter: blur(34px) !important;
    transform-origin: 50% 45%;
    animation: webosStage134WatermarkOrbit 52s linear infinite !important;
}

@keyframes webosStage134BackgroundDepth {
    from {
        background-position: 50% 43%, 0% 0%, 100% 0%, 0% 0%;
    }
    to {
        background-position: 50% 46%, 5% 4%, 95% 5%, 0% 0%;
    }
}

@keyframes webosStage134WatermarkFloat {
    0% {
        opacity: .070;
        transform: translate3d(-5px, 7px, 0) scale(.987);
        background-position: 0% 50%;
    }
    50% {
        opacity: .112;
        transform: translate3d(4px, -4px, 0) scale(1.016);
        background-position: 58% 50%;
    }
    100% {
        opacity: .082;
        transform: translate3d(7px, 5px, 0) scale(.997);
        background-position: 100% 50%;
    }
}

@keyframes webosStage134WatermarkHalo {
    from {
        opacity: .40;
        transform: translate3d(-1.5%, 1%, 0) scale(.95);
    }
    to {
        opacity: .62;
        transform: translate3d(1.5%, -1%, 0) scale(1.06);
    }
}

@keyframes webosStage134WatermarkOrbit {
    from {
        transform: rotate(0deg) scale(.98);
    }
    to {
        transform: rotate(360deg) scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.weboscell-lp-stage1-13-4-watermark-fx,
    body.weboscell-lp-stage1-13-4-watermark-fx::after,
    body.weboscell-lp-stage1-13-4-watermark-fx .page-glow::before,
    body.weboscell-lp-stage1-13-4-watermark-fx .page-glow::after {
        animation: none !important;
    }
}

@media (max-width: 768px) {
    body.weboscell-lp-stage1-13-4-watermark-fx {
        background-attachment: scroll;
        animation-duration: 40s !important;
    }

    body.weboscell-lp-stage1-13-4-watermark-fx::after {
        background-position: center 40% !important;
        background-size: min(760px, 92vw) !important;
        opacity: .052 !important;
        animation-duration: 28s !important;
    }

    @supports ((-webkit-mask-image: url("/assets/img/logo_consult_dev.png")) or (mask-image: url("/assets/img/logo_consult_dev.png"))) {
        body.weboscell-lp-stage1-13-4-watermark-fx::after {
            -webkit-mask-position: center 40%;
            -webkit-mask-size: min(760px, 92vw);
            mask-position: center 40%;
            mask-size: min(760px, 92vw);
            opacity: .072 !important;
        }
    }

    body.weboscell-lp-stage1-13-4-watermark-fx .page-glow::before {
        opacity: .38 !important;
        filter: blur(42px) !important;
    }

    body.weboscell-lp-stage1-13-4-watermark-fx .page-glow::after {
        opacity: .24 !important;
        filter: blur(30px) !important;
    }
}