/* ==========================================================
   SPLASH
========================================================== */

#splash{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#081B22;

    overflow:hidden;

    transition:
        opacity 1s ease,
        visibility 1s ease;

}


/* ==========================================================
   ESTADO FINAL
========================================================== */

#splash.hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}


/* ==========================================================
   CONTEÚDO
========================================================== */

.splash-content{

    width:min(780px,90%);

    text-align:center;

    color:#FFFFFF;

}


/* ==========================================================
   SELO
========================================================== */

.splash-seal{

    width:220px;

    max-width:65vw;

    opacity:0;

    transform:scale(.75);

    animation:

        splashSeal 1.5s ease forwards;

}


/* ==========================================================
   TEXTO
========================================================== */

.splash-text{

    margin-top:2rem;

}


.splash-text h1{

    opacity:0;

    transform:translateY(30px);

    animation:

        splashText .9s ease forwards;

    animation-delay:1.2s;

    margin-bottom:1.5rem;

    font-size:clamp(2.3rem,5vw,4rem);

    line-height:1.15;

    font-weight:700;

}


.splash-text p{

    opacity:0;

    transform:translateY(25px);

    animation:

        splashText .9s ease forwards;

    animation-delay:2s;

    max-width:650px;

    margin:0 auto;

    font-size:clamp(1.05rem,2vw,1.3rem);

    line-height:1.9;

}


.splash-text strong{

    display:block;

    opacity:0;

    transform:translateY(20px);

    animation:

        splashText .9s ease forwards;

    animation-delay:2.8s;

    margin-top:2rem;

    font-size:1.8rem;

    font-weight:700;

}


.splash-text span{

    display:block;

    opacity:0;

    transform:translateY(20px);

    animation:

        splashText .9s ease forwards;

    animation-delay:3.3s;

    margin-top:.6rem;

    font-size:1rem;

    letter-spacing:.08em;

    opacity:.9;

}


/* ==========================================================
   FUNDO
========================================================== */

#splash::before{

    content:"";

    position:absolute;

    inset:-20%;

    background:

        radial-gradient(circle at center,
        rgba(255,255,255,.05),
        transparent 60%);

    animation:

        splashGlow 8s linear infinite;

}


/* ==========================================================
   ANIMAÇÕES
========================================================== */

@keyframes splashSeal{

    from{

        opacity:0;

        transform:

            scale(.75);

    }

    to{

        opacity:1;

        transform:

            scale(1);

    }

}


@keyframes splashText{

    from{

        opacity:0;

        transform:

            translateY(30px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}


@keyframes splashGlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   NÉVOA SERRANA
========================================================== */

#splash::after{

    content:"";

    position:absolute;

    inset:-30%;

    background:

        radial-gradient(
            circle at 20% 40%,
            rgba(255,255,255,.06),
            transparent 32%
        ),

        radial-gradient(
            circle at 75% 65%,
            rgba(255,255,255,.05),
            transparent 35%
        ),

        radial-gradient(
            circle at 55% 25%,
            rgba(255,255,255,.04),
            transparent 28%
        );

    filter:blur(70px);

    opacity:.8;

    animation:

        fogMove 22s ease-in-out infinite alternate;

    pointer-events:none;

}



/* ==========================================================
   PARTÍCULAS DE LUZ
========================================================== */

.splash-content{

    position:relative;

    z-index:2;

}



/* ==========================================================
   ANIMAÇÃO DA NÉVOA
========================================================== */

@keyframes fogMove{

    0%{

        transform:

            translate(-2%,-1%)

            scale(1);

    }

    25%{

        transform:

            translate(1%,2%)

            scale(1.04);

    }

    50%{

        transform:

            translate(3%,-2%)

            scale(1.08);

    }

    75%{

        transform:

            translate(-1%,1%)

            scale(1.03);

    }

    100%{

        transform:

            translate(-3%,2%)

            scale(1.06);

    }

}

/* ==========================================================
   RESPONSIVO
========================================================== */

@media(max-width:768px){

    .splash-seal{

        width:170px;

    }

    .splash-text h1{

        font-size:2.3rem;

    }

    .splash-text p{

        line-height:1.7;

    }

}