/* ==========================================================================
   layout.css — 布局骨架：左侧栏目固定 + 右侧滚动主区（design.md §2.1 / §5.4）
   同时包含左侧栏目（sidebar.js 渲染结构）与全局背景（bg.js 注入结构）的样式。
   ========================================================================== */

/* ---------- 骨架 ---------- */

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 28px 20px;
  background: rgba(11, 17, 32, .82); /* --bg-1 微透，压在毛玻璃背景上 */
  border-right: 1px solid var(--line);
}

#main {
  position: relative;
  z-index: 10;             /* 高于 #app-bg(z-index:0)，低于 #sidebar */
  margin-left: var(--sidebar-w);
  min-height: 100vh;
}

#page {
  position: relative;
  min-height: 100vh;
}

/* 界面 4 · 沉浸式阅读（#/read/<id>）：无左侧栏目（design.md §2.2） */
body[data-route="read"] #sidebar { display: none; }
body[data-route="read"] #main { margin-left: 0; }

/* ---------- 左侧栏目内容（sidebar.js 渲染） ---------- */

.sidebar-logo {
  display: block;
  width: 150px;               /* MINDSEC GO 英文横版字标（约 10:1），放宽槽位保证可读 */
  margin: 4px 0 40px 6px;
}
.sidebar-logo img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s cubic-bezier(.22, 1, .36, 1);
}
/* 小 LOGO 悬停轻微脉冲（无限动画之外的单击式脉冲，仍做降级保护） */
@media (prefers-reduced-motion: no-preference) {
  .sidebar-logo:hover img {
    animation: sidebar-logo-pulse .6s cubic-bezier(.22, 1, .36, 1);
  }
}
@keyframes sidebar-logo-pulse {
  0%   { transform: scale(1);    opacity: 1;   }
  40%  { transform: scale(1.09); opacity: .85; }
  100% { transform: scale(1);    opacity: 1;   }
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 导航项：HUD 风格——左侧指示条滑入 + 编号显现 + 文字微位移 + 当前项锐角括号 */
.nav-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 11px 14px 11px 18px;
  border-radius: 2px; /* 锐角，贴合工业 HUD 语言 */
  color: var(--muted);
  font-size: 15px;
  letter-spacing: .12em;
  text-align: left;
  transition: color .25s cubic-bezier(.22, 1, .36, 1),
              background-color .25s cubic-bezier(.22, 1, .36, 1);
}
/* 左侧指示条：默认收起，悬停/激活时纵向滑入展开 */
.nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 62%;
  background: var(--accent-cyan);
  transform: translate(-5px, -50%) scaleY(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.nav-item:hover::before {
  transform: translate(0, -50%) scaleY(.55);
  background: var(--accent);
}
.nav-item.is-active::before {
  transform: translate(0, -50%) scaleY(1);
}
/* 技术标注式小字编号 01–05：默认隐藏，悬停/激活时滑入显现 */
.nav-num {
  flex: none;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s cubic-bezier(.22, 1, .36, 1),
              transform .25s cubic-bezier(.22, 1, .36, 1);
}
.nav-item:hover .nav-num,
.nav-item.is-active .nav-num {
  opacity: .9;
  transform: translateX(0);
}
/* 文字微位移 */
.nav-label {
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.nav-item:hover .nav-label { transform: translateX(3px); }
/* 当前项锐角括号装饰「 」 */
.nav-label::before,
.nav-label::after {
  color: var(--accent-cyan);
  opacity: 0;
  transition: opacity .25s cubic-bezier(.22, 1, .36, 1);
}
.nav-label::before { content: "「\00a0"; }
.nav-label::after  { content: "\00a0」"; }
.nav-item.is-active .nav-label::before,
.nav-item.is-active .nav-label::after { opacity: .95; }

.nav-item:hover {
  color: var(--ink);
  background: rgba(77, 141, 255, .08);
}
.nav-item.is-active {
  color: var(--accent-cyan);
  background: rgba(77, 141, 255, .14);
}

/* ---------- 全局毛玻璃平面动效背景（bg.js 注入 #app-bg） ---------- */

#app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-0);
  transition: opacity .5s ease;
}
#app-bg.is-hidden { opacity: 0; }

#app-bg .bg-blur {
  position: absolute;
  inset: -12%;
  filter: blur(90px); /* 重度高斯模糊层 */
}

#app-bg .blob {
  position: absolute;
  border-radius: 50%;
  opacity: .5;
  will-change: transform; /* 动效只用 transform/opacity（§4） */
}

/* 色块漂移 keyframes（仅 transform）；无限动画统一包在 no-preference 内降级 */
@keyframes bg-drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(7vw, -5vh) scale(1.18); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes bg-drift-b {
  0%   { transform: translate(0, 0) scale(1.1); }
  50%  { transform: translate(-6vw, 6vh) scale(.92); }
  100% { transform: translate(0, 0) scale(1.1); }
}
@keyframes bg-drift-c {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(4vw, 7vh) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: no-preference) {
  #app-bg .blob {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  #app-bg .blob--a { animation-name: bg-drift-a; }
  #app-bg .blob--b { animation-name: bg-drift-b; }
  #app-bg .blob--c { animation-name: bg-drift-c; }
}

/* ---------- 背景 HUD 叠加层（bg.js 注入 .bg-hud，位于模糊层之上） ---------- */
/* 性能约束：不新增大面积模糊层，靠低不透明度保持「朦胧」观感 */

#app-bg .bg-hud {
  position: absolute;
  inset: 0;
}

/* 细网格线层 */
#app-bg .bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(140, 170, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 170, 255, .05) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* 缓慢扫过的扫描线（纵向往复，仅 transform + 低透明渐变） */
#app-bg .bg-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 180px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(53, 224, 255, .05) 45%,
    rgba(53, 224, 255, .09) 50%,
    rgba(53, 224, 255, .05) 55%,
    transparent 100%
  );
  transform: translateY(-30vh);
  will-change: transform;
}
@keyframes bg-scan-sweep {
  0%   { transform: translateY(-30vh); }
  100% { transform: translateY(115vh); }
}
@media (prefers-reduced-motion: no-preference) {
  #app-bg .bg-scanline { animation: bg-scan-sweep 9s linear infinite; }
}

/* 漂浮几何碎形：三角形 / 十字 / 方块（纯 CSS 绘制，仅 transform 漂浮） */
#app-bg .frag {
  position: absolute;
  will-change: transform;
}
#app-bg .frag--tri {
  background: var(--accent-cyan);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
#app-bg .frag--square {
  background: var(--accent);
}
#app-bg .frag--cross { background: none; }
#app-bg .frag--cross::before,
#app-bg .frag--cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--accent-cyan);
}
#app-bg .frag--cross::before {
  width: 100%;
  height: 2px;
  transform: translate(-50%, -50%);
}
#app-bg .frag--cross::after {
  width: 2px;
  height: 100%;
  transform: translate(-50%, -50%);
}
@keyframes bg-frag-float {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(12px, -18px) rotate(50deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: no-preference) {
  #app-bg .frag {
    animation-name: bg-frag-float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
}