/*==========================================================
    NAVBAR
==========================================================*/

.navbar{
    position:fixed;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    width:min(var(--container),calc(100% - 40px));
    height:var(--nav-height);

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

    padding:0 20px;

    z-index:var(--z-navbar);

    border-radius:100px;

    background:rgba(9,5,18,.28);

    backdrop-filter:blur(18px);

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

    transition:.35s var(--ease);
}

.navbar.scrolled{

    height:68px;

    background:rgba(8,5,15,.78);

    border-color:rgba(214,166,75,.18);

    box-shadow:
        0 18px 60px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(255,255,255,.03);

}

.nav-brand{

    display:flex;
    align-items:center;
    gap:16px;

}

.nav-brand img{

    width:120px;
    height:72px;

    filter:drop-shadow(0 0 20px rgba(214,166,75,.35));

    transition:.35s;

}

.navbar:hover .nav-brand img{

    transform:rotate(-5deg) scale(1.06);

}

.nav-brand strong{

    display:block;

    font-size:19px;

    color:white;

}

.nav-brand span{

    display:block;

    font-size:12px;

    color:var(--muted);

}

.nav-links{

    display:flex;
    align-items:center;
    gap:6px;

}

.nav-links a{

    position:relative;

    padding:12px 16px;

    color:#d6d0e5;

    font-size:15px;

    transition:.25s;

}

.nav-links a::before{

    content:"";

    position:absolute;

    bottom:2px;

    right:50%;

    transform:translateX(50%);

    width:0;

    height:2px;

    border-radius:50px;

    background:linear-gradient(90deg,var(--gold),var(--purple));

    transition:.25s;

}

.nav-links a:hover{

    color:white;

}

.nav-links a:hover::before{

    width:70%;

}

.nav-button{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:13px 22px;

    border-radius:100px;

    font-weight:bold;

    color:#120908;

    background:

        linear-gradient(
            135deg,
            var(--gold-2),
            var(--gold)
        );

    box-shadow:

        0 10px 35px rgba(214,166,75,.22);

    transition:.3s;

}

.nav-button:hover{

    transform:translateY(-2px);

    box-shadow:

        0 18px 45px rgba(214,166,75,.32);

}

.nav-toggle{

    display:none;

    width:46px;
    height:46px;

    border-radius:50%;

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

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

}

.nav-toggle span{

    display:block;

    width:20px;

    height:2px;

    margin:4px auto;

    border-radius:20px;

    background:white;

    transition:.3s;

}

/* Glow */

.navbar::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:100px;

    pointer-events:none;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(214,166,75,.08),
            transparent
        );

    opacity:0;

    transition:.4s;

}

.navbar:hover::after{

    opacity:1;

}

/* Responsive */

@media(max-width:1100px){

    .nav-links{

        display:none;

    }

    .nav-button{

        display:none;

    }

    .nav-toggle{

        display:block;

    }

}