/* ============================================================
   nixie.css —— 辉光管（Nixie tube）导航。
   只负责顶部导航的外观，布局在 base.css 的 .site-nav 里。
   想调辉光管的颜色、光晕、闪烁，只改这一个文件，不影响任何页面内容。

   真实辉光管的四个特征，这里都做了：
   1. 玻璃管外壳    —— 圆角矩形 + 顶部高光 + 内壁暗角
   2. 阳极网罩      —— 字符前面那层极细的横向金属网
   3. 未点亮的字符  —— 暗、灰、藏在玻璃后面
   4. 点亮的橙红辉光 —— 字发光 + 管内散射 + 管外溢光
   ============================================================ */

:root {
  --tube-glow:  #ff9a4d;                    /* 氖气点亮的琥珀橙 */
  --tube-halo:  rgba(255, 138, 61, .55);
  --tube-off:   #8a8377;                    /* 未点亮的字符：真实辉光管更暗，
                                               但导航必须读得清，靠「没有辉光」
                                               而不是靠「看不见」来表达未点亮 */
  --tube-glass: #14171a;                    /* 玻璃管内壁，比页面底色偏冷 */
}

.site-nav a {
  position: relative;
  isolation: isolate;
  color: var(--tube-off);
  border-radius: 5px;                       /* 玻璃管是圆角矩形，不是胶囊 */
  /* 玻璃管：上缘反光一道，往下渐暗 */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .06) 0%,
      rgba(255, 255, 255, .015) 18%,
      rgba(0, 0, 0, .25) 100%),
    var(--tube-glass);
  border: 1px solid #262b2c;
  /* 内壁暗角，让管子有厚度 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -6px 12px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}

/* 阳极网罩：极细的横向金属网，压在字符前面 */
.site-nav a::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: .5;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, .34) 0 1px,
    transparent 1px 3px
  );
}

/* 玻璃表面的斜向高光 */
.site-nav a::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(112deg,
    rgba(255, 255, 255, .10) 0%,
    rgba(255, 255, 255, 0) 38%);
}

/* ---------- 点亮 ---------- */

.site-nav a[aria-current="page"] {
  color: var(--tube-glow);
  border-color: #4a3524;
  /* 管内氖气散射 + 管外溢光 */
  background:
    radial-gradient(120% 150% at 50% 118%,
      rgba(255, 138, 61, .30) 0%,
      rgba(255, 138, 61, .07) 45%,
      transparent 72%),
    linear-gradient(180deg,
      rgba(255, 255, 255, .07) 0%,
      rgba(0, 0, 0, .22) 100%),
    var(--tube-glass);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -7px 14px rgba(255, 122, 47, .16),
    0 0 12px rgba(255, 138, 61, .20);
  /* 字符本体的辉光：近实远虚两层 */
  text-shadow:
    0 0 5px var(--tube-halo),
    0 0 14px rgba(255, 122, 47, .35);
}

/* 点亮的管子网罩要更淡，否则挡住辉光 */
.site-nav a[aria-current="page"]::before { opacity: .32; }

/* ---------- 未点亮的管子悬停：预热 ---------- */

@media (hover: hover) {
  .site-nav a:not([aria-current="page"]):hover {
    color: #b39a7d;
    border-color: #3a3a34;
    text-shadow: 0 0 6px rgba(255, 138, 61, .22);
  }
}

.site-nav a:active { transform: translateY(1px); }

/* ---------- 辉光的呼吸 ----------
   真实辉光管是稳定的，只有极轻微的电压波动。
   幅度刻意做得很小，做大了就变成廉价的霓虹灯闪烁。 */

@media (prefers-reduced-motion: no-preference) {
  .site-nav a { transition: color .22s ease, border-color .22s ease, text-shadow .22s ease; }

  .site-nav a[aria-current="page"] {
    animation: tube-breathe 4.5s ease-in-out infinite;
  }
}

@keyframes tube-breathe {
  0%, 100% { text-shadow: 0 0 5px var(--tube-halo), 0 0 14px rgba(255, 122, 47, .35); }
  42%      { text-shadow: 0 0 6px var(--tube-halo), 0 0 18px rgba(255, 122, 47, .44); }
  63%      { text-shadow: 0 0 5px var(--tube-halo), 0 0 12px rgba(255, 122, 47, .30); }
}