/* =========================================
   MANGASOCIAL - FUNDO EXCLUSIVO DA HOME
========================================= */

html body.ms-index-background {

    min-height: 100vh !important;

    background-color:
        #0c0818 !important;

    background-image:

        linear-gradient(
            180deg,
            rgba(8, 5, 18, .66) 0%,
            rgba(13, 7, 28, .72) 45%,
            rgba(8, 5, 18, .88) 100%
        ),

        url('/images/brand/index-bg.png') !important;

    background-position:
        center top !important;

    background-size:
        cover !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        fixed !important;

}


/* =========================================
   NÃO DEIXA OUTRO CSS COBRIR O FUNDO
========================================= */

html body.ms-index-background::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 50% 15%,
            rgba(139, 92, 246, .08),
            transparent 45%
        );

}


/* =========================================
   HEADER LEVEMENTE TRANSPARENTE
========================================= */

body.ms-index-background .header {

    background:
        rgba(12, 9, 22, .82) !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


/* =========================================
   CARDS COM EFEITO DE VIDRO
========================================= */

body.ms-index-background
:is(
    .hero,
    .brand-paths > a,
    .ms-feature-card,
    .home-search,
    .community-section,
    .brand-resume
) {

    background:

        linear-gradient(
            145deg,
            rgba(23, 18, 41, .80),
            rgba(13, 10, 27, .72)
        ) !important;

    border-color:
        rgba(196, 181, 253, .16) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:

        0 18px 50px
        rgba(0, 0, 0, .22);

}


/* =========================================
   SEÇÕES GRANDES
========================================= */

body.ms-index-background
:is(
    .popular-section,
    .latest-section,
    .ranking-section
) {

    background:
        rgba(11, 8, 22, .46);

    border-radius:
        24px;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

}


/* =========================================
   FOOTER
========================================= */

body.ms-index-background footer {

    background:
        rgba(8, 6, 17, .88) !important;

    backdrop-filter:
        blur(12px);

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    html body.ms-index-background {

        background-image:

            linear-gradient(
                180deg,
                rgba(8, 5, 18, .74),
                rgba(11, 7, 23, .90)
            ),

            url('/images/brand/index-bg.png') !important;

        background-position:
            center top !important;

        background-size:
            auto 100vh !important;

        background-attachment:
            scroll !important;

    }

}


/* celular pequeno */

@media (max-width: 430px) {

    html body.ms-index-background {

        background-position:
            50% top !important;

    }

}