/* ============================================
   导航栏 — 固定顶部，透明→毛玻璃
   ============================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-6);
  transition: background var(--duration-base) var(--ease-out-quart),
              backdrop-filter var(--duration-base) var(--ease-out-quart),
              border-color var(--duration-base) var(--ease-out-quart);
}

.nav--scrolled {
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  transition: opacity var(--duration-fast) ease;
}

.nav__logo:hover {
  opacity: 0.7;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  transition: color var(--duration-fast) ease;
}

.nav__link:hover,
.nav__link--active {
  color: var(--color-text);
}

.nav__link--active {
  cursor: default;
}

/* ── 汉堡菜单 ── */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-text);
  transition: transform var(--duration-base) var(--ease-out-quart),
              opacity var(--duration-fast) ease;
}

.nav__toggle.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav__toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav__toggle.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ── 移动端菜单 ── */
.nav__mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--color-bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.nav__mobile.open {
  display: flex;
}

.nav__mobile .nav__link {
  font-size: var(--text-h3);
  font-weight: 300;
}

/* ── 响应式 ── */
@media (max-width: 768px) {
  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }
}