/* ======================================================
   HEADER
====================================================== */
.topbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:99999;
    padding:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:
    linear-gradient(
    to bottom,
    rgba(0,0,0,0.92),
    rgba(0,0,0,0.72)
    );
    border-bottom:
    2px solid
    var(--header-border,
    rgba(255,255,255,0.08));
    box-shadow:
    0 10px 30px rgba(0,0,0,0.25);
    transition:
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
/* ======================================================
   SCROLLED
====================================================== */
.topbar.scrolled{
    background:
    linear-gradient(
    to bottom,
    rgba(0,0,0,0.94),
    rgba(0,0,0,0.78)
    );
    border-bottom:
    1px solid var(--accent-color);
    box-shadow:
    0 0 35px var(--theme-glow),
    0 10px 30px rgba(0,0,0,0.45);
}
/* ======================================================
   LOGO
====================================================== */
.logo{
    font-family:'Cinzel',serif;
    font-size:1.8rem;
    font-weight:700;
    letter-spacing:3px;
    color:#ffffff;
    text-transform:uppercase;
    line-height:1;
    text-decoration:none;
}
.logo span{
    color:var(--accent-color);
}
.hidden-hlink{
color:inherit;
text-decoration:none;
cursor:default;
}
.hidden-hlink:hover{
color:inherit;
text-decoration:none;
cursor:default;
}
/* ======================================================
   MENU
====================================================== */
.menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}
.menu a{
    position:relative;
    text-decoration:none;
    color:
    rgba(255,248,235,0.88);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:1rem;
    font-weight:500;
    transition:0.3s ease;
    white-space:nowrap;
}
.menu a:hover{
    color:
    var(--accent-color);
}
.menu a::after{
    content:'';
    position:absolute;
    bottom:-6px;
    left:0;
    width:0;
    height:2px;
    background:
    var(--accent-color);
    transition:0.3s ease;
}
.menu a:hover::after{
    width:100%;
}