/* ==========================================================
   BACKGROUND EXCLUSIVO DO HERO
========================================================== */

#inicio{
    position:relative !important;
    isolation:isolate !important;

    /*
       A imagem cobre SOMENTE o Hero.
       O azul abaixo mantém a identidade caso a imagem
       tenha transparência ou demore para carregar.
    */

    background-color:#011538 !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(1,21,56,.40) 0%,
            rgba(1,21,56,.16) 48%,
            rgba(1,21,56,.25) 100%
        ),
        url("/assets/hero-background.png") !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-position:
        center,
        center center !important;

    background-size:
        cover,
        cover !important;

    overflow:hidden !important;
}


/* ==========================================================
   SOMBREAMENTO SUPERIOR
   melhora a integração com o menu
========================================================== */

#inicio::before{
    content:"" !important;

    display:block !important;

    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;

    pointer-events:none !important;

    background:
        linear-gradient(
            180deg,
            rgba(0,9,29,.30) 0%,
            transparent 28%,
            transparent 72%,
            rgba(1,21,56,.22) 100%
        ) !important;
}


/* ==========================================================
   LUZ SUAVE ATRÁS DA FOTO
========================================================== */

#inicio::after{
    content:"" !important;

    display:block !important;

    position:absolute !important;

    width:520px !important;
    height:420px !important;

    right:-80px !important;
    top:50% !important;

    transform:translateY(-50%) !important;

    z-index:0 !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025) 45%,
            transparent 70%
        ) !important;

    filter:blur(18px) !important;

    pointer-events:none !important;
}


/* garante que conteúdo fique acima do background */

#inicio > *{
    position:relative !important;
    z-index:2 !important;
}


/* ==========================================================
   NÃO DEIXA O BACKGROUND VAZAR PARA OUTRAS SEÇÕES
========================================================== */

#assinatura,
#servicos,
#trabalho,
#galeria,
#contato,
footer{
    background-image:none;
}


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

@media(max-width:850px){

    #inicio{
        background-position:
            center,
            center center !important;

        background-size:
            cover,
            cover !important;
    }

    /*
       No celular aumentamos levemente a camada azul
       para preservar leitura do texto.
    */

    #inicio{
        background-image:
            linear-gradient(
                180deg,
                rgba(1,21,56,.27) 0%,
                rgba(1,21,56,.15) 45%,
                rgba(1,21,56,.32) 100%
            ),
            url("/assets/hero-background.png") !important;
    }

    #inicio::after{
        width:340px !important;
        height:300px !important;

        right:-120px !important;

        opacity:.7 !important;
    }
}

@media(max-width:520px){

    #inicio{
        /*
           prioriza o centro da arte no celular
        */

        background-position:
            center,
            50% center !important;
    }
}

/* LINHA DIVISÓRIA — FINAL DO HERO */
#inicio{
    border-bottom:1px solid rgba(255,255,255,.28) !important;
    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.06),
        0 5px 18px rgba(28,79,145,.16) !important;
}


/* =========================================================
   LINHA VISÍVEL NO FINAL DO BACKGROUND DO HERO
========================================================= */

#inicio{
    position:relative !important;
    border-bottom:0 !important;
}

/* linha física por cima do background */
#inicio .hero-divider{
    position:absolute !important;
    display:block !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:2px !important;

    margin:0 !important;
    padding:0 !important;

    z-index:999 !important;

    pointer-events:none !important;

    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.35) 8%,
        rgba(255,255,255,.92) 50%,
        rgba(255,255,255,.35) 92%,
        transparent 100%
    ) !important;

    box-shadow:
        0 0 8px rgba(255,255,255,.22),
        0 2px 12px rgba(75,125,195,.28) !important;
}