@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');


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


html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #050608;
    font-family: Inter, Arial, sans-serif;
    color: white;
}


/* =========================
   BLUE AURORA
========================= */

.aurora {
    position: fixed;
    inset: -40%;
    background:
    radial-gradient(
        circle at 20% 20%,
        rgba(0,170,255,.30),
        transparent 35%
    ),

    radial-gradient(
        circle at 80% 25%,
        rgba(50,120,255,.25),
        transparent 40%
    ),

    radial-gradient(
        circle at 45% 80%,
        rgba(0,100,255,.22),
        transparent 45%
    ),

    radial-gradient(
        circle at 90% 80%,
        rgba(120,200,255,.15),
        transparent 40%
    );

    filter: blur(100px);
    animation: aurora 50s ease-in-out infinite alternate;
}


@keyframes aurora {

    from {
        transform:
        translate(-8%, -5%)
        rotate(-5deg)
        scale(1);
    }

    to {
        transform:
        translate(8%, 6%)
        rotate(8deg)
        scale(1.15);
    }
}

/* =========================
   PARTICLES
========================= */

#particles {

    position: fixed;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:2;

}



/* =========================
   CURSOR LIGHT
========================= */


.cursor {
    position:fixed;
    width:500px;
    height:500px;
    background:
    radial-gradient(
        circle,
        rgba(150, 209, 255, 0.061),
        transparent 45%
    );
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:3;
}


/* =========================
   GRAIN
========================= */


.noise {
    position:fixed;
    inset:0;
    opacity:.035;
    background-image:url(
    "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"
    );

    z-index:4;
}



/* =========================
   VIGNETTE
========================= */

.vignette {
    position:fixed;
    inset:0;
    box-shadow:
    inset 0 0 250px rgba(0,0,0,.85);
    z-index:5;
}


/* =========================
   CONTENT
========================= */


.content {
    position:relative;
    z-index:10;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}



.dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:white;
    box-shadow:
    0 0 20px white;
    margin-bottom:40px;
    animation:pulse 3s infinite;
}



@keyframes pulse {
    50% {
        opacity:.3;
        transform:scale(.6);
    }
}

.logo {
    font-size:56px;
    font-weight:600;
    letter-spacing:-2px;

}

.subtitle {
    margin-top:20px;
    color:rgba(255,255,255,.65);
    font-size:20px;
    font-weight:300;
    line-height:1.5;
}

footer {

    position:fixed;
    bottom:30px;
    width:100%;
    text-align:center;
    font-size:12px;
    letter-spacing:3px;
    color:rgba(255,255,255,.3);
    z-index:10;
}



/* =========================
   SOCIAL LINKS
========================= */

.socials {
    display:flex;
    gap:20px;
    margin-top:40px;
}

.socials a {
    color:rgba(255,255,255,.35);
    transition:color .3s ease, text-shadow .3s ease;
}

.socials a:hover {
    color:rgba(180,220,255,.9);
    text-shadow:0 0 15px rgba(100,180,255,.6);
}


.logo {

    font-size:56px;
    font-weight:600;
    letter-spacing:-2px;

    transition:
        text-shadow .5s ease,
        transform .5s ease,
        color .5s ease;

}

.logo:hover {

    animation:
        logoGlow .8s ease-in-out infinite alternate;
    cursor: pointer;

}


@keyframes logoGlow {

    from {

        text-shadow:

        0 0 15px rgba(80,180,255,.7),
        0 0 40px rgba(0,120,255,.4);

    }

    to {

        text-shadow:

        0 0 25px rgba(120,220,255,.9),
        0 0 70px rgba(0,120,255,.6),
        0 0 120px rgba(0,80,255,.3);

    }

}