/* ═══════════════════════════════════════════
   navbar.css — Top navigation bar
   Change this file to update: logo, nav links,
   sign-in button, sticky/glass scroll effect
═══════════════════════════════════════════ */

nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;

  /* anchored — no margin so it never shifts position */
  padding:14px 56px;

  /* at-top state: very light glass */
  background:rgba(11,4,30,0.30);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);

  border:none;
  border-bottom:1px solid rgba(255,255,255,0.07);

  box-shadow:
    0 4px 24px rgba(0,0,0,0.25),
    0 0 48px rgba(99,57,201,0.08);

  /* smooth transition for ALL changing properties */
  transition:
    background   0.45s ease,
    backdrop-filter 0.45s ease,
    box-shadow   0.45s ease,
    padding      0.4s  ease,
    border-color 0.4s  ease;
}

nav.scrolled{
  padding:8px 56px;
  background:rgba(8,2,22,0.82);
  backdrop-filter:blur(36px) saturate(1.8);
  -webkit-backdrop-filter:blur(36px) saturate(1.8);
  border-bottom:1px solid rgba(139,92,246,0.18);
  box-shadow:
    0 8px 36px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 0 60px rgba(99,57,201,0.14);
}

.logo{display:flex;align-items:center;text-decoration:none;color:white}

/* ── Navbar logo — at-top state ── */
.logo-img{
  height:72px;
  width:auto;
  object-fit:contain;
  display:block;
  filter:
    brightness(1.25)
    saturate(1.3)
    drop-shadow(0 0 10px rgba(139,92,246,0.55))
    drop-shadow(0 2px 12px rgba(0,0,0,0.5));
  transition: height 0.4s ease, filter 0.35s ease, transform 0.3s ease;
}

/* ── Logo shrinks when scrolled ── */
nav.scrolled .logo-img{
  height:56px;
  filter:
    brightness(1.3)
    saturate(1.35)
    drop-shadow(0 0 12px rgba(139,92,246,0.65))
    drop-shadow(0 2px 14px rgba(0,0,0,0.6));
}

.logo:hover .logo-img{
  filter:
    brightness(1.4)
    saturate(1.4)
    drop-shadow(0 0 18px rgba(139,92,246,0.85))
    drop-shadow(0 4px 16px rgba(0,0,0,0.5));
  transform: scale(1.06);
}

.nav-links{display:flex;align-items:center;gap:34px;list-style:none}
.nav-links a{
  color:rgba(255,255,255,.95);text-decoration:none;font-size:14.5px;font-weight:600;
  display:flex;align-items:center;gap:3px;transition:color .2s;letter-spacing:.15px;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.nav-links a:hover{color:white;text-shadow:0 0 14px rgba(167,139,250,.7)}
.nav-links a svg{width:12px;height:12px;opacity:.7;margin-top:1px}

.nav-btn{
  background:linear-gradient(135deg,#1a0845 0%,#2e1270 100%);
  border:1.5px solid rgba(124,58,237,.5);color:white;
  padding:10px 26px;border-radius:50px;font-size:13.5px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:all .25s;
  box-shadow:0 4px 20px rgba(124,58,237,.35);
}
.nav-btn:hover{
  background:linear-gradient(135deg,#7c3aed 0%,#9b5de5 100%);
  border-color:var(--accent);box-shadow:0 6px 28px rgba(124,58,237,.55);transform:translateY(-1px);
}