/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* BODY */

body{
    width:100%;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;

    overflow:hidden;

    font-family:'Poppins',sans-serif;

    background:
    radial-gradient(circle at top left,#00ffff15,transparent 25%),
    radial-gradient(circle at bottom right,#ff00ff15,transparent 25%),
    linear-gradient(135deg,#020617,#0a0f2c,#01040f);

    position:relative;
}

/* PARTICULAS */

body::before{
    content:'';

    position:absolute;
    inset:0;

    background-image:
    radial-gradient(#00ffff22 1px,transparent 1px),
    radial-gradient(#ff00ff22 1px,transparent 1px);

    background-size:60px 60px;

    animation:particles 12s linear infinite;
}

@keyframes particles{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(60px);
    }

}

/* CONTENEDOR */

.splash-container{
    position:relative;
    z-index:2;

    text-align:center;

    padding:2rem;

    width:100%;
}

/* LOGO */

.logo{
    font-family:'Orbitron',sans-serif;

    font-size:clamp(2.5rem,8vw,6rem);

    font-weight:800;

    letter-spacing:6px;

    color:#00ffff;

    text-shadow:
    0 0 5px #00ffff,
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 40px #00ffff,
    0 0 80px #00ffff;

    animation:pulse 2s infinite alternate;
}

/* EFECTO */

@keyframes pulse{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.03);
    }

}

/* SUBTITULO */

.subtitle{
    margin-top:1.5rem;

    color:#d0d0d0;

    font-size:clamp(1rem,3vw,1.4rem);

    letter-spacing:2px;

    animation:fadeIn 2s ease;
}

/* TEXTO */

.loading{
    margin-top:2rem;

    color:#ff00ff;

    font-size:1rem;

    letter-spacing:4px;

    animation:blink 1s infinite;
}

@keyframes blink{

    0%{
        opacity:0.3;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.3;
    }

}

/* LINEA */

.line{
    width:250px;
    max-width:80%;

    height:4px;

    margin:2rem auto;

    border-radius:20px;

    background:
    linear-gradient(
        90deg,
        #00ffff,
        #ff00ff,
        #00ffff
    );

    background-size:300%;

    animation:lineMove 3s linear infinite;

    box-shadow:
    0 0 10px #00ffff,
    0 0 25px #ff00ff;
}

@keyframes lineMove{

    0%{
        background-position:0%;
    }

    100%{
        background-position:300%;
    }

}

/* TEXTO INFERIOR */

.description{
    max-width:700px;

    margin:auto;

    color:#aaaaaa;

    line-height:1.8;

    font-size:clamp(0.9rem,2vw,1rem);
}

/* EFECTO ENTRADA */

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* RESPONSIVE */

@media(max-width:768px){

    .logo{
        letter-spacing:3px;
    }

    .subtitle{
        line-height:1.6;
    }

    .description{
        padding:0 1rem;
    }

}