/* menu.css — Apple 风格抽屉式导航
   严格按 DESIGN-apple.md (alpha) 令牌:
   - 字体: SF Pro Display / SF Pro Text, 非 Apple 平台回退 Inter
   - 圆角 grammar: sm=8px, md=11px, lg=18px, pill=9999px, 不取中间值
   - 颜色: 全部走 var(--color-*), 永不复用 hover 状态
   - 阴影: 装饰阴影仅用于产品图, chrome 表面不使用 inset/outset shadow
   - 排版: 标题 SF Pro Display 600 + 负字距, 正文 SF Pro Text 17/400 -0.374px
   - "UI chrome recedes so the product can speak" — chrome 不装饰
*/
#navcheck {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.burger_btn {
  position: fixed;
  top: 12px;
  left: 16px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  z-index: 130;
  overflow: visible;
}



.burger_btn .burger {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 130;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  /* shuding/liquid-glass 真实实现: 浅色玻璃 (始终启用) */
  background-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.burger_btn .burger::before,
.burger_btn .burger .bar, .burger_btn .burger::after {
  position: absolute;
  left: 12px;
  right: 12px;
  display: block;
  height: 1.5px;
  background: #1d1d1f;
  content: '';
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
              top 0.35s cubic-bezier(0.19, 1, 0.22, 1),
              bottom 0.35s cubic-bezier(0.19, 1, 0.22, 1);
  border-radius: 2px;
}

.burger_btn .burger .bar {
  top: 50%;
  margin-top: -0.75px;
}

.burger_btn .burger::before {
  top: 14px;
}

.burger_btn .burger::after {
  bottom: 14px;
}

.burger_btn:hover .burger {
  background-color: rgba(255, 255, 255, 0.32);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

nav {
  position: fixed;
  pointer-events: auto;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  padding: 64px 0 0;
  width: 360px;
  max-width: 86vw;
  transform: translate3d(0, 0, 0);
  transform: translateX(-100%);
  will-change: transform;
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
  /* shuding/liquid-glass 真实实现: 几乎透明 + SVG filter */
  background-color: var(--glass-bg-soft);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  box-shadow: var(--glass-shadow), 0 24px 60px rgba(0, 0, 0, 0.18);
  border-right: 1px solid var(--glass-border);
  /* 不要写 position: relative, 会覆盖上面的 position: fixed */
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--font-text, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif);
  color: var(--color-ink);
}

main {
  overflow: hidden;
}

main .content {
  transform: translate3d(0, 0, 0);
  will-change: transform, filter;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 抽屉关闭时遮罩隐藏，关闭时不接收事件 */
.nav_scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.36s cubic-bezier(0.32, 0.72, 0, 1),
              backdrop-filter 0.36s ease;
  display: none;
}
[id="navcheck"]:checked ~ .nav_scrim {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

[id="navcheck"]:checked + .burger_btn .burger::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
[id="navcheck"]:checked + .burger_btn .burger::after {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

[id="navcheck"]:checked + .burger_btn .burger .bar {
  opacity: 0;
}

[id="navcheck"]:checked ~ nav {
  transform: translateX(0);
}

[id="navcheck"]:checked ~ nav {
  transform: translateX(0);
}

/* ==========================================================
   Apple 风格 mega menu (内部多列网格)
   - 抽屉: 360px 宽侧拉 (保留 hamburger 触发)
   - 背景: 95% 不透明 + saturate 180% + blur 30px (毛玻璃)
   - 内部分 3 列: 主功能 (大字号) + 项目 + 法律
   - 字号梯度: 大列 28px / 其他列 17px
   ========================================================== */

.nav_mega {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 20px 28px 24px;
  flex: 1 1 auto;
}

.nav_mega_col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.nav_mega_col--main {
  /* 主功能列 — 大字号块, 占据视觉重心 */
  padding-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.nav_section_title {
  font-family: var(--font-text, "SF Pro Text", "Inter", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  /* 在浅色玻璃底上加深到 80%, 保证可读 */
  color: var(--color-ink-muted-80, #333);
  padding: 0 4px;
}

.nav_mega_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 默认 item: 17/600 (DESIGN body-strong) */
.nav_mega_item {
  display: block;
  padding: 8px 10px;
  margin: 0 -10px;
  font-family: var(--font-text, "SF Pro Text", "Inter", system-ui, sans-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.374px;
  color: var(--color-ink);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 默认隐藏, 抽屉打开时 :checked 触发显示 */
  opacity: 0;
  transform: translateX(-12px);
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
}

/* 主功能列 item: 28/600 大字号 (DESIGN tagline) */
.nav_mega_item--big {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.21;
  letter-spacing: -0.374px;
  padding: 6px 0;
  margin: 0;
  color: var(--color-ink);
}

.nav_mega_item--big:hover,
.nav_mega_item--big:focus-visible {
  color: var(--color-primary);
}

.nav_mega_item:hover,
.nav_mega_item:focus-visible {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--color-ink);
  outline: none;
}

.nav_mega_item:active {
  background-color: rgba(0, 0, 0, 0.08);
  transform: scale(0.98);
}

/* nav 打开时所有 mega item 入场 */
[id="navcheck"]:checked ~ nav .nav_mega_item {
  opacity: 1;
  transform: translateX(0);
}

/* 错开入场 (类似 Apple) */
[id="navcheck"]:checked ~ nav .nav_mega_list li:nth-child(1) .nav_mega_item { transition-delay: 60ms; }
[id="navcheck"]:checked ~ nav .nav_mega_list li:nth-child(2) .nav_mega_item { transition-delay: 100ms; }
[id="navcheck"]:checked ~ nav .nav_mega_list li:nth-child(3) .nav_mega_item { transition-delay: 140ms; }
[id="navcheck"]:checked ~ nav .nav_mega_list li:nth-child(4) .nav_mega_item { transition-delay: 180ms; }
[id="navcheck"]:checked ~ nav .nav_mega_list li:nth-child(5) .nav_mega_item { transition-delay: 220ms; }
[id="navcheck"]:checked ~ nav .nav_mega_list li:nth-child(6) .nav_mega_item { transition-delay: 260ms; }
[id="navcheck"]:checked ~ nav .nav_mega_list li:nth-child(7) .nav_mega_item { transition-delay: 300ms; }

/* 底部 footer — 紧贴抽屉底部, 极简提示 */
.nav_footer {
  margin-top: auto;
  padding: 20px 28px 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav_footer_brand {
  margin: 0;
  font-family: var(--font-text, "SF Pro Text", "Inter", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  color: var(--color-ink-muted-48);
}
.nav_footer_hint {
  margin: 0;
  font-family: var(--font-text, "SF Pro Text", "Inter", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
  color: var(--color-ink-muted-48);
  opacity: 0.7;
}


[id="navcheck"]:checked ~ main .content {
  transform: translateX(0);
  filter: blur(0);
  pointer-events: none;
}

/* helper */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* responsive */
@media (max-width: 640px) {
  nav {
    width: 100vw;
    max-width: 100vw;
    padding-top: 80px;
  }
  .nav_mega {
    padding: 16px 24px 20px;
    gap: 22px;
  }
  .nav_mega_item--big { font-size: 22px; }
  .nav_mega_item { font-size: 16px; }
  .burger_btn .burger {
    top: 10px;
    left: 12px;
  }
}


/* ==== 模态打开时, 让汉堡按钮 (z=130) 让位给 modal (z=120) ==== */
body.modal-open .burger_btn,
body.modal-open .burger {
  z-index: 90;
}
body.modal-open .burger_btn { pointer-events: none; }