/* ═══════════════════════════════════════
   VLADFX NAV BAR — Frosted glass, sticky, shimmer
   Used on ALL pages. Class: .nav-bar
   ═══════════════════════════════════════ */

.nav-bar{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  display:flex;justify-content:space-between;align-items:center;
  padding:0 48px;height:64px;
  background:rgba(8,8,10,.6);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:all .4s var(--ease-spring);
}

/* ── Scrolled state: more opaque + shimmer border ── */
.nav-bar.scrolled{
  background:rgba(8,8,10,.92);
  border-bottom-color:var(--border);
}

/* ── Gradient shimmer line on scroll (Feature 1) ── */
.nav-bar.scrolled::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--brand) 50%,transparent 100%);
  opacity:1;transition:opacity .4s;
}
.nav-bar:not(.scrolled)::after{opacity:0}

/* ── Logo ── */
.nav-logo{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  animation:navLogoIn .6s var(--ease-out-expo) both;
}
.nav-logo img{height:32px;width:32px;object-fit:contain;border-radius:6px}
.nav-logo span{
  font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:1.1rem;color:var(--text);letter-spacing:2px;
}
.nav-logo .dim{color:var(--dim);font-weight:400}

/* ── Logo entrance animation ── */
@keyframes navLogoIn{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:none}
}

/* ── Nav links ── */
.nav-bar ul{display:flex;gap:8px;list-style:none}
.nav-bar a{
  color:var(--dim);text-decoration:none;font-size:.85rem;
  font-weight:500;padding:8px 16px;border-radius:8px;transition:all .2s;
}
.nav-bar a:hover{color:var(--text);background:rgba(255,255,255,.06)}

/* ── Back link (sub-pages) ── */
.nav-back{
  color:var(--dim);font-size:.85rem;text-decoration:none;
  display:flex;align-items:center;gap:6px;transition:color .2s;
}
.nav-back:hover{color:var(--brand)}

/* ── Responsive ── */
@media(max-width:768px){
  .nav-bar{padding:0 20px;height:56px}
  .nav-logo img{height:28px;width:28px}
  .nav-logo span{font-size:.95rem}
  .nav-bar ul{gap:4px}
  .nav-bar a{padding:6px 12px;font-size:.8rem}
}
@media(max-width:480px){
  .nav-bar ul{display:none}
}