/* ============================================================
   nav-v2.css —— 全站导航条 + 各页入场动画
   结构：.nv-bar（贴顶的渐变条） > .nv-in（无框内容行） > 品牌 / 导航 / 工具键 / 汉堡
   分区：
     1) 基础重置与变量
     2) .nv-bar / .nv-in（想改导航透明度、高度就改这里）
     3) .nv-tools 工具按钮（每个键用 --h 控制色相：268 模式、196 留言板、38 音乐、318 目录、158 其他）
     4) 移动端（767px 断点：隐藏部分工具键，菜单展开成全宽渐变）
     5) 滑动导航胶囊彩色流动（#thoughtTocWrap / #placeTocWrap）
     6) 每页不同的入场动画（body[data-page="xxx"]，时长 1.1–1.6s）
     7) 亮色态（html.mh-light）
   备注：想整体调快/调慢入场，只改第 6 区里的秒数即可。
   ============================================================ */

/* ============================================================
   nav-v2.css · 子页统一导航（和主页同一套胶囊玻璃条）
   ============================================================ */
.nv-sprite{position:absolute;width:0;height:0;overflow:hidden;}

.nv-bar{
  /* 不再做独立黑胶囊：贴边透明条，靠顶部渐变把照片压暗一点 */
  position:sticky;top:0;z-index:60;
  padding:0;margin:0;height:64px;
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(12,13,19,.72) 0%,rgba(12,13,19,.38) 58%,rgba(12,13,19,0) 100%);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
}
.nv-in{
  /* 去掉胶囊外框：无边框、无圆角、无阴影，只有内容浮在背景上 */
  display:flex;align-items:center;gap:14px;
  width:min(1280px,calc(100% - 44px));height:56px;margin:0 auto;padding:0 4px;
  border:0;border-radius:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nv-brand{display:flex;align-items:center;gap:9px;flex:none;color:#fff;text-decoration:none;}
.nv-mark{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);color:#a0a0ff;background:rgba(255,255,255,.08);
  flex:none;
}
.nv-mark svg{width:15px;height:15px;}
.nv-name{font-size:13.5px;letter-spacing:.1em;white-space:nowrap;color:#f2f3f7;}

.nv-bar .nav-links{display:flex;align-items:center;gap:2px;margin:0 auto;}
.nv-bar .nav-links a{
  position:relative;display:flex;align-items:center;gap:6px;
  height:34px;padding:0 10px;border-radius:9px;
  font-size:12.5px;letter-spacing:.06em;white-space:nowrap;
  color:rgba(255,255,255,.66);text-decoration:none;
  transition:color .2s,background .2s,transform .2s;
}
.nv-bar .nav-links a svg{width:14px;height:14px;opacity:.85;}
.nv-bar .nav-links a:hover{color:#fff;background:rgba(255,255,255,.1);transform:translateY(-1px);}
.nv-bar .nav-links a.is-active{color:#fff;}
.nv-bar .nav-links a.is-active::after{
  content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;
  background:#a0a0ff;
}

.nv-tools{display:flex;align-items:center;gap:6px;flex:none;}
.nv-tools > *{
  --h:268;
  position:relative;display:grid;place-items:center;
  width:34px;height:34px;border-radius:9px;padding:0;
  border:1px solid hsl(var(--h) 90% 74% / .34);
  background:linear-gradient(160deg,hsl(var(--h) 92% 68% / .30),hsl(var(--h) 92% 62% / .12));
  color:hsl(var(--h) 92% 78%);
  box-shadow:0 7px 16px -10px hsl(var(--h) 90% 60% / .85),inset 0 1px 0 hsl(var(--h) 100% 92% / .22);
  cursor:pointer;text-decoration:none;
  transition:transform .18s ease,background .25s ease,box-shadow .25s ease,color .25s ease;
}
.nv-tools > *:nth-child(1){--h:268;}
.nv-tools > *:nth-child(2){--h:196;}
.nv-tools > *:nth-child(3){--h:38;}
.nv-tools > *:nth-child(4){--h:318;}
.nv-tools > *:nth-child(5){--h:158;}
.nv-tools > *:hover{
  color:hsl(var(--h) 100% 88%);
  background:linear-gradient(160deg,hsl(var(--h) 96% 72% / .46),hsl(var(--h) 96% 62% / .20));
  transform:translateY(-2px);
  box-shadow:0 12px 24px -12px hsl(var(--h) 90% 62% / .95);
}
.nv-tools > *:active{transform:scale(.94);}
.nv-tools > * svg{width:15px;height:15px;}
.nv-tools #modeToggle{
  width:auto;min-width:34px;padding:0 9px;gap:5px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:.06em;
}
.nv-tools #modeToggle svg{width:13px;height:13px;}

.nv-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;
  border-radius:9px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);cursor:pointer;}
.nv-burger i{display:block;width:16px;height:1.6px;margin:0 auto;background:rgba(255,255,255,.8);border-radius:2px;}

@media (max-width:1024px){
  .nv-bar .nav-links{gap:0;}
  .nv-bar .nav-links a{padding:0 8px;font-size:12px;}
  .nv-name{font-size:12px;letter-spacing:.06em;opacity:.92;}
}
@media (max-width:767px){
  .nv-name{font-size:11px;letter-spacing:0;}
  .nv-bar{top:0;padding:0;height:58px;}
  .nv-in{height:52px;gap:8px;padding:0 10px;width:calc(100% - 22px);}
  .nv-bar .nav-links{position:absolute;top:58px;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px 12px 14px;
    border-radius:0;
    background:linear-gradient(180deg,rgba(12,13,19,.95),rgba(12,13,19,.88));
    border:0;box-shadow:0 22px 44px -30px rgba(0,0,0,.7);
    backdrop-filter:blur(20px) saturate(1.1);}
  .nv-bar .nav-links.is-open{display:flex;}
  .nv-burger{display:flex;}
  .nv-tools > *:nth-child(2),
  .nv-tools > *:nth-child(3),
  .nv-tools > *:nth-child(4){display:none;}
}

/* ---------- 亮色态 ---------- */
html.mh-light body .nv-in{background:none;border:0;box-shadow:none;}
html.mh-light .nv-bar{background:linear-gradient(180deg,rgba(246,248,252,.92) 0%,rgba(246,248,252,.52) 58%,rgba(246,248,252,0) 100%);}
html.mh-light body .nv-name{color:#15161f;}
html.mh-light body .nv-mark{color:#6b6bf0;border-color:rgba(124,124,242,.28);background:rgba(124,124,242,.1);}
html.mh-light body .nv-bar .nav-links a{color:rgba(21,22,31,.68);}
html.mh-light body .nv-bar .nav-links a:hover{color:#15161f;background:rgba(124,124,242,.12);}
html.mh-light body .nv-bar .nav-links a.is-active{color:#15161f;}
html.mh-light body .nv-bar .nav-links a.is-active::after{background:#7c7cf2;}
html.mh-light body .nv-tools > *{
  color:hsl(var(--h) 72% 42%);
  border-color:hsl(var(--h) 80% 58% / .4);
  background:linear-gradient(160deg,hsl(var(--h) 90% 76% / .55),hsl(var(--h) 90% 82% / .3));
  box-shadow:0 6px 14px -10px hsl(var(--h) 70% 50% / .6);
}
html.mh-light body .nv-tools > *:hover{
  color:hsl(var(--h) 78% 34%);
  background:linear-gradient(160deg,hsl(var(--h) 92% 72% / .8),hsl(var(--h) 92% 78% / .5));
}
html.mh-light body .nv-burger{border-color:rgba(21,22,31,.14);background:rgba(124,124,242,.1);}
html.mh-light body .nv-burger i{background:rgba(21,22,31,.7);}

/* ---------- 滑动导航胶囊：彩色 + 流动动画 ---------- */
#thoughtTocWrap > *,
#placeTocWrap > *{
  background-size:200% 200% !important;
  background-position:0% 50%;
  border:1px solid rgba(255,255,255,.18);
  color:#fff !important;
  font-weight:500;
  letter-spacing:.02em;
  animation:tocFlow 7s ease-in-out infinite;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  box-shadow:0 6px 16px -12px rgba(0,0,0,.9);
}
#thoughtTocWrap > *:hover,
#placeTocWrap > *:hover{
  transform:translateY(-2px) scale(1.03);
  filter:brightness(1.08) saturate(1.15);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.95);
}
@keyframes tocFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@media (prefers-reduced-motion: reduce){
  #thoughtTocWrap > *, #placeTocWrap > *{animation:none;}
}

/* ---------- 每个子页一条不同的导航入场（小巧思） ---------- */
@keyframes nvInLeft{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:none;}}
@keyframes nvInTop{from{opacity:0;transform:translateY(-18px) scale(.985);}to{opacity:1;transform:none;}}
@keyframes nvInZoom{from{opacity:0;transform:scale(.94);filter:blur(6px);}to{opacity:1;transform:none;filter:none;}}
@keyframes nvInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@keyframes nvInSoft{from{opacity:0;transform:translateY(-10px);filter:blur(4px);}to{opacity:1;transform:none;filter:none;}}
@keyframes nvMarkSpin{from{transform:rotate(-24deg) scale(.86);}to{transform:rotate(0) scale(1);}}
@keyframes nvBarGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* 入场节奏整体放慢：导航、品牌、指示条 */
.nv-in{animation:nvInSoft 1.15s cubic-bezier(.16,.84,.3,1) both;}
.nv-mark{animation:nvMarkSpin 1.35s .3s cubic-bezier(.16,.84,.3,1) both;}
.nv-bar .nav-links a.is-active::after{transform-origin:left center;animation:nvBarGrow 1.1s .55s cubic-bezier(.16,.84,.3,1) both;}

body[data-page="thoughts"] .nv-in{animation:nvInLeft 1.2s cubic-bezier(.16,.84,.3,1) both;}
body[data-page="travel"] .nv-in{animation:nvInTop 1.15s cubic-bezier(.16,.84,.3,1) both;}
body[data-page="tech"] .nv-in{animation:nvInZoom 1.45s cubic-bezier(.16,.84,.3,1) both;}
body[data-page="characters"] .nv-in{animation:nvInUp .9s cubic-bezier(.16,.84,.3,1) both;}
body[data-page="about"] .nv-in{animation:nvInSoft 1.35s ease-out both;}
body[data-page="log"] .nv-in{animation:nvInLeft 1.1s cubic-bezier(.16,.84,.3,1) both;}
body[data-page="e404"] .nv-in{animation:nvInZoom 1.15s cubic-bezier(.16,.84,.3,1) both;}
body[data-page="doc"] .nv-in{animation:nvInTop 1.1s cubic-bezier(.16,.84,.3,1) both;}

/* 内容块：每页一条不同的起身动画，错开一拍慢慢浮上来 */
@keyframes mhRise{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
@keyframes mhSlideRight{from{opacity:0;transform:translateX(-24px);}to{opacity:1;transform:none;}}
@keyframes mhGrowFade{from{opacity:0;transform:scale(.965);}to{opacity:1;transform:none;}}
@keyframes mhSoftBlur{from{opacity:0;filter:blur(7px);}to{opacity:1;filter:none;}}

body[data-page="thoughts"] .mh-content{animation:mhSlideRight 1.35s cubic-bezier(.16,.84,.3,1) .28s both;}
body[data-page="tech"] .mh-content{animation:mhGrowFade 1.4s cubic-bezier(.16,.84,.3,1) .28s both;}
body[data-page="travel"] .mh-content{animation:mhRise 1.35s cubic-bezier(.16,.84,.3,1) .28s both;}
body[data-page="characters"] .mh-content{animation:mhSoftBlur .95s ease-out .06s both;}
body[data-page="about"] .mh-content{animation:mhRise 1.45s cubic-bezier(.16,.84,.3,1) .3s both;}

/* 卡片再错开一点，别整块一起弹上来 */
body[data-page="thoughts"] .mh-content > *:nth-child(2){animation:mhRise 1.1s .45s both;}
body[data-page="thoughts"] .mh-content > *:nth-child(3){animation:mhRise 1.1s .6s both;}
body[data-page="tech"] .mh-content > *:nth-child(2){animation:mhRise 1.1s .48s both;}
body[data-page="tech"] .mh-content > *:nth-child(3){animation:mhRise 1.1s .64s both;}

/* 横幅比导航晚一拍 */
body[data-page="thoughts"] .banner-box{animation:nvInLeft 1.5s cubic-bezier(.16,.84,.3,1) .18s both;}
body[data-page="travel"] .banner-box{animation:nvInTop 1.4s cubic-bezier(.16,.84,.3,1) .18s both;}
body[data-page="tech"] .banner-box{animation:nvInZoom 1.6s cubic-bezier(.16,.84,.3,1) .18s both;}
body[data-page="characters"] .banner-box{animation:nvInUp .95s cubic-bezier(.16,.84,.3,1) .05s both;}
body[data-page="about"] .banner-box{animation:nvInSoft 1.55s ease-out .18s both;}

@media (prefers-reduced-motion: reduce){
  .nv-in,.nv-mark,.nv-bar .nav-links a.is-active::after,
  body[data-page] .banner-box, body[data-page] .mh-content,
  body[data-page] .mh-content > *{animation:none !important;}
}

/* 亮色：移动端下拉菜单也跟着变浅 */
html.mh-light body .nv-bar .nav-links{
  background:linear-gradient(180deg,rgba(250,252,255,.97),rgba(246,249,253,.93));
  box-shadow:0 22px 44px -30px rgba(21,22,31,.4);
}

/* ------------------------------------------------------------
   亮色导航（两端口径：html.mh-light 或 body.mh-light 都认）
   ------------------------------------------------------------ */
html.mh-light .nv-bar .nav-links a,body.mh-light .nv-bar .nav-links a{
  color:rgba(21,22,31,.78) !important;
}
html.mh-light .nv-bar .nav-links a.is-active,body.mh-light .nv-bar .nav-links a.is-active{
  color:#15161f !important;
}
html.mh-light .nv-bar .nv-name,body.mh-light .nv-bar .nv-name{
  color:#15161f !important;
}
html.mh-light .nv-bar .nv-brand svg,body.mh-light .nv-bar .nv-brand svg{
  color:#6f6ff0 !important;
}
html.mh-light .nv-bar .nv-tools > *,body.mh-light .nv-bar .nv-tools > *{
  border-color:rgba(21,22,31,.16) !important;
  box-shadow:0 10px 20px -16px rgba(21,22,31,.6) !important;
}
html.mh-light .nv-burger i,body.mh-light .nv-burger i{background:rgba(21,22,31,.72) !important;}

/* 首页亮色（首页用 body.is-light 这套开关，不是 mh-light） */
body.is-light .nv-bar .nav-links a{color:rgba(21,22,31,.80) !important;}
body.is-light .nv-bar .nav-links a.is-active{color:#15161f !important;}
body.is-light .nv-bar .nv-name{color:#15161f !important;}
body.is-light .nv-bar .nv-brand svg{color:#6f6ff0 !important;}
body.is-light .nv-bar .nv-tools > *{
  border-color:rgba(21,22,31,.16) !important;
  box-shadow:0 10px 20px -16px rgba(21,22,31,.6) !important;
}


/* ============================================================
   导航可读性加强（2026-11-08 夜）
   问题：子页照片亮的时候，贴顶那条暗色渐变被看成"一条黑纱"，字还是看不清。
   做法：把暗色几乎去掉，改成让文字自己带描边阴影——照片再亮也压得住，
        条子本身却几乎看不见，跟主页一样是"浮"在照片上。
   想再暗一点：调 .nv-bar 里那几个 alpha（第一个是最顶上的浓度）。
   ============================================================ */
.nv-bar{
  background:linear-gradient(180deg,rgba(8,9,14,.30) 0%,rgba(8,9,14,.16) 54%,rgba(8,9,14,.04) 80%,rgba(8,9,14,0) 100%);
}
.nv-bar .nv-name,
.nv-bar .nv-brand,
.nv-bar .nav-links a{
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 3px 14px rgba(0,0,0,.75);
}
.nv-bar .nav-links a{color:rgba(255,255,255,.92);}
.nv-bar .nav-links a:hover{color:#fff;}
.nv-mark{background:rgba(255,255,255,.14);}

/* 亮色态：白纱收薄，文字转深色 + 白描边 */
html.mh-light .nv-bar{
  background:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.52) 56%,rgba(255,255,255,.12) 82%,rgba(255,255,255,0) 100%);
}
html.mh-light .nv-bar .nv-name,
html.mh-light .nv-bar .nav-links a{
  color:#15161f;
  text-shadow:0 1px 2px rgba(255,255,255,.95),0 3px 12px rgba(255,255,255,.8);
}
html.mh-light .nv-bar .nav-links a.is-active{color:#3a3a9e;}


/* ============================================================
   导航彻底透背景（2026-11-08 深夜 · 「像主页那样透」）
   首屏：background:none + 不做模糊，照片原样透过来，只剩文字描边阴影；
   滚下去（>70px）：才补一层淡底 + 模糊，压住下面滚上来的正文。
   想改滚动阈值 → 去 static/js/site-common.js 里 navScroll() 的 70。
   ============================================================ */
.nv-bar{
  background:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:0;box-shadow:none;
}
.nv-bar.is-stuck{
  background:rgba(10,11,17,.58) !important;
  backdrop-filter:blur(14px) saturate(1.05) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.05) !important;
}
html.mh-light .nv-bar{
  background:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html.mh-light .nv-bar.is-stuck{
  background:rgba(255,255,255,.80) !important;
  backdrop-filter:blur(14px) saturate(1.04) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.04) !important;
}
/* 透明底上，品牌名和工具小圆点也得站得住 */
.nv-bar .nv-name{color:#f4f5f9;}
html.mh-light .nv-bar .nv-name{color:#15161f;}
.nv-bar .nv-tools > *{background:rgba(255,255,255,.13);}
html.mh-light .nv-bar .nv-tools > *{background:rgba(255,255,255,.55);}