/* ============================================================
   navbar.css — component/Navbar
   规格 13 导航 + NAVBAR STATE 的 1~4 条
   ============================================================ */

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  transition: transform .32s var(--ease-out-soft), background-color .25s ease, backdrop-filter .25s ease;
}

/* 往下滚时整条收起，往上滚或回到顶部再落下来。
   长页面里把屏幕让给内容，需要导航时往回滚一点就有。 */
.navbar.is-hidden { transform: translateY(-100%); }

/* 4 · 吸顶：滚过 80px 后加淡淡的底部描边与轻微背景模糊 */
.navbar.is-scrolled {
  background-color: rgba(245, 241, 232, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.navbar.is-scrolled .navbar__rule { opacity: .5; }

.navbar__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  height: 83px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4.4vw, 64px);
}

.navbar__wordmark {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.45;
  color: var(--pencil);
  margin: 0;
  text-decoration: none;
  white-space: nowrap;
}

/* 底部那道手绘横线，常驻 */
.navbar__rule {
  display: block;
  width: 100%;
  height: 4px;
  opacity: .3;
  transition: opacity .25s ease;
}
.navbar__rule path { stroke: var(--pencil); stroke-width: 1.6; fill: none; }

/* —— 菜单 —— */
.navbar__menu {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.nav-item__label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--pencil);
  opacity: .62;
  white-space: nowrap;
  /* 3 · 切换不是硬切 */
  transition: opacity .25s ease, font-weight .25s ease, transform .25s var(--ease-out-soft);
}

/* 13 · hover 时文字轻微上浮 2px */
.nav-item:hover .nav-item__label { opacity: .85; transform: translateY(-2px); }

/* 1 · 激活样式：不透明 + 加粗 + 橘色手绘波浪下划线。
   只靠深浅辨认不出来，必须有下划线。 */
.nav-item.is-active .nav-item__label { opacity: 1; font-weight: 700; }

.nav-item__underline { display: block; width: 44px; height: 6px; overflow: visible; }
.nav-item__underline path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.4;
  stroke-linecap: round;
  /* pathLength=1 把路径长度归一化，dashoffset 直接用 0~1。
     光靠 dashoffset 收不干净：round 笔帽会溢出 dash 段的端点，
     未激活的每一项底下都会残留一个小圆点。用 stroke-opacity 兜底。 */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;          /* 收起：右端先退，向左收回 */
  stroke-opacity: 0;
  transition: stroke-dashoffset .3s ease-out, stroke-opacity .18s ease .12s;
}
.nav-item.is-active .nav-item__underline path {
  stroke-dashoffset: 0;          /* 画出：左端起笔，向右生长 */
  stroke-opacity: 1;
  /* 与旧项收回重叠 0.1s，像下划线滑过去 */
  transition: stroke-dashoffset .3s ease-out .1s, stroke-opacity .12s ease .1s;
}

@media (max-width: 820px) {
  .navbar__menu { gap: 16px; }
  .nav-item__label { font-size: 15px; }
  .navbar__wordmark { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar { transition: background-color .25s ease; }
  .navbar.is-hidden { transform: none; }
}