.navbar{
width:100%;
height:70px;
background:rgba(5,5,5,.95);
border-bottom:2px solid #8d6d18;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 20px;
position:fixed;
top:0;
z-index:1000;
backdrop-filter:blur(10px);
}

.nav-left,.nav-right{
width:80px;
display:flex;
justify-content:center;
align-items:center;
}

.logo{width:44px;}

.nav-center{
flex:1;
display:flex;
justify-content:center;
position:relative;
cursor:pointer;
}

.brand-text{
display:flex;
font-size:2rem;
letter-spacing:8px;
font-weight:bold;
font-family:'Bebas Neue', sans-serif;
}

.brand-text span{
opacity:0;
animation:letter .4s forwards;
}

.center-menu{
position:absolute;
display:flex;
gap:35px;
pointer-events:none;
}

.word{opacity:0;}
.word.show{opacity:1;animation:wordAppear .35s forwards;}

.nav-item{
color:#f1f1f1;
font-weight:bold;
text-transform:uppercase;
font-size:.75rem;
letter-spacing:2px;
position:relative;
}

.nav-item:hover{color:#f0c95a;}

.nav-item::before{
content:"";
position:absolute;
bottom:-6px;
left:0;
width:0;
height:1px;
background:#d4a72c;
transition:.3s;
}

.nav-item:hover::before{width:100%;}

.nav-center:hover .brand-text{opacity:0;}
.nav-center:hover .center-menu{pointer-events:auto;}

@keyframes letter{
from{opacity:0;transform:translateY(15px);}
to{opacity:1;transform:translateY(0);}
}

@keyframes wordAppear{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}