/* ── 新版官网组件(2026-07 重写) ── */

/* ── 全站固定背景(第二屏起统一背景图,不随内容滚动) ──
   独立 fixed 层,第一屏 hero 用实底盖住它 */
.site-bg {
  position: fixed; inset: 0; z-index: -1;
  background: var(--night) url('../images/bj.png') center center / cover no-repeat;
}
/* 背景上层的零散星点(光点+光晕,含闪烁动画,800px 贴片平铺) */
.site-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: url('../images/bg-stars.svg') repeat;
  background-size: 800px 800px;
}

/* ── 导航栏 ── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; /* 顶层:压过页面所有定位元素 */
  display: flex; align-items: center; justify-content: space-between;
  gap: 50px;
  padding: 16px 60px; /* 设计稿:左右边距 60px */
}
/* 毛玻璃衬底:放在伪元素上,向下延伸一段并用渐变 mask 渐隐,
   模糊和暗色都柔和淡出,无生硬底边;mask 在伪元素上,不影响导航内容 */
.site-nav::before {
  content: '';
  position: absolute;
  inset: 0 0 -28px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 12, 29, 0.42) 0%, rgba(15, 12, 29, 0.18) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.site-nav .nav-logo { display: block; flex-shrink: 0; }
.site-nav .nav-logo img { height: 44px; width: auto; display: block; }

.nav-menu { display: flex; gap: 40px; list-style: none; }
.nav-menu a {
  font-size: 16px;
  color: rgba(197, 184, 237, 0.5); /* 未选中:50% 透明度 */
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
}
.nav-menu a:hover { color: var(--lavender); }
/* 当前所在区块:全量 #C5B8ED */
.nav-menu a.active { color: var(--lavender); }

.btn-login {
  width: 118px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(55,56,104,0.48);
  border: 1px solid rgba(197,184,237,0.22);
  border-radius: 23px;
  backdrop-filter: blur(10px);
  font-size: 16px; color: var(--text);
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s;
}
.btn-login:hover {
  background: rgba(55,56,104,0.75);
  border-color: rgba(197,184,237,0.45);
}

/* 已登录:登录按钮换成固定头像(site-nav.js 按 lunary_session 渲染),高与按钮一致;
   点头像展开「退出登录」玻璃胶囊菜单,点别处收起 */
.nav-avatar { position: relative; flex-shrink: 0; }
.nav-avatar__face {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
}
.nav-avatar__face img { width: 46px; height: 46px; display: block; border-radius: 50%; }
.nav-avatar__logout {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  white-space: nowrap;
  padding: 11px 22px;
  background: rgba(32, 22, 70, 0.85);
  border: 1px solid rgba(197, 184, 237, 0.22);
  border-radius: 21px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 14px;
  color: #C5B8ED;
  cursor: pointer;
  /* 关闭态:淡出上收,动画结束再隐藏 */
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.nav-avatar.is-open .nav-avatar__logout {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-avatar__logout:hover {
  color: #FFFFFF;
  background: rgba(55, 56, 104, 0.9);
}

/* ── 汉堡按钮(仅 ≤960px 显示):玻璃圆钮,开合时三横变 ✕ ── */
.nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  background: rgba(55, 56, 104, 0.48);
  border: 1px solid rgba(197, 184, 237, 0.22);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: #C5B8ED;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-burger span + span { margin-top: 4px; }
.site-nav.is-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.site-nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .site-nav { padding: 12px 16px; gap: 12px; }
  .site-nav .nav-logo img { height: 36px; }
  /* ul 转下拉后脱离文档流,margin-left auto 把登录区 + 汉堡收拢到右侧 */
  .btn-login { margin-left: auto; width: auto; height: 40px; padding: 0 20px; border-radius: 20px; font-size: 15px; }
  .nav-avatar { margin-left: auto; }
  .nav-avatar__face img { width: 40px; height: 40px; }
  .nav-burger { display: flex; }
  /* 菜单转为汉堡下方的玻璃下拉面板(玻璃参数同 .nav-avatar__logout);
     高亮沿用桌面端的 a.active 变色,首屏"全部点亮"的滚动监听行为不变 */
  .nav-menu {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    right: 16px;
    min-width: 208px;
    padding: 8px;
    background: rgba(32, 22, 70, 0.85);
    border: 1px solid rgba(197, 184, 237, 0.22);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* 关闭态:淡出上收,动画结束再隐藏 */
    opacity: 0;
    transform: translateY(8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
  }
  .site-nav.is-open .nav-menu {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.24s ease, transform 0.24s ease;
  }
  .nav-menu li + li { margin-top: 2px; }
  .nav-menu a {
    display: block;
    padding: 11px 18px;
    border-radius: 13px;
    font-size: 15px;
  }
  .nav-menu a:active { background: rgba(197, 184, 237, 0.1); }
}