/* =========================================================
   A MONTANHA ESQUECIDA
   ATMOSFERA VISUAL SEMANTICA V1
   ========================================================= */

#ame-atmosfera {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: #030405;
    transition:
        opacity 900ms ease,
        visibility 900ms ease;
}

body.post-template.ame-atmosfera-enabled #ame-atmosfera {
    opacity: 1;
    visibility: visible;
}

/*
 * O V6 usa um fundo quase opaco no site-main.
 * Tornamos transparente APENAS quando existe
 * um capítulo configurado no Atmosfera.
 */
body.post-template.ame-atmosfera-enabled .site-main {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

/*
 * Duas superfícies permanentes.
 * O motor alterna A/B para produzir crossfade
 * sem piscar e sem trocar background a seco.
 */
.ame-atmosfera-layer {
    position: absolute;
    inset: -3%;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter:
        brightness(0.78)
        saturate(0.78)
        contrast(1.04);
    transform: scale(1.025);
    transition:
        opacity 2200ms ease,
        transform 7000ms ease;
    will-change: opacity, transform;
}

.ame-atmosfera-layer.is-active {
    transform: scale(1);
}

/*
 * A fotografia nunca disputa atenção com o texto.
 * Ela permanece como percepção periférica.
 */
.ame-atmosfera-mask {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 50% 38%,
            rgba(3, 4, 5, 0.24) 0%,
            rgba(3, 4, 5, 0.48) 58%,
            rgba(2, 3, 4, 0.72) 100%
        ),
        linear-gradient(
            180deg,
            rgba(3, 4, 5, 0.48) 0%,
            rgba(3, 4, 5, 0.28) 35%,
            rgba(3, 4, 5, 0.36) 70%,
            rgba(2, 3, 4, 0.68) 100%
        );
}

/*
 * Mantemos o conteúdo real sempre acima
 * da camada atmosférica.
 */
body.post-template.ame-atmosfera-enabled .article {
    position: relative;
    z-index: 2;
}

/*
 * O efeito só existe no capítulo.
 * Home, páginas de lore e demais templates
 * continuam exatamente como estavam.
 */
body:not(.post-template) #ame-atmosfera {
    display: none !important;
}

@media (max-width: 767px) {
    .ame-atmosfera-layer {
        inset: -2%;
        background-position: center center;
    }

    .ame-atmosfera-mask {
        background:
            linear-gradient(
                180deg,
                rgba(3, 4, 5, 0.42),
                rgba(3, 4, 5, 0.22) 34%,
                rgba(3, 4, 5, 0.30) 72%,
                rgba(2, 3, 4, 0.60)
            );
    }
}

@media (prefers-reduced-motion: reduce) {
    #ame-atmosfera,
    .ame-atmosfera-layer {
        transition-duration: 1ms !important;
        transform: none !important;
    }
}

/* =========================================================
   ATMOSFERA — CROSSFADE MOBILE POLISH
   ========================================================= */

@media (max-width: 767px) {

    .ame-atmosfera-layer {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;

        transform:
            translate3d(0, 0, 0)
            scale(1.025);

        will-change:
            opacity,
            transform;
    }

    .ame-atmosfera-layer.is-active {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}

/*
 * Alguns Androids expõem prefers-reduced-motion.
 * Antes isso transformava o crossfade em 1ms,
 * visualmente uma troca seca.
 *
 * Mantemos movimento reduzido, mas preservamos
 * um fade curto para não haver corte.
 */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {

    .ame-atmosfera-layer {
        transition:
            opacity 650ms ease !important;

        transform: none !important;
    }
}