/* ============================================================
   全站分段选项框（iOS 26 Liquid Glass 液态玻璃）
   弦音 2026-10-05 建
   08:53 一调：缩小 + 去渐变
   09:00 二调：选中块改玻璃；悬停果冻 + 高光
   09:05 三调：真折射（SVG feDisplacementMap #segLens）
   09:15 四调（音心）：
     - 放大（加高，不扁）
     - 去掉所有边框线
     - 悬停改为：整体放大弹回 + 鼠标位置为圆心的跟随高光
       （删掉之前的果冻弹跳和闪光划过）
   09:22 五调（音心）：默认态不能带光 —— 玻璃材质本身不带光，
         光只在鼠标交互（悬停）时出现；删除所有默认内发光
   09:26 六调（音心）：去掉阴影 —— 任务栏玻璃不投阴影
   09:34 八调（音心）：指定配色 —— 浅：#eeeef1 / #626265 / #000000；
         深：#1b1b1b / #a4a4a4 / #f3f3f3
   09:45 十调（音心）：实色底把液态玻璃效果盖没了 → 底色改同色
         半透明版（纯色背景上渲染色值不变，透视/折射回来）
   16:55（音心）：把选项卡移入导航栏 —— 桌面顶位 66→3px（栏内居中）；
         竖屏 58→52px（配合导航栏加高 108px），导航栏玻璃底见各站 style.css
   16:58（音心：与导航元素协调）：整体再缩一档 —— 桌面高 58→44、竖屏 47→41；手机栏高 108→102
   16:56（音心）：选中块调透（0.72→0.35）；导航栏背景撤回（.glass 回透明，见各站 style.css）
   17:21（音心·苹果参考·选中胶囊）：改实色平铺——浅 #ededed / 深 #3a3a3a；去拟物（删高光/阴影/模糊）
   18:08（音心）：胶囊底色——浅 #fefefd / 深 #181818 的同色半透明版（浅 rgba(255,255,255,.6) / 深 rgba(40,40,40,.6)）
   18:18（音心）：中英文高度统一——固定行高（桌面 16px / 竖屏 15px，按英文的扁度）
   18:44（音心）：①点击/悬停文字不缩放 ②选中文字=主题蓝 var(--poem-c1) ③胶囊边缘玻璃丝（细内边高光）
   18:05（音心：苹果是有透明的）：选中胶囊改「同色半透明版」——渲染值不变、内容可透出
   17:05（音心·苹果参考）：选中底块几乎全透明（0.35→0.15 / 深 0.06）、选中文字加粗；
         滑动指示块保留（极淡玻璃，经过内容时隐约可见）
   10-06（音心）：加回「果冻效果」——悬停整条弹簧放大（scale 1.06）+ 移开弹回 = 音心定义的果冻；
          （注：Q 弹抖动不是她说的果冻，勿再加）
   10-06（音心）：悬停去回弹——曲线 .38s cubic-bezier(.25,.1,.25,1)（平滑过渡）
   10-06 17:00（音心）：手机端再收紧——竖屏宽 312→296
   10-06 19:1x（音心）：再收紧一档——竖屏宽 296→280
   10-07 13:2x（音心）：再收紧一档——竖屏宽 280→264
   ============================================================ */

/* SVG 滤镜容器（#segLens 定义在 nav.html，不占布局） */
.seg-defs{
  position:absolute;
  top:0;left:0;
  width:0;height:0;
  overflow:hidden;
  pointer-events:none;
}

.seg{
  position:fixed;
  top:10px; /* 2026-10-05：栏内居中（整体缩一档后，高≈44） */
  left:50%;
  transform:translateX(-50%);
  z-index:999;

  display:flex;
  align-items:stretch;
  width:min(360px, calc(100vw - 48px));
  padding:3px;
  border-radius:999px;

  /* 底色（音心 18:08 指定 #fefefd 的同色半透明版；在页面纯色上渲染 ≈ #f9f9f9（为保住玻璃透视微调），
     内容经过时能透出来 + 折射 —— 液态玻璃） */
  background:rgba(255,255,255,0.6); /* 18:12（音心：玻璃效果回来）：0.9→0.6，纯色底渲染≈#f9f9f9，可透视 */
  /* 回退（不支持 url() 折射时）：普通毛玻璃 */
  -webkit-backdrop-filter:blur(14px) saturate(190%);
  backdrop-filter:blur(14px) saturate(190%);
  /* 支持时：轻微模糊 + 折射扭曲（背景被弯曲，像真玻璃） */
  -webkit-backdrop-filter:blur(2px) saturate(190%) url(#segLens);
  backdrop-filter:blur(2px) saturate(190%) url(#segLens);
  /* 18:44（音心）：胶囊边缘加一点玻璃丝 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(0,0,0,.055);

  /* 悬停放大（弹簧）+ 背景过渡；移开自动弹回 */
  transition:transform .38s cubic-bezier(.25,.1,.25,1),
             background .3s ease;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ---- 悬停：整体放大 + 以鼠标为圆心的跟随高光（音心说的「果冻」=弹簧放大、移开弹回） ---- */
.seg:hover{
  transform:translateX(-50%) scale(1.06);
}

/* 高光层：radial 光斑，圆心由 JS 写成 --mx/--my（百分比），随鼠标移动 */
.seg-shine{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s ease;
  background:radial-gradient(circle 190px at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.16) 40%,
    rgba(255,255,255,0) 72%);
}
.seg:hover .seg-shine{opacity:1}

/* ---- 深色主题 ---- */
.dark .seg{
  /* #181818 的半透明版（在纯黑上渲染 = #181818） */
  background:rgba(40,40,40,0.6); /* 18:08（音心）：#181818 的同色半透明版（纯黑上渲染=#181818） */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.075); /* 18:44：玻璃丝（深色） */
}
.dark .seg-shine{
  background:radial-gradient(circle 190px at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.08) 42%,
    rgba(255,255,255,0) 72%);
}

/* ---- 选中指示块：通透玻璃胶囊（无边框线、无光、无阴影） ---- */
.seg-ind{
  position:absolute;
  top:3px;bottom:3px;left:3px;
  width:calc((100% - 6px) / 4);   /* 四等分 */
  border-radius:999px;

  background:rgba(225,225,225,0.6); /* 18:08：配合新胶囊底微调，纯色底渲染仍=#ededed */

  /* 苹果式弹簧：略过冲的回弹曲线 */
  transition:transform .5s cubic-bezier(.25,1.3,.45,1);
  will-change:transform;
}
.dark .seg-ind{
  background:rgba(80,80,80,0.6); /* 18:05（音心）：同色半透明版，纯色底上渲染≈#3a3a3a */
  }

/* ---- 每个选项（加高、放大） ---- */
.seg-item{
  position:relative;
  z-index:1;
  flex:1 1 0;                     /* 四等分，等宽 */
  display:flex;align-items:center;justify-content:center;
  min-width:0;
  padding:11px 5px;
  border-radius:999px;
  font-size:14px;font-weight:600;line-height:16px; /* 18:18（音心）：固定行高——中英文同高（按英文的扁） */
  letter-spacing:.2px;
  color:#626265; /* 音心指定：未选中 */
  text-align:center;white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .28s ease, background .25s ease,
             transform .22s cubic-bezier(.34,1.56,.64,1);
}
.seg-item [data-lang]{display:none}
.seg-item [data-lang].show{display:inline}

.dark .seg-item{color:#a4a4a4} /* 音心指定：深色未选中 */

.seg-item.active{color:var(--poem-c1,#2563eb);font-weight:700} /* 18:44（音心）：选中跟随主题蓝 */
.dark .seg-item.active{color:var(--poem-c1,#2563eb);font-weight:700} /* 18:44：跟主题蓝（深色） */

/* 悬停：轻微白色提亮（文字颜色不变） */
.seg-item:not(.active):hover{
  background:rgba(255,255,255,0.25); /* 16:58：调轻一档，保持比选中块轻 */
}
.dark .seg-item:not(.active):hover{
  background:rgba(255,255,255,0.08);
}


/* 键盘可达性 */
.seg-item:focus-visible{outline:2px solid var(--poem-c1);outline-offset:2px}
.seg-item:focus{outline:none}

/* ---- 竖屏（手机）：稍小一档 ---- */
@media (orientation:portrait){
  .seg{top:52px;width:min(264px, calc(100vw - 64px));padding:2px}
  .seg-ind{top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / 4)}
  .seg-item{padding:11px 3px;font-size:13px;line-height:15px;letter-spacing:0}
}

/* 极窄屏 */
@media (max-width:360px){
  .seg-item{font-size:11px}
}

/* 尊重系统「减弱动态效果」 */
@media (prefers-reduced-motion:reduce){
  .seg{transition:background .3s}
  .seg:hover{transform:translateX(-50%)}
  .seg-ind{transition:none}
  .seg-item{transition:color .2s, background .2s}
  .seg-item:active{transform:none}
  .seg-shine{transition:none}
}

/* ============================================================
   跨页内容转场 v2（2026-10-05 11:40 · 音心：导航栏/选项卡/页脚固定，仅内容动）
   退出：内容向前移一小段并淡出 → 内容区留空（= 加载态）
   进入：新内容从上一页离开的位置向后滑回、淡入贴住
   配合：seg.js v4（触发退出/写方向）+ nav-early.js（读方向触发进入）
   方向：f = 向后一页（内容向左前移），b = 向前一页（内容向右前移）
   ============================================================ */
html[data-nav], html[data-nav-exit]{
  overflow-x:hidden;
}
html[data-nav-exit="f"] .pagefx{animation:navOutF .26s cubic-bezier(.4,.05,.6,.95) forwards}
html[data-nav-exit="b"] .pagefx{animation:navOutB .26s cubic-bezier(.4,.05,.6,.95) forwards}
html[data-nav="f"] .pagefx{animation:navInF .46s cubic-bezier(.2,.9,.25,1) backwards}
html[data-nav="b"] .pagefx{animation:navInB .46s cubic-bezier(.2,.9,.25,1) backwards}
@keyframes navOutF{from{transform:translateX(0);opacity:1}to{transform:translateX(-28px);opacity:0}}
@keyframes navOutB{from{transform:translateX(0);opacity:1}to{transform:translateX(28px);opacity:0}}
@keyframes navInF{from{transform:translateX(-28px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes navInB{from{transform:translateX(28px);opacity:0}to{transform:translateX(0);opacity:1}}
@media (prefers-reduced-motion:reduce){
  html[data-nav] .pagefx, html[data-nav-exit] .pagefx{animation:none}
  html[data-nav], html[data-nav-exit]{overflow-x:visible}
}