/* ==========================
   FONTS
========================== */

@font-face {
    font-family: SpaceGrotesk;
    src:url("../fonts/SpaceGrotesk-Regular.ttf");
}

@font-face {
    font-family: Inter;
    src:url("../fonts/Inter-Regular.ttf");
}

:root{

    --purple:#6A1BFF;
    --magenta:#FF2D95;

    --black:#111827;
    --slate:#334155;

    --gray:#E5E7EB;
    --white:#FFFFFF;

}

/* ==========================
   RESET
========================== */

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

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;
}

/* ==========================
   BODY
========================== */

body{

    background:#111827;

    color:white;

    font-family:Inter,sans-serif;

    position:relative;
}

/* ==========================
   PARALLAX BACKGROUND
========================== */

#parallax-bg{

    position:fixed;
    inset:-10%;

    z-index:0;

    background:

    radial-gradient(
        circle at 20% 20%,
        rgba(106,27,255,.25),
        transparent 25%
    ),

    radial-gradient(
        circle at 80% 60%,
        rgba(255,45,149,.18),
        transparent 30%
    ),

    radial-gradient(
        circle at center,
        rgba(255,255,255,.03),
        transparent 70%
    ),

    #111827;

    transition:transform .2s linear;
}

/* ==========================
   TECH GRID
========================== */

#parallax-bg::before{

    content:"";

    position:absolute;
    inset:0;

    background:

    linear-gradient(
        rgba(255,255,255,.02) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.02) 1px,
        transparent 1px
    );

    background-size:60px 60px;
}

/* ==========================
   NETWORK
========================== */

#network{

    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    z-index:1;
}

/* ==========================
   HEXAGONS
========================== */

.hex-layer{

    position:fixed;
    inset:0;

    pointer-events:none;

    z-index:2;
}

.hex{

    position:absolute;

    width:160px;
    height:180px;

    clip-path:polygon(
        25% 6.7%,
        75% 6.7%,
        100% 50%,
        75% 93.3%,
        25% 93.3%,
        0% 50%
    );

    border:1px solid rgba(106,27,255,.15);

    animation:
        pulse 5s infinite ease-in-out;
}

.h1{
    left:5%;
    top:15%;
}

.h2{
    right:8%;
    top:12%;
}

.h3{
    left:15%;
    bottom:12%;
}

.h4{
    right:10%;
    bottom:15%;
}

.h5{
    left:50%;
    top:10%;
}

/* ==========================
   LOGIN
========================== */

main{

    width:100%;
    height:100%;

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

    position:relative;
    z-index:10;
}

.login-card{

    width:460px;

    padding:50px;

    position:relative;

    backdrop-filter:blur(25px);

    background:
        rgba(17,24,39,.55);

    border:

        1px solid
        rgba(255,255,255,.08);

    clip-path:polygon(
        10% 0,
        90% 0,
        100% 12%,
        100% 88%,
        90% 100%,
        10% 100%,
        0 88%,
        0 12%
    );

    box-shadow:

        0 0 40px rgba(106,27,255,.25),

        inset 0 0 30px rgba(255,45,149,.05);
}

/* ==========================
   HOLOGRAPHIC BORDER
========================== */

.login-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    z-index:-1;

    background:

    linear-gradient(
        135deg,
        #6A1BFF,
        #FF2D95,
        #6A1BFF
    );

    background-size:300% 300%;

    animation:holo 8s linear infinite;

    clip-path:inherit;

    filter:blur(10px);
}

.logo-wrapper{

    display:flex;
    justify-content:center;
}

.logo-hex{

    width:100px;
    height:110px;

    clip-path:polygon(
        25% 6.7%,
        75% 6.7%,
        100% 50%,
        75% 93.3%,
        25% 93.3%,
        0% 50%
    );

    background:

    linear-gradient(
        135deg,
        #6A1BFF,
        #FF2D95
    );

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

    font-size:42px;
    font-weight:bold;

    box-shadow:
        0 0 30px rgba(106,27,255,.8);
}

h1{

    margin-top:25px;

    text-align:center;

    font-family:SpaceGrotesk;

    letter-spacing:10px;
}

p{

    text-align:center;

    margin-top:10px;

    color:#E5E7EB;

    margin-bottom:35px;
}

input{

    width:100%;

    margin-bottom:15px;

    padding:16px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(106,27,255,.25);

    color:white;

    border-radius:12px;
}

input:focus{

    outline:none;

    box-shadow:
        0 0 20px rgba(106,27,255,.35);
}

button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    color:white;

    font-family:SpaceGrotesk;

    letter-spacing:3px;

    background:

    linear-gradient(
        135deg,
        #6A1BFF,
        #FF2D95
    );

    box-shadow:
        0 0 20px rgba(106,27,255,.4);
}

/* ==========================
   ANIMATIONS
========================== */

@keyframes pulse{

    0%,100%{
        transform:scale(1);
        opacity:.15;
    }

    50%{
        transform:scale(1.08);
        opacity:.45;
    }
}

@keyframes holo{

    0%{
        background-position:0 50%;
    }

    100%{
        background-position:300% 50%;
    }
}