* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    height: 100%;

    background: #000;

    overflow: hidden;

    font-family: Helvetica, Arial, sans-serif;

}



/* FOG */


.fog {

    position: fixed;

    inset: -30%;


    background:

        radial-gradient(
            circle at 30% 40%,
            rgba(255,255,255,0.16),
            transparent 35%
        ),

        radial-gradient(
            circle at 70% 60%,
            rgba(255,255,255,0.08),
            transparent 30%
        );


    filter: blur(100px);

    opacity: 0;


    animation:

        fogIn 4s ease forwards,

        fogMove 20s ease-in-out infinite alternate;


    pointer-events: none;

}



/* CENTER */


main {

    height: 100vh;


    display: flex;

    flex-direction: column;


    justify-content: center;

    align-items: center;


    gap: 40px;

}



/* LOGO */


.logo {

    width: min(65vw, 600px);


    opacity: 0;


    transform: scale(.88);


    filter: blur(12px);


    animation: logoReveal 2.5s ease forwards;

}



/* INFO */


.info {

    opacity: 0;


    display: flex;

    flex-direction: column;

    align-items: center;


    gap: 12px;


    color: rgba(255,255,255,.5);


    font-size: 11px;


    letter-spacing: .25em;


    animation: textReveal 2s ease forwards;

    animation-delay: 1.8s;

}



.info a {

    color: rgba(255,255,255,.5);


    text-decoration: none;


    transition: .4s ease;

}



.info a:hover {

    color: white;


    letter-spacing: .35em;

}



/* ANIMATIONS */


@keyframes logoReveal {


    to {

        opacity: 1;


        transform: scale(1);


        filter: blur(0);

    }


}



@keyframes textReveal {


    to {

        opacity: 1;

    }


}



@keyframes fogIn {


    to {

        opacity: .6;

    }


}



@keyframes fogMove {


    from {

        transform: translate(-5%, -3%) scale(1);

    }


    to {

        transform: translate(5%, 3%) scale(1.2);

    }


}