/* ============================================================
   neon.css — 3D 场景霓虹增强
   1. 饱和度/对比度滤镜让粒子线框色彩更炸
   2. 叠加流动极光层(screen 混色)增加氛围
   3. 屏幕四角暗角聚焦视线
   ============================================================ */

/* 3D 画布:色彩增强 + 微弱外发光 */
canvas#canvas {
  filter: saturate(1.45) contrast(1.12) brightness(1.06);
}

/* 极光氛围层(与 3D 画面 screen 混色,只提亮不遮盖) */
#aurora-fx {
  position: fixed;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .55;
  background:
    radial-gradient(38% 42% at 18% 28%, rgba(64,110,255, .20), transparent 70%),
    radial-gradient(30% 38% at 82% 22%, rgba(0,220,255,  .14), transparent 70%),
    radial-gradient(34% 40% at 70% 78%, rgba(255,60,140, .12), transparent 70%),
    radial-gradient(40% 45% at 30% 80%, rgba(120,80,255, .12), transparent 70%);
  animation: aurora-drift 16s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  50%  { transform: translate(2.5%,-2%) rotate(1.5deg) scale(1.06); }
  100% { transform: translate(-2%,2.5%) rotate(-1.2deg) scale(1.03); }
}

/* 暗角:聚焦中心人物 */
#vignette-fx {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 105% 88% at 50% 46%, transparent 58%, rgba(0,0,10,.5) 100%);
}

/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  #aurora-fx { animation: none; }
}


/* ============================================================
   移动端汉堡菜单（轻量浮层）
   - 按钮沿用原主题的汉堡图标与 .is-selected 叉号动画
   - 展开状态由 <html class="is-mobile-menu-open"> 驱动（见 index.js）
   ============================================================ */
@media (max-width: 1280px) {
  /* 内容区与画布对齐到视口顶部（配合 matrix.min.js 全高画布补丁，消除顶部/底部黑条） */
  #main {
    top: 0 !important;
  }

  /* 按钮保持在最上层，保证浮层展开后仍可点击关闭 */
  #header-menu-btn {
    display: block !important;
    z-index: 3001;
    cursor: pointer;
  }

  /* 菜单容器改为顶部下拉浮层（默认隐藏，用透明度+位移过渡） */
  #header-menu {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    float: none;
    margin: 0;
    padding: 110px 28px 26px;
    list-style: none;
    text-align: left;
    background: rgba(8, 8, 14, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 18px 18px;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -14px, 0);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 3000;
  }
  html.is-mobile-menu-open #header-menu {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }

  /* 菜单项纵向排列 */
  #header-menu li.header-menu-item {
    float: none;
    display: block;
  }
  #header-menu li.header-menu-item a {
    display: block;
    padding: 14px 4px;
    color: #fff;
    font-size: 18px;
    letter-spacing: .08em;
    text-decoration: none;
  }
}