/* ==========================================================================
   HM·S//CORE · 个人技术终端 —— 极简工业机能 / 战术档案风
   分屏横向推拉版：stage 横向轨道，滚轮/触摸/导航驱动左右切换。
   直角体系：全局 0 圆角。动画：200-250ms 微过渡 + 620ms 页面推拉。
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 缓动曲线 token（动画优化 007）：站内曲线集中于此，勿在样式/JS 中再手写曲线字面量 */
  --ease-house: cubic-bezier(0.25, 0.1, 0.25, 1);   /* 站内主曲线（transition/WAAPI 通用） */
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);     /* 强 ease-out（进/退场轻快收尾） */
  --c-bg:        #000000;   /* 纯黑基底（粒子背景） */
  --c-bg-soft:   #0a0e14;
  --c-surface:   #10141a;
  --c-surface-2: #161c24;
  --c-border:    #222c38;
  --c-border-lt: #2f3a48;
  --c-text:      #f3f7fc;   /* 主文字：亮白，纯黑上高对比 */
  --c-text-sub:  #c4cfdd;   /* 副文字：明显提亮 */
  --c-text-dim:  #8d9aac;   /* 弱文字：可读性提升 */
  --c-primary:        #4cc3f0;
  --c-primary-hover:  #7dd9f6;
  --c-primary-dim:    rgba(76, 195, 240, 0.10);
  --c-primary-dim-2:  rgba(76, 195, 240, 0.16);
  --c-accent:   #8b8ef7;   /* 蓝紫第二强调：玻璃光斑/折射/点缀使用 */
  --c-kw:  #79c0ff;        /* 语法高亮：函数名（亮蓝） */
  --c-str: #a5e6a5;        /* 语法高亮：字符串（浅绿） */
  --c-bracket: #d4d4d4;    /* 语法高亮：括号/标点（灰白） */
  --c-warn:   #d9b23e;
  --c-danger: #c65a52;
  --c-green:  #67b98c;

  /* 玻璃拟态 / 苹果式光影 token（Radxa 低配如帧率不足可整体调淡或移除 backdrop-filter） */
  --glass-bg:   rgba(17, 22, 27, 0.55);   /* 玻璃表面底 */
  --glass-bg-2: rgba(26, 32, 38, 0.60);   /* 玻璃表面高亮底 */
  --glass-br:   rgba(255, 255, 255, 0.08);/* 玻璃描边 */
  --glass-hi:   rgba(255, 255, 255, 0.06);/* 玻璃顶部内高光 */
  --shadow-1:   0 12px 32px rgba(0, 0, 0, 0.30);
  --shadow-2:   0 20px 46px rgba(0, 0, 0, 0.45);

  --f-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Bahnschrift", "DIN Alternate", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --f-mono:    "SF Mono", "Cascadia Mono", "Consolas", "IBM Plex Mono", "DejaVu Sans Mono", monospace;

  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px;
  --fs-24: 24px; --fs-32: 32px; --fs-48: 48px; --fs-64: 64px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --nav-h: 64px;
  --max-w: 1240px;
  --gap: 20px;
  --radius: 0px;
  --radius-1: 1px;

  --t-fast: 200ms var(--ease-house);
  --t-sub:  400ms var(--ease-house);
  --t-card: 350ms var(--ease-house); /* 技能/动态卡 hover 展开节奏（动画优化 006） */
  --t-card-out: 1000ms var(--ease-house); /* 卡片 hover 收回(回基态)节奏：展开快、收缓慢(用户需求) */
  --card-persp: 1100px;              /* 技能卡 3D tilt 透视距离（越大越平缓；倾角见 main.js CFG.cardTilt） */
  --t-tilt: 80ms linear;             /* 技能卡 tilt 拖拽期轻跟随过渡（短、线性，避免滞后跟手） */
  --t-photo: 500ms var(--ease-house);        /* 折叠照片铺平 & 标题让位节奏（二者须同步同速，011） */
  --t-photo-stack: 1000ms var(--ease-house); /* 折叠照片斜片翻开/收回节奏（011） */

  /* ---- 动态卡片调参（发光渐变毛玻璃，移植 Glowing Gradient Glassmorphism Card）---- */
  --card-w: 320px;                    /* 卡片容器宽 */
  --card-h: 400px;                    /* 卡片容器高 */
  --card-mg-v: 40px;                  /* 卡片垂直外边距（间距） */
  --card-mg-h: 30px;                  /* 卡片水平外边距 */
  --card-radius: 12px;                /* 玻璃层/渐变层圆角（模板自带，区别于全局直角；较 8px 放大，玻璃卡片观感更柔和） */
  --card-glass-bg: rgba(255, 255, 255, 0.05);   /* 毛玻璃底色 */
  --card-glass-blur: 10px;            /* 毛玻璃模糊半径 */
  --card-text: #ffffff;               /* 卡片标题/主文字 */
  --card-text-sub: rgba(255, 255, 255, 0.78);   /* 卡片正文 */
  --card-text-dim: rgba(255, 255, 255, 0.62);   /* 日期弱文字 */
  --card-btn-bg: #ffffff;             /* Read Me 按钮底色 */
  --card-btn-fg: #111111;             /* Read Me 按钮文字 */
  --card-btn-bg-hover: #222222;       /* 按钮 hover 反白底 */
  /* 三张卡片各自渐变配色（模板原色：橙红/蓝红/绿青） */
  --card-grad-1: linear-gradient(315deg, #ffbc00, #ff0058);
  --card-grad-2: linear-gradient(315deg, #03a9f4, #ff0058);
  --card-grad-3: linear-gradient(315deg, #4dff03, #00d0ff);

  /* ---- 作品三卡轮播 token（CSS Cards 移植：仅轮换切换，无入场/背景联动） ---- */
  --wc-w: 270px;                   /* 卡宽 */
  --wc-h: 400px;                   /* 卡高 */
  --wc-t: 800ms;                   /* 轮换过渡时长 ms（类驱动 CSS 过渡，卡与文字同步） */

  /* ---- Footer 底部堆叠卡片 token（素材 css-simple-stack-card-hover-effect 搬运）---- */
  --sc-w: 150px;                   /* 单卡宽（原 300px 缩小一半；50% 缩放展示） */
  --sc-h: 150px;                   /* 单卡高（原 300px 缩小一半） */
  --sc-gap: 160px;                 /* hover 展开后相邻卡中心距（原 320px 同步减半） */
  --sc-cw: 200px;                  /* 容器宽：仅容纳堆叠态（hover 判定矩形，原素材 .container 400px 同比缩半） */
}

/* ---------- 2. 重置与基底 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: var(--radius); }

html, body { height: 100%; }

body {
  background: #000000;             /* 纯黑基底（粒子背景） */
  color: var(--c-text);
  font-family: var(--f-display);   /* 全局正文统一为首页按钮同款字体（SF Pro Display 系） */
  font-size: var(--fs-16);
  line-height: 1.7;
  overflow: hidden;                 /* 关闭纵向页面滚动，改由横向分屏接管 */
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;    /* 苹果式细字渲染 */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: flex;
  align-items: center;
  justify-content: center;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; }
::selection { background: var(--c-primary-dim-2); color: var(--c-text); }

/* 深色滚动条（面板内部滚动时出现） */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border: 2px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--c-border-lt); }

/*---------- 3. 全站纹理（低噪点屏幕肌理，保持干净科技感） ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 已移除扫描线层：CRT/废土感的主要来源 */

/* ---------- 3.5 全局背景氛围层（视口固定，不随翻页；低透明度，克制不花哨） ---------- */
.bg-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;                       /* 位于内容之下，仅透出微光氛围 */
  pointer-events: none;
  overflow: hidden;
  /* 纯黑背景：去掉背景光晕，粒子/连线自身辉光负责视觉 */
  background-image: none;
  background-color: transparent;
}
.bg-atmosphere canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* 边缘羽化层：CSS 径向渐变遮罩（由合成器处理，无每帧 canvas 开销），
   让粒子/连线越靠视口边缘越淡；两档百分比可调 */
.bg-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 1) 85%);
}
/* 灰色蒙版：纯黑背景下停用（如需氛围可调回原浓度） */
.bg-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(30, 36, 44, 0) 0%, rgba(15, 19, 25, 0.60) 100%);
}
/* 青蓝光晕：纯黑背景下停用（如需氛围可调回原浓度） */
.bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(62% 52% at 14% 10%, rgba(76, 195, 240, 0.20), transparent 70%),
    radial-gradient(52% 46% at 86% 86%, rgba(120, 170, 210, 0.12), transparent 70%);
}
.bg-atmosphere::before {
  content: "";
  position: absolute;
  top: 76px; left: 20px;
  width: 24px; height: 24px;
  border-left: 1px solid rgba(76, 195, 240, 0.22);
  border-top: 1px solid rgba(76, 195, 240, 0.22);
}
.bg-atmosphere::after {
  content: "";
  position: absolute;
  right: 20px; bottom: 20px;
  width: 24px; height: 24px;
  border-right: 1px solid rgba(76, 195, 240, 0.22);
  border-bottom: 1px solid rgba(76, 195, 240, 0.22);
}
.bg-coord {
  position: absolute;
  display: inline-flex;              /* 时钟两行纵向排列 + 右缘对齐 */
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4em;                        /* 时间/日期两行间距 */
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(228, 238, 248, 0.72);   /* 调亮：水印文字更清晰 */
  text-transform: uppercase;
  user-select: none;
}
.bg-coord-br { right: 26px; bottom: 30px; }

/* 非相邻跳转的两段式动画：当前屏滑出淡出，目标屏滑入淡入（不经过中间屏）
   时长须与 main.js CFG.stepExit(270)/stepEnter(300) 手动同步 */
.panel-anim-exit {
  animation: panelExit 0.26s var(--ease-house) forwards;   /* 曲线统一 house curve（012）；时长仍与 CFG.stepExit/stepEnter 契约同步 */
}
.panel-anim-enter {
  animation: panelEnter 0.28s var(--ease-house) forwards;
}
@keyframes panelExit {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-28px); }
}
@keyframes panelEnter {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 时间字符滚筒跳动：仅变化的数字从上方落下取代旧字，旧字保持不动 */
.clock-cell {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.clock-cell .cell-old { display: block; }
.clock-cell .cell-new {
  position: absolute;
  top: 0; left: 0;
  animation: cellDrop 0.3s ease-out;
}
@keyframes cellDrop {
  from { transform: translateY(-0.72em); opacity: 0.15; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---------- 4. 排版工具 ---------- */
.t-display { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; }  /* 中大字标题收紧字距（Apple 排版：字号越大 tracking 越紧） */
.t-mono { font-family: var(--f-mono); letter-spacing: 0.06em; }
.t-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.t-sub { color: var(--c-text-sub); }
.t-dim { color: var(--c-text-dim); }

/* ---------- 4.5 等比画布（设计基准 1440×900，任意屏同比缩放，布局恒不变） ---------- */
.app {
  position: relative;
  flex: none;
  width: 1440px;
  height: 900px;
  transform: scale(var(--app-scale, 1));
  transform-origin: center center;
}

/* ---------- 5. 横向分屏轨道 ---------- */
.stage {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  will-change: transform;
}

.panel {
  flex: 0 0 100%;                  /* 以等比画布为基准（非 100vw），保证平移步长与屏宽一致 */
  width: 100%;
  height: 100%;
  overflow-y: auto;                 /* 长内容面板内部滚动，滚到边界再翻页 */
  overflow-x: hidden;
  position: relative;
  scrollbar-width: none;            /* 隐藏面板内滚动条（仍可滚动，仅不显示） */
}
.panel::-webkit-scrollbar { display: none; }

/* 面板内容：flex 列 + auto margin 垂直居中；内容超高时自然从顶部溢出滚动 */
.section {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--nav-h) + var(--sp-4)) 0 24px;
  position: relative;               /* 供屏内绝对定位内容层使用 */
}
/* .section-alt 无独立样式：背景统一透明，透出视口固定底（body） */

.container { width: 100%; max-width: var(--max-w); margin: auto 0; padding: 0 var(--sp-5); }

/* 区块头 */
.sec-head { margin-bottom: var(--sp-5); }
#stacks .sec-head { margin-top: -80px; }                 /* 技能屏（能力方向）标题区上移 80px，配合左侧折叠照片构图 */
/* 照片铺平（JS 给 #stacks 加 .photo-open）时标题区左移 80px 让位，收起时回位；
   过渡时长 0.5s 与照片 .photo 铺平(transition 0.5s)同速同步 */
#stacks .sec-head { transition: transform var(--t-photo); }
#stacks.photo-open .sec-head { transform: translateX(-80px); }
.sec-head .line {
  width: 44px; height: 1px;
  background: var(--c-primary);
  margin: var(--sp-2) 0;
  transform-origin: left center;         /* 入场横向展开锚点(动画由 activatePanel 每次进屏播放，见 main.js) */
}
.sec-head h2 { font-size: 26px; line-height: 1.15; }
.sec-head .sub { margin-top: var(--sp-2); max-width: 46ch; }
.sec-head-flex { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
@media (min-width: 1025px) {
  .sec-head-flex { flex-wrap: nowrap; }
}

.hairline { height: 1px; background: var(--c-border); }

/* ---------- 6. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 22px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(20, 26, 32, 0.45);
  color: var(--c-text);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 18px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  user-select: none;
  white-space: nowrap;
}
.btn:hover {
  border-color: rgba(76, 195, 240, 0.60);
  color: var(--c-primary);
  background: rgba(76, 195, 240, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 26px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(76, 195, 240, 0.18), 0 0 26px rgba(76, 195, 240, 0.12);
}
.btn:active { background: rgba(76, 195, 240, 0.14); transform: translateY(1px); }
.btn:focus-visible { outline: 1px solid var(--c-primary); outline-offset: 2px; }
.btn-solid {
  background: linear-gradient(180deg, #5fd0f3, var(--c-primary));
  border-color: rgba(255, 255, 255, 0.18);
  color: #06121a;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 24px rgba(76, 195, 240, 0.28);
}
.btn-solid:hover {
  background: linear-gradient(180deg, #7dd9f6, #4cc3f0);
  border-color: rgba(255, 255, 255, 0.30);
  color: #06121a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 30px rgba(76, 195, 240, 0.38);
}
.btn-sm { padding: 6px 14px; font-size: 11px; }

/* ---------- 7. 标签 ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
  color: var(--c-text-sub);
  white-space: nowrap;
}
.tag::before { content: ""; width: 4px; height: 4px; background: currentColor; }
.tag-warn   { color: var(--c-warn);   border-color: rgba(217, 178, 62, 0.35); }
.tag-danger { color: var(--c-danger); border-color: rgba(198, 90, 82, 0.35); }

/* ---------- 8. 卡片（深色玻璃：渐变半透明 + 内顶高光 + 投影） ---------- */
.card {
  background: linear-gradient(180deg, var(--glass-bg-2), rgba(12, 16, 20, 0.50));
  border: 1px solid var(--glass-br);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-1);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  position: relative;
}
.card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(30, 37, 44, 0.62), rgba(16, 20, 25, 0.55));
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), var(--shadow-2);
}
.card-interactive:hover {
  border-color: rgba(76, 195, 240, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-2), 0 0 26px rgba(76, 195, 240, 0.10);
}
.card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--c-primary) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none;
}
.card-interactive:hover::before { opacity: 0.75; }

/* ---------- 9. 导航 ---------- */
.nav {
  position: fixed;                  /* 固定于浏览器视口顶部，全宽横贯 */
  top: 0; left: 0;
  width: 100vw;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(5, 6, 9, 0.42);   /* 玻璃导航：近黑半透明 + 背景模糊；透明度已提高(0.62→0.42)，不支持 blur 时回落为半透明 */
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--glass-br);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 28px rgba(0, 0, 0, 0.35);
}
.nav-inner {
  height: 100%;
  width: 100%;
  max-width: none;                 /* 覆盖 .container 的居中限制：导航内容横贯全宽 */
  display: flex;
  align-items: center;
  justify-content: center;         /* 标志 + 导航链接整体居中一行（移动端在下方媒体查询恢复两端） */
  gap: var(--sp-5);
  padding: 0 var(--sp-5);
}
.logo { display: flex; flex-direction: column; line-height: 1.1; user-select: none; }
.logo b { font-family: var(--f-display); font-size: var(--fs-20); letter-spacing: 0.14em; color: var(--c-text); }
.logo b em { font-style: normal; color: var(--c-primary); }
.logo span { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.3em; color: var(--c-text-dim); text-transform: uppercase; }

.nav-links {
  position: relative;
  display: flex;
  align-items: stretch;       /* 链接热区垂直撑满导航条（黑条）高度 */
  height: 100%;
  gap: var(--sp-5);
}
.nav-link {
  font-family: var(--f-display);   /* 与全局正文同款（SF Pro Display 系），中文渲染更统一 */
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-text-sub);
  height: 100%;               /* 上下方向判定范围 = 黑条全高 */
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  transition: color var(--t-fast);
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--c-text); }
.nav-link:focus-visible { outline: 1px solid var(--c-primary); outline-offset: 2px; } /* 键盘焦点可见 */
/* 当前屏指示条：确认态，切换时"旧条从左到右消失 → 新条从左到右长出"（JS 两段驱动） */
.nav-indicator {
  position: absolute;
  bottom: calc(50% - 10px);   /* 文字垂直居中于黑条，此值使蓝色条贴住文字下沿（约 20px 字高） */
  left: 0;
  width: 0;
  height: 1px;
  background: var(--c-primary);
  transform-origin: left center;             /* 生成方向：左端固定向右展开 */
  transition: transform 0.27s var(--ease-house);
  pointer-events: none;
  will-change: transform;
}
/* 悬停预览条：hover 目标下"从左到右生长"的淡蓝条；确认切换后由 JS 收起 */
.nav-preview {
  position: absolute;
  bottom: calc(50% - 10px);
  left: 0;
  width: 0;
  height: 1px;
  background: var(--c-primary);
  opacity: 0.42;                             /* 预览态弱于确认态 */
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform 0.27s var(--ease-house),
    left 0.27s var(--ease-house),
    width 0.27s var(--ease-house),
    opacity 0.22s ease;                      /* 收起用淡出，不做收缩变短 */
  pointer-events: none;
}
.nav-preview.no-trans { transition: none; }  /* 首次出现前的静默定位，禁用过渡 */

.nav-burger {
  display: none;
  width: 40px; height: 34px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--c-border);
  transition: border-color var(--t-fast), transform 140ms var(--ease-house);
}
.nav-burger:hover { border-color: var(--c-primary); }
.nav-burger:active { transform: scale(0.94); }   /* 按压反馈：近不可察档，点按"听见" */
.nav-burger i { width: 16px; height: 1px; background: var(--c-text); display: block; transition: background var(--t-fast); }
.nav-burger:hover i { background: var(--c-primary); }

.nav-menu {
  display: flex;                    /* 常驻渲染；用 visibility 控制显隐（可过渡） */
  position: fixed;                  /* 固定于视口，全宽横贯 */
  top: var(--nav-h);
  left: 0;
  width: 100vw;
  z-index: 99;
  flex-direction: column;
  background: rgba(7, 10, 14, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--glass-br);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 12px 32px rgba(0, 0, 0, 0.35);
  visibility: hidden;               /* 关闭态：淡出完成后才隐藏（visibility 由 transition 延迟） */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity var(--t-sub),
    transform var(--t-sub),
    visibility 0s linear var(--t-sub);   /* 关闭：先淡出再 hidden；打开：.open 内 0s 立即 visible */
}
.nav-menu.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity var(--t-sub),
    transform var(--t-sub),
    visibility 0s;                        /* 打开：visibility 立即生效，淡入正常播放 */
}
.nav-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-sub);
  border-bottom: 1px solid var(--c-border);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-menu a:hover, .nav-menu a.active { color: var(--c-primary); background: var(--c-primary-dim); }

/* ---------- 10. 首屏 Banner ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;       /* 内容在画布内垂直居中 */
  align-items: center;
  padding: 0 0 var(--sp-4);
  overflow: hidden;
  border-bottom: 1px solid var(--c-border);
  /* 背景透明：透出全局科技网格氛围层 */
}
/* 首页渐变罩：固定于视口（不随翻页平移），默认显现；切屏时由 JS 整体渐隐/渐现 */
.hero-grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background:
    linear-gradient(90deg, var(--c-bg) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 30%, transparent 70%, var(--c-bg) 100%);
}
.hero-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--sp-6);
}
.hero-copy { max-width: 620px; }
.hero-eyebrow { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.hero-eyebrow .eyebrow-line { width: 56px; height: 1px; background: var(--c-primary); box-shadow: 0 0 10px rgba(76, 195, 240, 0.6); }

.hero-title { font-size: 62px; line-height: 0.98; letter-spacing: -0.02em; color: var(--c-text); }   /* 62px 大字用负 tracking（Apple §15：display 字越大字距越紧），避免发虚 */
.hero-title .accent { color: var(--c-primary); }
/* 苹果式大标题：白→浅灰蓝纵向渐变（不支持 clip-text 时回落到上面的纯色） */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title {
    background: linear-gradient(180deg, #ffffff 26%, #b7c4d2 70%, #8fa2b4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hero-title .accent {
    background: linear-gradient(180deg, #a6e3f7 0%, #4cc3f0 55%, #2b9fd0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.hero-title .sub-line {
  display: block;
  font-size: 20px;
  font-weight: 400;
  color: var(--c-text-sub);
  margin-top: var(--sp-3);
  letter-spacing: 0.18em;
}
.hero-desc { margin: var(--sp-4) 0; max-width: 46ch; color: var(--c-text-sub); font-size: 15px; }
/* 正文发光投影：纯黑底上的微弱青蓝辉光，提升可读与科技感（标题渐变字不加，避免干扰） */
.hero-title .sub-line,
.hero-desc,
.hero-meta b,
.card p,
.profile-bio,
.tl-item p,
.footer-col p {
  text-shadow: 0 0 14px rgba(76, 195, 240, 0.18), 0 0 2px rgba(76, 195, 240, 0.10);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-2) 0;
}
.hero-meta span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--c-text-dim); text-transform: uppercase; }
.hero-meta b { color: var(--c-text); font-weight: 500; }
.hero-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  /* 容器 filter 已移除（动画优化 005）：常驻后处理层令按钮 hover 的 blur 流光每帧强制整层重 blend */
}

/* 对角镜面高光（仿视频 ::after：45° 双向白色渐变 + 模糊，常驻液态反光） */
.hero-actions .btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.55) 0%,
    transparent var(--tr),
    transparent calc(100% - var(--tr)),
    rgba(255, 255, 255, 0.40) 100%
  );
  filter: blur(2px);
  pointer-events: none;
}

/* 液态玻璃胶囊按钮：高透明底色 + 仿视频的多层对角高光/反光阴影 */
.hero-actions .btn {
  --tr: 22%;                        /* 对角镜面高光的透明区间（仿视频 var(--tr)） */
  position: relative;
  overflow: hidden;                 /* 裁切内部流光层（外部 box-shadow 不受影响） */
  border-radius: 999px;
  padding-left: 26px;
  padding-right: 26px;
  font-family: var(--f-display);   /* 按钮字体：SF Pro Display 系（非 mono），更贴近苹果 CTA */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #ffffff;                   /* 主/次按钮文字统一白色（液态玻璃上配深色投影保证可读） */
  border: 1px double rgba(255, 255, 255, 0.14);      /* 仿视频 double 描边 */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)),
    rgba(10, 16, 24, 0.10);                             /* 更高透明冷调底：背后光斑清晰透出 */
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  backdrop-filter: blur(6px) saturate(160%);
  box-shadow:                       /* 仿视频阴影组：对角亮边 + 内暗描边 + 顶部厚度 */
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.50),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.30),
    inset 7px -7px 1px -6px rgba(255, 255, 255, 0.30),
    inset -7px 7px 1px -6px rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 -8px 16px -8px rgba(0, 0, 0, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.hero-actions .btn:hover {
  border-color: rgba(255, 255, 255, 0.26);
  color: #ffffff;                   /* hover 保持白色 */
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.70),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.40),
    inset 7px -7px 1px -6px rgba(255, 255, 255, 0.40),
    inset -7px 7px 1px -6px rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(0, 0, 0, 0.30),
    inset 0 -8px 16px -8px rgba(0, 0, 0, 0.30),
    0 10px 24px rgba(0, 0, 0, 0.40),
    0 0 18px rgba(76, 195, 240, 0.12),
    0 0 30px rgba(139, 142, 247, 0.08);   /* 蓝紫微光（--c-accent），仅在 hover 浮现，静态不受影响 */
}

/* 液体内部流光：旋转的 conic 光带 + 模糊，透过半透明玻璃呈现"液体流动"（纯 CSS、轻量） */
.hero-actions .btn::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;                      /* 置于按钮内容之下，文字始终清晰 */
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0.50) 30deg,
    rgba(255, 255, 255, 0) 60deg 300deg,
    rgba(255, 255, 255, 0.45) 330deg,
    rgba(255, 255, 255, 0) 360deg);
  filter: blur(12px);              /* 模糊降档（性能） */
  opacity: 0.5;
  animation: none;                 /* 常态静止：不旋转，省每帧 blur；hover 才动 */
  pointer-events: none;
}
.hero-actions .btn:hover::before {
  animation: liquidSpin 3s linear infinite;   /* hover 流光旋转 */
  opacity: 0.8;
}
@keyframes liquidSpin { to { transform: rotate(360deg); } }

/* 交互反馈：按下回弹 */
.hero-actions .btn:active { transform: translateY(1px) scale(0.99); }

.hero-frame {
  position: relative;
  aspect-ratio: 4 / 3.8;
  overflow: hidden;              /* 去边框去底色：画面直接浮在黑色粒子背景上 */
}
.hero-slides { position: absolute; inset: 0; overflow: hidden; }
/* 三个 4:3 画面容器纵向错落：主画面居中且在最上层，上一张自其上方露底边、下一张自其下方露顶边 */
.slide {
  position: absolute; left: 50%; top: 50%;      /* 水平居中（translateX 与纵向位移由 JS 合并写入） */
  width: 96%;                                   /* 画面尽量放大（留 2% 呼吸边） */
  aspect-ratio: 4 / 3;                          /* 容器比例 4:3 */
  border-radius: 26px;                          /* 圆弧画面（主与上下候选三张统一弧度，放大更柔和） */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  background: var(--c-surface);
  overflow: hidden;
  transition:
    transform 0.55s cubic-bezier(0.33, 0, 0.33, 1),   /* 位移动画放缓：槽位滑移更从容 */
    opacity 1s ease;                                 /* 候选画面纵深进退：淡入淡出主导观感 */
  will-change: transform;
}
.slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.62);              /* filter 静态（去 brightness），明暗改由 ::after 遮罩 opacity（合成） */
}
/* 明暗遮罩：黑层 opacity 合成过渡，替代原 brightness filter 动画（每 5s 轮播不再整图重绘） */
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.38;                       /* 候选底档：对应原 brightness(0.62) ≈ 黑 0.38 */
  pointer-events: none;
  transition: opacity 0.75s ease;
}
.slide[data-role="main"]   { z-index: 3; }
.slide[data-role="top"]    { z-index: 2; }
.slide[data-role="bottom"] { z-index: 1; }
.slide[data-role="main"] img { filter: none; }        /* 主画面不降饱和：色彩与直接打开原图一致 */
.slide[data-role="main"]::after { opacity: 0; }      /* 主画面不压暗；候选仍保留纵深层 */
/* 呼吸微动仅当前主画面播放 */
.slide[data-role="main"] img { animation: breathe 7s ease-in-out infinite alternate; }
@keyframes breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.025); }
}
.frame-corner { display: none; }   /* 取景框边框已移除，青色角标不再显示 */
.hero-caption {
  display: none;                 /* 图片介绍文字与下方蓝色指示条已移除 */
}

/* 首屏底部切换提示：body 级视口固定（脱离等比缩放画布，与右下角时钟同层自适应） */
/* 仅首页显示：离开首页淡出后隐藏（visibility 延迟 0.25s，先淡出再防交互）；回首页立即可见再淡入（009） */
body:not(.on-home) .hero-pager {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.hero-pager {
  position: fixed;
  left: 50%;
  bottom: 30px;                    /* 与右下角时钟行同一高度（bgClock bottom:30px） */
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--c-text-dim);
  text-transform: uppercase;
  /* 回首页方向：visibility 立即 visible，opacity 淡入（009） */
  transition: opacity 0.25s ease, visibility 0s;
}
/* 首页翻页指示箭头（实心向下双箭头）：青蓝 + 流星式滑动（渐现→下滑→渐隐循环） */
.hero-pager .pager-arrow {
  width: 34px;
  height: 34px;
  fill: var(--c-primary);            /* 实心图标：恒定青蓝 */
  animation:
    pagerSlideY 2s cubic-bezier(0.23, 1, 0.32, 1) infinite,  /* 位移：强 ease-out 触底收势 */
    pagerFade  2s linear infinite;                            /* 透明度：均匀渐晕 */
}
.hero-pager:hover .pager-arrow {
  animation-play-state: paused;      /* hover 暂停循环，便于静态解码 */
  fill: var(--c-primary-hover);      /* 提亮反馈，与站内 hover 语言一致 */
}
/* 位移轨道：0-50% 匀速下移 26px（ease-out 让其尾段减速触底），50-100% 停在底 */
@keyframes pagerSlideY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(26px); }
  100% { transform: translateY(26px); }
}
/* 透明度轨道：渐现 → 保持 → 渐隐 → 空白 0.4s（周期 2s，最后 20% 为空白） */
@keyframes pagerFade {
  0%   { opacity: 0; }
  12%  { opacity: 1; }    /* 渐渐出现 */
  30%  { opacity: 1; }    /* 原位静止 */
  62%  { opacity: 1; }    /* 到位静止 */
  80%  { opacity: 0; }    /* 渐渐消失 */
  100% { opacity: 0; }    /* 空白间隔 0.4s */
}

/* ---------- 12. 滚动入场（透明度 + 8-12px 微位移；不占合成层） ---------- */
/* 内容入场动画：由 JS (WAAPI) 在每次切到该屏时播放；元素初始隐藏由 JS 内联样式临时
   接管、动画生效后清除（不依赖动画对象存续，避免被浏览器回收后内容消失） */
.reveal { }

/* ---------- 13. 最新动态（发光渐变毛玻璃卡片，移植 Glowing Gradient Glassmorphism Card）
   所有可调数值集中在 :root 顶部 --card-* 系列 token 中 */
.updates-grid { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

/* 卡片容器（模板 .box）：倾斜渐变背景层 + 毛玻璃 .content + hover 展开/光斑 */
.update-card {
  position: relative;
  display: flex;
  width: var(--card-w);
  height: var(--card-h);
  justify-content: center;
  align-items: center;
  margin: var(--card-mg-v) var(--card-mg-h);
  /* hover 深度反馈（Apple §16 Craft/反馈）：卡片整体上浮 3px"拿起感"。
     translate 用独立属性而非 transform——入场/退场 WAAPI 动画持续 fill 占用 transform，
     会被其覆盖；translate 与其叠加互不影响（Chromium/Firefox/Safari 15+ 支持）。
     收回走慢档 --t-card-out(1s)，展开见 :hover 的 350ms（与技能卡快开慢收语言一致） */
  transition: translate var(--t-card-out);
}
.update-card:hover { z-index: 3; translate: 0 -3px; transition: translate var(--t-card); }  /* hover 时浮于相邻卡片之上，避免左移被遮挡；同时整体上浮 */
.update-card:hover .content { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), 0 3px 8px rgba(0, 0, 0, 0.18); }  /* 玻璃阴影加深（与技能卡 hover 阴影数值一致，全站统一） */

/* 毛玻璃内容层（模板 .content） */
.update-card .content {
  position: relative;
  left: 0;
  width: 100%;
  padding: 20px 36px;
  color: var(--c-text);
  background: var(--card-glass-bg);
  -webkit-backdrop-filter: blur(var(--card-glass-blur));
  backdrop-filter: blur(var(--card-glass-blur));
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: var(--card-radius);
  z-index: 1;
  /* 左移走合成 transform；padding 为唯一保留的一次性 layout（hover 低频，可接受） */
  transition:
    transform 0.35s var(--ease-house),
    padding 0.35s var(--ease-house),
    box-shadow 0.35s var(--ease-house);   /* 阴影加深/减淡随展开收回平滑（无瞬变） */
}
.update-card .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.update-card .date { font-family: var(--f-mono); font-size: 11px; color: var(--card-text-dim); letter-spacing: 0.08em; }
.update-card h3 { font-size: 20px; color: var(--card-text); font-weight: 600; margin-bottom: 10px; letter-spacing: 0.02em; }
.update-card .desc { font-size: 13px; color: var(--card-text-sub); margin-bottom: 10px; line-height: 1.6em; }
.update-card .more {
  display: inline-block;
  font-size: 14px;
  font-family: var(--f-display);               /* 与卡片标题（h3）同字体：SF Pro Display 系 */
  letter-spacing: 0.12em;
  color: var(--card-btn-fg);
  background: var(--card-btn-bg);
  padding: 11px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 800;
  margin-top: 5px;
  /* 显式列出过渡属性（不再裸 transition:0.6s 全部属性）；box-shadow/border-radius 为 hover 一次 paint，可接受 */
  transition: background 0.3s ease, color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease, transform 140ms var(--ease-house);
  cursor: pointer;
}
.update-card .more:focus-visible { outline: 1px solid var(--c-primary); outline-offset: 2px; }

/* hover：毛玻璃左移展开（合成 transform）+ 更多按钮反白 */
.update-card:hover .content { transform: translateX(-25px); padding: 60px 36px; }
.update-card .more:hover { background: var(--card-btn-bg-hover); color: var(--card-text); border-radius: 16px; box-shadow: 0 2px 15px var(--card-btn-bg-hover); transform: translateY(-4px) scale(1.02); }   /* 跃动：hover 上浮（比首页按钮更明显，小按钮需更大位移） */
.update-card .more:active { transform: translateY(1px) scale(0.99); }   /* 回弹：按压下沉（与首页按钮同款） */

/* Read Me 出发态：点击后播完再跳转（main.js initUpdateLink 触发）——文字切 OPENING + 上浮提亮，
   覆盖 hover 跃动（权重高于 .more:hover），播毕回落原状 */
.update-card .more.is-going {
  background: var(--card-btn-bg-hover);
  color: var(--c-primary);
  border-radius: 16px;
  box-shadow: 0 2px 15px var(--card-btn-bg-hover);
  transform: translateY(-6px) scale(1.04);
}

/* 倾斜渐变背景层（模板 .box::before/::after，::after 为模糊辉光）
   位移/铺满全用合成 transform（translateX + scaleX），不再动 left/width（layout） */
.update-card::before,
.update-card::after {
  content: "";
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  border-radius: var(--card-radius);
  transform-origin: left center;                  /* scaleX 以左边界为锚点延伸，等效旧 left/width 过渡（避免展开时整体偏左） */
  transform: translateX(50px) scaleX(1) skewX(15deg);   /* 基态：对应旧 left:50px;width:50% */
  transition: transform 0.35s var(--ease-house), filter 0.35s ease;
  pointer-events: none;
}
.update-card::after { filter: none; }                 /* 静止时不开 blur，省 GPU（低配设备友好） */
.update-card:hover::after { filter: blur(20px); }     /* 悬停才启用辉光柔化（30→20，低配友好，AUDIT §5） */
/* hover：铺满（320 卡宽下 calc(100%-90px)=230px，scaleX=230/160=1.4375；位移 20-50=-30px） */
.update-card:hover::before,
.update-card:hover::after { transform: translateX(20px) scaleX(1.4375) skewX(0deg); }

/* 三张卡片各自渐变配色 */
.update-card:nth-child(1)::before, .update-card:nth-child(1)::after { background: var(--card-grad-1); }
.update-card:nth-child(2)::before, .update-card:nth-child(2)::after { background: var(--card-grad-2); }
.update-card:nth-child(3)::before, .update-card:nth-child(3)::after { background: var(--card-grad-3); }

/* 玻璃浮动光斑层（模板 .box span::before/::after，hover 时从角部浮出并上下律动） */
.update-card > span {
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5;
  pointer-events: none;
}
.update-card > span::before {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  top: 0; left: 0;
  width: 100px; height: 100px;          /* 尺寸固定，展开用 scale + opacity（合成） */
  opacity: 0;
  transform: translate(0, 0) scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-house);
  -webkit-backdrop-filter: blur(var(--card-glass-blur));
  backdrop-filter: blur(var(--card-glass-blur));
  border-radius: var(--card-radius);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  animation: none;                                      /* 未悬停不播放，避免 6 个常驻无限动画耗能 */
}
.update-card:hover > span::before { opacity: 1; transform: translate(50px, -50px) scale(1); animation: cardFloat 3s ease-in-out infinite; }
.update-card > span::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 100px; height: 100px;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translate(0, 0) scale(0.85);
  transition: opacity 0.5s ease, transform 0.5s var(--ease-house);
  -webkit-backdrop-filter: blur(var(--card-glass-blur));
  backdrop-filter: blur(var(--card-glass-blur));
  border-radius: var(--card-radius);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  animation: none;                                      /* 同上：未悬停不播放 */
}
.update-card:hover > span::after { opacity: 1; transform: translate(-50px, 50px) scale(1); animation: cardFloat 3s ease-in-out infinite; animation-delay: -1s; }

/* 光斑浮动：只动独立 translate 属性，与 hover 定位 transform 叠加（互不冲突） */
@keyframes cardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: -6px 6px; }          /* 幅度 ±10→±6：扫过明暗交界的速度/频次减半，缓解颜色跳变（动画优化 光斑审计） */
}

/* ---------- 14. 个人档案（照片压缩 + 信息格 2×2，整体瘦身） ---------- */
.profile-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--gap); align-items: stretch; }
.profile-photo {
  position: relative;
  border: 1px solid var(--glass-br);
  overflow: hidden;
  min-height: 250px;
  background: rgba(16, 20, 25, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-1);
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) brightness(0.9); position: absolute; inset: 0; }
.profile-photo .mask { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.72) 100%); }
.profile-photo .badge { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; }
.profile-photo .foot {
  position: absolute;
  left: var(--sp-4); bottom: var(--sp-4); right: var(--sp-4);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
}
.profile-photo .foot .id { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--c-text-dim); text-transform: uppercase; }
.profile-photo .foot .name { font-family: var(--f-display); font-size: var(--fs-20); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text); }

.profile-data {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-br);
  background: linear-gradient(180deg, var(--glass-bg-2), rgba(12, 16, 20, 0.5));
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-1);
}
.profile-kv {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2×2 信息格：替代原密集五行表格，间距更透气 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.profile-kv .kv {
  padding: var(--sp-3) 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.profile-kv .kv:nth-child(2n) { border-right: 0; }
.profile-kv .kv:nth-last-child(-n+2) { border-bottom: 0; }
.profile-kv .kv em {
  display: block;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: 5px;
}
.profile-kv .kv b {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-15);
  letter-spacing: 0.02em;
  color: var(--c-text);
}
.profile-bio { padding: var(--sp-4) 18px; font-size: var(--fs-14); color: var(--c-text-sub); border-top: 1px solid rgba(255, 255, 255, 0.06); flex: 1; }
.profile-quote {
  padding: var(--sp-2) 18px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-primary);
  letter-spacing: 0.06em;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-shadow: 0 0 16px rgba(76, 195, 240, 0.35);
}

/* 技能矩阵：两组并排，压缩高度适配分屏 */
.skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-5); align-items: start; }
.skill-group h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-text-sub);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.skill-group h4::before { content: "//"; color: var(--c-primary); }
.skill-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.skill-item {
  padding: 10px var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(16, 20, 25, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.skill-item:hover {
  border-color: rgba(76, 195, 240, 0.40);
  background: rgba(26, 32, 38, 0.62);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.skill-item .nm { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.skill-item .nm span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text); }
.skill-item .nm em { font-style: normal; font-family: var(--f-mono); font-size: 10px; color: var(--c-text-dim); }
.skill-track { height: 2px; background: var(--c-border); position: relative; overflow: hidden; }
.skill-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(76, 195, 240, 0.35), var(--c-primary));
  box-shadow: 0 0 10px rgba(76, 195, 240, 0.55);   /* 填充条末端辉光 */
  transition: width 900ms var(--ease-house) 120ms;
}

/* ---------- 15. 能力方向（发光渐变毛玻璃卡片，复刻动态卡 update-card 模型） ---------- */
.stack-grid {
  --stk-w: 280px;                /* 卡宽 */
  --stk-h: 270px;                /* 卡高：三卡等高，与硬件卡齐平 */
  perspective: var(--card-persp); /* 3D tilt 透视：让卡 hover 随鼠标俯仰/滚转有空间感 */
  display: grid;                 /* 由列向流改为网格：row1 硬件+个人背景；row2 镜像硬件+发展方向+软件 */
  grid-template-columns: var(--stk-w) var(--stk-w);   /* 两列 */
  grid-template-rows: auto auto; /* 上下两排 */
  column-gap: 32px;              /* 上排两卡水平间距 */
  row-gap: 24px;                 /* 上下两排纵向间距 */
  justify-content: center;
  align-items: start;
  margin-top: -120px;            /* 卡片组上移：保持垂直中心对齐 */
  transform: translateX(348px) translateY(30px);    /* 卡片组整体右移（298 + 50）；整体下移 50px（原 -20，改 30） */
}

/* 卡片容器：倾斜渐变斜层 + 毛玻璃 .content + hover 展开/光斑（同 .update-card） */
.stack-card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--stk-w);
  height: var(--stk-h);
  transition: transform var(--t-card-out);  /* 收回(回基态)1s；展开见 :hover 的 0.35s 与 JS tilt 覆盖 */
}
.stack-card:hover { z-index: 3; }
.stack-card:hover { transition: transform var(--t-card); }   /* 展开/上浮 350ms（进入方向用快档） */

/* 四卡 grid 定位：row1 硬件+个人背景；row2 发展方向(硬件下方,左) + 软件(右,顶齐row2) */
.stack-card:nth-child(1) {
  grid-column: 1; grid-row: 1;                 /* 硬件：上排左（margin-left 由 30px 归零，与下方发展方向卡左缘左右对齐；发展方向卡位置不动） */
  transform-origin: right bottom;              /* 缩放基准点：卡片右下角 */
  transform: translate(10px, 10px) scale(1.10);  /* 相对右下角放大 10% + 整体右移 10px、下移 10px（视觉缩放/位移，不占布局） */
}
.stack-card:nth-child(2) {
  grid-column: 2; grid-row: 1;                 /* 个人背景：上排右，与硬件顶齐 */
  transform-origin: left bottom;               /* 缩放基准点：卡片左下角 */
  transform: translate(-10px, 10px) scale(0.90); /* X 对拉：向左下 10px + 相对左下角缩小 10% */
}
.stack-card:nth-child(3) {
  grid-column: 2;                  /* 软件：第二排右列 */
  grid-row: 2;
  margin-right: -2px;              /* -52(原) + 50(左移) = -2px，距画面右缘约 122px */
  transform-origin: left top;      /* 缩放基准点：卡片左上角 */
  transform: translate(-10px, -10px) scale(1.10); /* 相对左上角放大 10% + 整体左移 10px、上移 10px（视觉缩放/位移，不占布局） */
}
.stack-card:nth-child(4) {
  grid-column: 1; grid-row: 2;                 /* 发展方向：硬件正下方，最上部与软件齐平 */
  transform-origin: right top;                 /* 缩放基准点：卡片右上角 */
  transform: translate(10px, -10px) scale(0.90); /* X 对拉：向右上 10px + 相对右上角缩小 10% */
}

/* 毛玻璃内容层：高度由内容决定（不撑满整卡），上下露出斜层色条，形成动态卡同款层次 */
.stack-card .content {
  position: relative;
  width: 100%;
  min-height: 170px;              /* 统一玻璃框高度：两卡透明带等高，不随文本行数抖动 */
  padding: 20px 36px;             /* 基态 padding 照抄动态卡 .content */
  color: var(--c-text);
  background: var(--card-glass-bg);
  -webkit-backdrop-filter: blur(var(--card-glass-blur));
  backdrop-filter: blur(var(--card-glass-blur));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);   /* 基态双影：卡片从深色台面"浮起"，与左侧折叠照片斜片的空间语言一致（微调：空间感调和） */
  border-radius: var(--card-radius);
  z-index: 1;
  transition:
    transform var(--t-card-out),
    padding var(--t-card-out),
    box-shadow var(--t-card-out);   /* 玻璃+阴影收回 1s；展开看 :hover 快档（阴影渐深渐淡消除瞬变） */
}
/* hover 内边距：左右保持 36px → 行宽恒定不跳变；上下 40px（而非 52），使玻璃框 hover 后
   仍矮于卡高(270)约 40px，上下保留色带露出层次；
   阴影加深：hover 时卡片有"拿起来"的层级感（Apple 深度反馈） */
.stack-card:hover .content { transform: translateX(-25px); padding: 40px 36px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), 0 3px 8px rgba(0, 0, 0, 0.18); transition: transform var(--t-card), padding var(--t-card), box-shadow var(--t-card); }

/* —— hover 深度反馈：卡片整体上浮 3px（"拿起"感），transform 在各自 X 构图的静态值上叠加 —— */
.stack-card:nth-child(1):hover { transform: translate(10px, 7px) scale(1.10); }  /* 硬件：y 10→7 */
.stack-card:nth-child(2):hover { transform: translate(-10px, 7px) scale(0.90); } /* 个人：y 10→7 */
.stack-card:nth-child(3):hover { transform: translate(-10px, -13px) scale(1.10); } /* 软件：y -10→-13 */
.stack-card:nth-child(4):hover { transform: translate(10px, -13px) scale(0.90); } /* 发展：y -10→-13 */

.stack-card h3 { font-size: 18px; color: var(--card-text); font-weight: 600; margin-bottom: 10px; letter-spacing: 0.02em; }
.stack-card p { font-size: 13px; color: var(--card-text-sub); line-height: 1.6em; }

/* 倾斜渐变背景层：同 update-card（位移/铺满全合成 transform，::after 为 hover 辉光） */
.stack-card::before,
.stack-card::after {
  content: "";
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  border-radius: var(--card-radius);
  transform-origin: left center;
  transform: translateX(44px) scaleX(1) skewX(15deg);   /* 基态：44px 自定偏置（右半斜置） */
  transition: transform var(--t-card-out), filter var(--t-card-out);  /* 斜层收回 1s；展开看 :hover 快档 */
  pointer-events: none;
}
.stack-card::after { filter: none; }                    /* 静止不开 blur，省 GPU */
.stack-card:hover::after { filter: blur(20px); }        /* 悬停才启用辉光柔化（30→20，低配友好，AUDIT §5） */
.stack-card.tilt-active:hover::after { filter: blur(12px); }  /* tilt 交互期辉光降档：3D 旋转时重采样更省（动画优化 光斑审计 1） */
/* hover 铺开：起点移到卡左缘(0)、scaleX 撑至 0~240px，完整包住左移后的文字区(11~219px)，
   两端留余量，避免边缘字体落到色带外 */
.stack-card:hover::before,
.stack-card:hover::after { transform: translateX(0) scaleX(1.71) skewX(0deg); transition: transform var(--t-card), filter var(--t-card); }

/* 三张卡各自渐变配色（315° = 从右下到左上，起始色在下部）
   硬件卡最下部浅蓝 #03a9f4 → #4cc3f0 青蓝，上部保留深蓝 #0058ff */
.stack-card:nth-child(1)::before, .stack-card:nth-child(1)::after { background: linear-gradient(315deg, #4cc3f0, #0058ff); }
.stack-card:nth-child(2)::before, .stack-card:nth-child(2)::after { background: linear-gradient(315deg, #6f8df0, #59c8ff); } /* 个人背景：下部蓝紫 #6f8df0 → 上部亮青（下部与对角发展方向卡的上部相邻处共用色，垂直序列连续） */
.stack-card:nth-child(4)::before, .stack-card:nth-child(4)::after { background: linear-gradient(315deg, #3339b0, #6f8df0); } /* 发展方向：下部深靛 → 上部蓝紫 #6f8df0（上部与对角个人背景卡的下部相邻处共用色，垂直序列连续） */
.stack-card:nth-child(3)::before, .stack-card:nth-child(3)::after { background: linear-gradient(315deg, #8b8ef7, #4cc3f0); } /* 软件：蓝紫 */

/* ── 个人背景 & 发展方向卡（nth-child(2)/(4)）左右镜像：仅斜层/光斑/玻璃位移镜像，文字正常 ──
   依据 HANDOFF 4.16(d)：不可给卡容器 scaleX(-1)（会被入场动画内联 transform 覆盖），
   故逐装饰层覆写。静止色带 96~236px 与左卡 44~184px 关于卡中心 140 严格镜像。 */
.stack-card:nth-child(2)::before,
.stack-card:nth-child(2)::after,
.stack-card:nth-child(4)::before,
.stack-card:nth-child(4)::after {
  transform-origin: right center;                              /* 右缘锚定 */
  transform: translateX(96px) scaleX(1) skewX(-15deg);         /* 基态镜像斜层：向右偏置、左倾 */
}
.stack-card:nth-child(2):hover::before,
.stack-card:nth-child(2):hover::after,
.stack-card:nth-child(4):hover::before,
.stack-card:nth-child(4):hover::after {
  transform: translateX(140px) scaleX(1.6) skewX(0deg);        /* 展开 56~280px，完整覆盖文字区 */
}
/* 玻璃框 hover 右移（与硬件卡左移 -25px 对称） */
.stack-card:nth-child(2):hover .content,
.stack-card:nth-child(4):hover .content { transform: translateX(25px); }
/* 光斑镜像位置：右上 / 左下浮出 */
.stack-card:nth-child(2):hover > span::before,
.stack-card:nth-child(4):hover > span::before {
  opacity: 1;
  transform: translate(130px, -50px) scale(1);
  animation: cardFloat 3s ease-in-out infinite;
}
.stack-card:nth-child(2):hover > span::after,
.stack-card:nth-child(4):hover > span::after {
  opacity: 1;
  transform: translate(-130px, 50px) scale(1);
  animation: cardFloat 3s ease-in-out infinite;
  animation-delay: -1s;
}

/* ── 「硬件开发」卡（nth-child(1)）：套用昔日「发展方向」卡试验的上镜像装饰形态
       （右缘锚定 + 右倾斜层 + 玻璃右移 + 双光斑关于卡竖向中心线 x=140 左右对称）；
       仅装饰样式替换；文本与配色保持硬件开发（配色 nth-child(1) 青蓝 #4cc3f0→#0058ff 不变）。
       注：发展方向卡(4)已按最新备份回退为 2/4 组纯左右镜像，本段为该上镜像形态的唯一使用者。
       撤用：删除本段即恢复默认普通卡（左斜层 / 玻璃左移 / 左上右下光斑）。 */
.stack-card:nth-child(1)::before,
.stack-card:nth-child(1)::after {
  transform-origin: right center;                        /* 右缘锚定（同 2/4 组） */
  transform: translateX(96px) scaleX(1) skewX(15deg);    /* 上镜像斜层：右偏、右倾 */
}
.stack-card:nth-child(1):hover::before,
.stack-card:nth-child(1):hover::after {
  transform: translateX(140px) scaleX(1.6) skewX(0deg);  /* hover 展开 56~280px 铺满 */
}
.stack-card:nth-child(1):hover .content { transform: translateX(25px); }   /* 玻璃框右移（代替默认左移） */
.stack-card:nth-child(1):hover > span::before {          /* 光斑（上部）：上移 → y 由 50 改 -50 */
  opacity: 1;
  transform: translate(50px, -50px) scale(1);
  animation: cardFloat 3s ease-in-out infinite;
}
.stack-card:nth-child(1):hover > span::after {           /* 光斑（下部）：再上移 10px → y 40→30 */
  opacity: 1;
  transform: translate(-50px, 30px) scale(1);
  animation: cardFloat 3s ease-in-out infinite;
  animation-delay: -1s;
}

/* ── 「个人背景」卡（nth-child(2)）：套用「软件卡(3)的上镜像」装饰形态（普通左斜层再垂直镜像），
       仅装饰样式替换；文本与配色保持个人背景（配色 nth-child(2) --card-grad-3 绿青不变）。
       a) 斜层：左缘锚定 + 44px 偏置不变，skewX(15deg) → skewX(-15deg) 走向翻转；
          hover 展开同软件卡 translateX(0) scaleX(1.71) skewX(0)（覆盖 2/4 组的右缘展开）；
       b) 玻璃 hover 左移 translateX(-25px) 同软件卡（覆盖 2/4 组的 +25px 右移）；
       c) 光斑保持 2/4 组约定：右上(130,-50) / 左下(-130,50),不参与上镜像。
       文字不参与任何变换。撤用：删除本段即恢复 2/4 组左右镜像姿态。 */
.stack-card:nth-child(2)::before,
.stack-card:nth-child(2)::after {
  transform-origin: left center;                         /* 左缘锚定（同软件卡，覆盖 2/4 组右缘） */
  transform: translateX(44px) scaleX(1) skewX(-15deg);   /* 上镜像：走向翻转（软卡基态 44px） */
}
.stack-card:nth-child(2):hover::before,
.stack-card:nth-child(2):hover::after {
  transform: translateX(0) scaleX(1.71) skewX(0deg);     /* hover 展开同软件卡（覆盖 2/4 组） */
}
.stack-card:nth-child(2):hover .content { transform: translateX(-25px); }   /* 玻璃左移同软件卡（覆盖 2/4 组右移） */
.stack-card:nth-child(2):hover > span::before {          /* 光斑：右上浮出（保持 2/4 组约定，不参与上镜像） */
  opacity: 1;
  transform: translate(130px, -50px) scale(1);
  animation: cardFloat 3s ease-in-out infinite;
}
.stack-card:nth-child(2):hover > span::after {           /* 光斑：左下浮出（保持 2/4 组约定，不参与上镜像） */
  opacity: 1;
  transform: translate(-130px, 50px) scale(1);
  animation: cardFloat 3s ease-in-out infinite;
  animation-delay: -1s;
}

/* 玻璃浮动光斑层：同 update-card（hover 从角部浮出 + cardFloat 律动） */
.stack-card > span {
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5;
  pointer-events: none;
}
.stack-card > span::before {
  content: "";
  position: absolute;
  background: rgba(195, 215, 240, 0.22);   /* 自带明度基调：透过量减半，铺过亮/暗背景的色彩连续（光斑审计 1） */
  top: 0; left: 0;
  width: 100px; height: 100px;
  opacity: 0;
  transform: translate(0, 0) scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-house);
  -webkit-backdrop-filter: blur(var(--card-glass-blur));
  backdrop-filter: blur(var(--card-glass-blur));
  border-radius: var(--card-radius);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  animation: none;                                     /* 未悬停不播放，避免常驻动画耗能 */
}
.stack-card:hover > span::before { opacity: 1; transform: translate(50px, -50px) scale(1); animation: cardFloat 3s ease-in-out infinite; }
.stack-card > span::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 100px; height: 100px;
  background: rgba(195, 215, 240, 0.22);   /* 自带明度基调：透过量减半，铺过亮/暗背景的色彩连续（光斑审计 1） */
  opacity: 0;
  transform: translate(0, 0) scale(0.85);
  transition: opacity 0.5s ease, transform 0.5s var(--ease-house);
  -webkit-backdrop-filter: blur(var(--card-glass-blur));
  backdrop-filter: blur(var(--card-glass-blur));
  border-radius: var(--card-radius);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  animation: none;
}
.stack-card:hover > span::after { opacity: 1; transform: translate(-50px, 50px) scale(1); animation: cardFloat 3s ease-in-out infinite; animation-delay: -1s; }

/* ---------- 15.x 技能屏左侧 · 折叠照片（编译中梦见未来 效果移植） ----------
   参考实现参数原样保留（--photo-max-width/--photo-max-height 75vw/75vh 等，"大小先不要改"）；
   仅把定位从"视口级 flex 居中 + -800px 偏移"改为"技能屏内绝对定位置于左侧
   （620px 宽容器承载，偏移归零，右上留给四卡矩阵）。
   折叠态：4 层 3D 斜片由亮到暗叠开（rotateX45°+rotateZ-50° 投影）；
   展开态：指针在"折叠斜片 ∪ 展开矩形"任一范围停留 photoDelay(120ms) 后由 JS 加 .active
   铺平 + 自辉光（颜色由 JS 采样图片边缘注入 --glow-rgb；file:// 直开受限时回落白辉光）。 */
.stack-photo {
  position: absolute;                 /* 相对 .section（技能屏）绝对定位，脱离内容流 */
  left: 0; top: 0;
  width: 620px;                       /* 照片区宽：只占技能屏左侧，不侵入右侧四卡 */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1800px;
  transform-style: preserve-3d;
  pointer-events: none;               /* 装饰区不拦截滚轮/点击；展开判定走 document 级 mousemove */
  --photo-max-width: 65vw;            /* 照片最大显示尺寸（60 太小，调回 65；竖屏图实际受高限约束） */
  --photo-max-height: 65vh;
  --photo-radius: 12px;
  --photo-offset-x: 50px;             /* 水平偏移：右移 50px */
  --photo-offset-y: 0px;
  --glow-rgb: 255, 255, 255;          /* 默认白；JS 采样图片边缘色后覆盖 */
}
.stack-photo .photo {
  position: absolute;
  background-image: url("assets/档案/1.jpg");
  background-size: cover;
  max-width: var(--photo-max-width);
  max-height: var(--photo-max-height);
  border-radius: var(--photo-radius);
  margin-left: var(--photo-offset-x);
  margin-top: var(--photo-offset-y);
  transition: transform var(--t-photo), box-shadow var(--t-photo);   /* 显式属性 + token（010/011）：还原备份基线 20260831-155120 */
  transform-style: preserve-3d;
}
.stack-photo .photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--photo-max-width);
  max-height: var(--photo-max-height);
  border-radius: var(--photo-radius);
}
.stack-photo .photo span {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: inherit;          /* 层叠层继承父级背景图 */
  background-size: cover;
  border-radius: var(--photo-radius);
  transition: transform var(--t-photo-stack), opacity var(--t-photo-stack);   /* 显式属性 + token（010/011） */
}
/* 折叠态（默认） */
.stack-photo .photo {
  transform: rotateX(45deg) rotateZ(-50deg) translateZ(30px);
}
/* 折叠态最上层照片上下跳动提示"可交互"：仅非展开态运行，动画在独立 translate
   属性上（不碰 transform，不与折叠/铺平过渡冲突；与联系页邮件卡跳动同语言） */
.stack-photo .photo:not(.active) {
  animation: photoBounce 1.6s var(--ease-house) infinite;
}
@keyframes photoBounce {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }   /* 上跳 8px */
}
.stack-photo .photo span:nth-child(1) {
  transform: translateX(-20px) translateY(20px) translateZ(-25px);
  opacity: 0.6;
}
.stack-photo .photo span:nth-child(2) {
  transform: translateX(-40px) translateY(40px) translateZ(-50px);
  opacity: 0.3;
}
.stack-photo .photo span:nth-child(3) {
  transform: translateX(-60px) translateY(60px) translateZ(-75px);
  opacity: 0.1;
}
.stack-photo .photo span:nth-child(4) {
  transform: translateX(-80px) translateY(80px) translateZ(-100px);
  opacity: 0.1;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);   /* 静态投影：斜叠片压在"深色台面"上的影，强化空间感（微调：与右侧卡片悬浮阴影同语言） */
  /* 不用蓝底：background 不可过渡，收起时移 .active 的瞬间会"全彩蓝块闪现再淡出"；
     蓝底于深黑底 + opacity 0.1 下本就不可见，删之零视觉损失 */
}
/* 展开态（JS 判定 .active）：铺平 + 自辉光（颜色取图片边缘，内亮外淡两层光晕；还原备份基线 155120） */
.stack-photo .photo.active {
  transform: none;
  box-shadow: 0 0 25px rgba(var(--glow-rgb), 0.75),
              0 0 80px rgba(var(--glow-rgb), 0.45),
              0 25px 60px rgba(0, 0, 0, 0.65);
}
.stack-photo .photo.active span { transform: none; opacity: 1; }
.stack-photo .photo.active span:nth-child(4) {
  box-shadow: none;   /* 铺平后清除折叠态投影（第 4 层背景恒为继承图，无需切换） */
}

/* ---------- 16. 作品三卡轮播（移植 CSS Cards：仅轮换切换；无入场/背景/loading，零外部依赖） ---------- */
/* 作品屏单屏专用：标题浮于顶部（absolute 脱离文档流），卡组在窗口内垂直居中 */
#works { padding: 0; justify-content: center; }
#works .container { margin: 0; }
#works .sec-head {
  position: absolute;
  top: calc(var(--nav-h) + var(--sp-8) + 80px);   /* 标题下移（原 128 基础上再 +80px） */
  left: 50px;                                       /* 整体右移 50px */
  right: 0;
  padding: 0 var(--sp-5);                   /* 等效 .container 的水平内边距 */
}
.works-carousel {
  position: relative;
  width: calc(3 * var(--wc-w));
  height: var(--wc-h);
  margin: 0 auto;                           /* 水平居中（垂直由 #works flex 居中） */
}
.wc-stack {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  perspective: 1000px;                 /* 卡片 rotateY 透视场 */
}
/* 卡片基态：绝对定位于容器中心，姿态全部由 CSS 变量驱动，类切换即过渡 */
.wc-card {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--wc-w);
  height: var(--wc-h);
  transform: translate(-50%, -50%)
             translateX(var(--wc-x, 0))
             translateY(var(--wc-y, 0))           /* 入口入场偏移：JS 进作品屏时 900px→0 上浮（原版 translateY-offset 迁移） */
             rotateY(calc(var(--wc-r, 0deg) + var(--wc-tilt, 0deg)))
             scale(var(--wc-s, 1));
  border: 1px solid rgba(255, 255, 255, 0.10);   /* 纯黑影底上保持卡片轮廓 */
  background: var(--c-surface-2);                 /* 图片解码前先落深色底，候选卡不会呈现"空黑块" */
  overflow: hidden;
  z-index: 10;                                    /* 层级基准：候选卡 10/20、主卡 30、退场暂位 40（JS） */
  /* 地面倒影：Chromium 系原生 box-reflect（Radxa 亦支持）。
     注意 mask 渐变轴对 below 反射是反的：0% 在远端、100% 在贴卡处 → 实色放 100% 端，
     才能呈现"贴卡处实、越远越虚"。Firefox 不支持时自动降级为无倒影 */
  -webkit-box-reflect: below 4px linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.18) 60%, rgba(0, 0, 0, 0.42) 100%);
  transition: transform var(--wc-t) var(--ease-house);
  user-select: none;
}
/* 暗层：当前卡近乎原图，两侧卡压暗形成纵深（z 1 在图上、文字下） */
.wc-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: #000;
  z-index: 1;
  transition: opacity var(--wc-t) var(--ease-house);
  opacity: calc(1 - var(--wc-o, 1));
}
.wc-card.current--card   { z-index: 30; --wc-x: 0;                    --wc-r: 0deg;   --wc-s: 1.2;  --wc-o: 0.85; }  /* 主卡：放大居中、恒在候选之上 */
.wc-card.previous--card  { z-index: 10; --wc-x: calc(-1 * var(--wc-w) * 1.1);  --wc-r: 25deg;   --wc-s: 0.9;  --wc-o: 0.50; }  /* 左候选（亮度提升：黑图在黑底更可见） */
.wc-card.next--card      { z-index: 20; --wc-x: calc(var(--wc-w) * 1.1);      --wc-r: -25deg;  --wc-s: 0.9;  --wc-o: 0.50; }  /* 右候选 */
.wc-hidden { display: none; }                /* 仅两候选+主卡循环，实际不会出现，留作兜底 */
.wc-img, .wc-img img { width: 100%; height: 100%; }
.wc-img img { object-fit: cover; display: block; }

/* 左右切换箭头：直角方形按钮，与全站直角体系一致 */
.wbtn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 60;
  width: 44px; height: 44px;         /* 隐形热区：无底色无边框，只留箭头 */
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  color: var(--c-text);
  transition:
    color var(--t-fast),
    transform 160ms var(--ease-house);   /* 按压微缩平滑（动画优化 006：与 .nav-burger:active 按压语言对齐） */
}
.wbtn svg { width: 20px; height: 20px; }
.wbtn:hover { color: var(--c-primary); }
.wbtn:active { transform: translateY(-50%) scale(0.96); }   /* 按压微缩（合成属性） */
.wbtn-prev { left: -10%; }            /* 往内收：-16% → -10% */
.wbtn-next { right: -10%; }           /* 往内收：-16% → -10% */

/* 箭头待机"活性"跳动：先朝外探出 → 朝内回收（带过冲回弹），随后静止至下轮。
   左右各一套符号镜像的关键帧、同一开始延迟 —— 两只箭头严格同相位：同时朝外、再同时朝内。
   仅动 svg 图标，不动按钮定位/热区。prefers-reduced-motion 由 20 区全局动画规则压为静帧 */
@keyframes wcArrowIdle {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(-8px); }   /* 朝外（左箭头向左） */
  20%  { transform: translateX(4px); }    /* 朝内（过冲） */
  30%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@keyframes wcArrowIdleNext {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(8px); }    /* 朝外（右箭头向右） */
  20%  { transform: translateX(-4px); }   /* 朝内（过冲） */
  30%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}
.wbtn-prev svg { animation: wcArrowIdle 4s ease-in-out 0.5s infinite; }
.wbtn-next svg { animation: wcArrowIdleNext 4s ease-in-out 0.5s infinite; }  /* 同延迟同时间线：真正同步 */

/* 作品信息：绝对堆叠于卡片区底部左侧，仅当前项可见（透明度交叉过渡） */
.works-info {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  perspective: 1000px;                 /* 文字 translateZ 浮于卡片之上 */
  pointer-events: none;                /* 不挡卡片与箭头点击 */
  z-index: 45;                         /* 高于卡片最高层（退场暂位 40），文字恒在最上 */
}
.wcinfo {
  position: absolute;
  left: calc(var(--wc-w) / 1.5);
  bottom: calc(var(--wc-h) / 8);
  max-width: 42ch;
  transform: translateZ(2rem) rotateY(var(--wc-info-tilt, 0deg));   /* 随主卡同向偏转 */
  opacity: 0;
  color: #fff;
  transition: transform var(--wc-t) var(--ease-house),
              opacity 0.4s ease-out;     /* 与跳字行(400ms)同速，消除双层淡入叠闪 */
}
.wcinfo.current--info { opacity: 1; }
/* 复刻/标记标签（数据 w.tag 存在时渲染）：跟在 location 细长下划线（-40→+20px）的
   右端之后、同一水平线上 —— 蓝色粗体大字，不换行不占新行 */
.wcinfo .wc-tag {
  position: absolute;
  left: 24px;                        /* 下划线右端(20px)外侧 */
  bottom: -15px;                     /* 文字中线对齐细长横线基础上下移 10px（原 -5） */
  white-space: nowrap;
  font-family: var(--f-mono); font-size: 20px; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-primary);             /* 站内主强调青蓝：黑底上最醒目（深蓝辨识度不足已换） */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.wcinfo .wc-name {
  font-size: calc(var(--wc-w) * 0.2);   /* 随卡宽等比放大（270px 卡 → 54px） */
  font-weight: 800; line-height: 1.1;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
/* location（类别行）：原版完整复刻 —— 左缩进 40px + 左短粗线 + 底部长下划线 */
.wcinfo .wc-loc {
  --wloc-mg: 40px;                 /* 文本左缩进（左线位偏移同值，原版 --mg-left） */
  position: relative;
  width: fit-content;              /* 下划线随文本宽度对齐 */
  margin-top: 10px;
  margin-left: var(--wloc-mg);
  margin-bottom: calc(var(--wloc-mg) / 2);
  padding-bottom: 0.8rem;          /* 给底部下划线留位 */
  font-family: var(--f-mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff;                     /* 原版 location 纯白，与横线同色 */
}
/* 两条横线（原版 ::before/::after）：左线位于文本左侧 40px，底线贴文本底部 */
.wcinfo .wc-loc::before,
.wcinfo .wc-loc::after {
  content: "";
  position: absolute;
  background: #fff;
  left: 0;
  transform: translate(calc(-1 * var(--wloc-mg)), -50%);
}
.wcinfo .wc-loc::before { top: 50%; width: 20px; height: 5px; }   /* 左侧 20×5 短粗线 */
.wcinfo .wc-loc::after  { bottom: 0; width: 60px; height: 2px; }  /* 底部 60×2 下划线 */
.wcinfo .wc-desc {
  margin-top: 6px; font-size: 17px;
  color: #fff;                         /* 纯白，图上文字更醒目 */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ---------- 17. 时间轴（横向上下交错：主线居中，记录以线上圆点为节点交替贴线展开；窄屏回退纵向见 §19） ---------- */
/* 时间轴屏（参考 #works 模式）：标题 absolute 钉在左上角，时间轴主体在画面内垂直居中 */
#timeline { padding: 0; justify-content: center; }
#timeline .container { margin: 80px 0 0; }  /* 时间轴整体下移 80px */
#timeline .sec-head {
  position: absolute;
  top: calc(var(--nav-h) + var(--sp-8) + 50px);   /* 贴左上角：导航下方起，再下移 50px */
  left: 50px;
  right: 0;
  padding: 0 var(--sp-5);                   /* 等效 .container 的水平内边距 */
}
.timeline {
  position: relative;
  display: flex;
  justify-content: center;          /* 卡片固定宽、负 margin 重叠、总宽超容器时整体居中 */
  gap: 0;                           /* 间距由负 margin 控制（中心距 100px），gap 置 0 */
  max-width: 800px;                 /* 主线宽度 800px（卡片保持原宽，溢出线两侧） */
  margin: 0 auto;
  height: 170px;
  padding: 0 0 var(--sp-4);
}
/* 水平主线：左（列表靠前=最新）最蓝，向右（时间更早）渐淡 */
.timeline::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(90deg,
    var(--c-primary) 0%,                  /* 最新最蓝 */
    rgba(76, 195, 240, 0.55) 40%,
    rgba(76, 195, 240, 0.18) 75%,
    var(--c-border) 100%);                 /* 越早越淡 */
}
/* 每条记录占一条轨道，节点钉在线上 */
.tl-item { position: relative; flex: 1; min-width: 0; }
/* 圆点 = 线上的节点 */
.tl-dot {
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px; height: 9px;
  background: var(--c-bg);
  border: 1px solid var(--c-primary);
  box-shadow: 0 0 8px rgba(76, 195, 240, 0.35);
  transform: translateY(-50%) rotate(45deg);
}
/* 记录内容：奇数从线向下展开，偶数从线向上展开（上下交错） */
.tl-body {
  position: absolute;
  left: 0;
  width: 100%;
}
/* 时间(period)必须贴在线上：奇数在线的正下方，偶数用倒序让 period 落在贴线端 */
.tl-item:nth-child(odd)  .tl-body { top: calc(50% + 14px); }                              /* 贴线下方，period 首行即在线上方旁 */
.tl-item:nth-child(even) .tl-body { bottom: calc(50% + 14px); display: flex; flex-direction: column-reverse; } /* 贴线上方，倒序后 period 移到贴线端 */
.tl-item:hover .tl-dot { background: var(--c-primary); box-shadow: 0 0 12px rgba(76, 195, 240, 0.8); transition: background var(--t-fast), box-shadow var(--t-fast); }
.tl-item .period { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--c-primary); }
.tl-item h3 { font-family: var(--f-display); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin: var(--sp-1) 0; }
.tl-item p { font-size: 13px; color: var(--c-text-sub); max-width: 60ch; }
.tl-item .place { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--c-text-dim); text-transform: uppercase; margin-top: 8px; display: flex; align-items: center; gap: var(--sp-2); }
.tl-item .place::before { content: ""; width: 12px; height: 1px; background: var(--c-border-lt); }

/* —— 特色条目：弯曲外部卡片（搬运 CSS弯曲外部卡片 demo：imgBx 占位图 + 白曲边 + 悬停展开描述）
      文字在上、图片在下；卡片在时间轴下方，悬停向下展开 —— */
.tl-feature { position: relative; z-index: 1; flex: 0 0 150px; min-width: 0; margin-left: -30px; }  /* 卡片宽 150px；负 margin 使相邻卡水平重叠，X 中心距 = 150-30 = 120px（上下交错互不遮挡） */
.tl-feature:hover { z-index: 5; }   /* 悬停展开时浮于相邻卡之上 */
.tl-feature .tl-card {
  position: absolute;
  left: 0; right: 0;
  top: 127px;                       /* 顶部固定（卡片整体在时间轴下方，再上移 10px）：height 增长时向下展开 */
  height: 148px;                    /* 默认：近轨道高的"外部卡片"形态 */
  display: flex;
  flex-direction: column-reverse;   /* 视觉倒置：文字 content 在上、图片 imgBx 在下 */
  background: linear-gradient(180deg, var(--glass-bg-2), rgba(12, 16, 20, 0.50));  /* 透明毛玻璃（原 demo 纯白） */
  border: 1px solid var(--glass-br);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-radius: 30px;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 20px 25px rgba(0, 0, 0, 0.35);
  transition: height 0.5s, box-shadow 0.5s;
  overflow: hidden;
  contain: layout;                /* 011：高度动画重排隔离在本卡内，不波及相邻时间轴卡 */
}
.tl-feature .tl-card:hover { height: 258px; box-shadow: inset 0 1px 0 var(--glass-hi), 0 30px 45px rgba(0, 0, 0, 0.45); }  /* 悬停向下展开 */
/* 图片区：读取 JS 注入的 --img 背景图；顶部叠玻璃色→透明的线性渐变，与文字区色彩过渡；默认模糊、悬停清晰 */
.tl-feature .tl-card-img {
  position: relative;
  height: 96px;
  background-image:
    linear-gradient(180deg, rgba(12, 16, 20, 0.6), rgba(12, 16, 20, 0) 38%),   /* 色彩过渡：玻璃底→图片色 */
    var(--img, none);
  background-size: cover, cover;
  background-position: center, center;
  transition: height 0.5s, filter 0.5s;
  filter: blur(18px);
}
.tl-feature .tl-card:hover .tl-card-img { height: 212px; filter: blur(0); }
.tl-feature .tl-card-content {
  position: relative;
  z-index: 10;
  padding: 14px 16px 12px;          /* 底部留白：配合图片顶部渐变，柔化文字→图片衔接 */
  text-align: center;               /* 文本水平居中 */
  transition: 0.5s;
}
/* 提取出的时间：独立显示在时间轴（主线）下方、卡片上方；X（水平）中心与卡片中心对齐 */
.tl-feature-period {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);      /* 水平居中于 .tl-feature（卡片同宽） */
  top: 98px;                        /* 主线(y≈85)下方、卡片顶(y142)上方的窄带内 */
  font-family: var(--f-display);
  font-size: 15px;                  /* 与标题同一字号 */
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.tl-feature .tl-card-content h3 {
  position: relative;
  margin: 0;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);              /* 玻璃深底 → 浅色文字 */
}
.tl-feature .tl-card-content p {
  position: relative;
  margin: 10px 0 0;                 /* 时间已抽出，描述紧贴标题 */
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text-sub);          /* 玻璃深底 → 次级浅色文字 */
  opacity: 0;
  transition: 0.5s;
}
.tl-feature .tl-card:hover .tl-card-content p { opacity: 1; }

/* —— up 变体：文本在下、图片在上、朝上展开（卡片在时间轴上方） —— */
.tl-feature-up .tl-card {
  top: auto;                        /* 取消顶部固定 */
  bottom: calc(50% + 34px);         /* 卡底距线 34px（再上移 10px）：height 增长时朝上展开 */
  flex-direction: column;           /* 正常顺序：图片在上、文本在下（基本版为 column-reverse） */
}
.tl-feature-up .tl-card-img {
  background-image:
    linear-gradient(0deg, rgba(12, 16, 20, 0.6), rgba(12, 16, 20, 0) 38%),   /* 底部色彩过渡：图片→下方文字 */
    var(--img, none);
}
.tl-feature-up .tl-card-content {
  display: flex;
  flex-direction: column-reverse;   /* 文本区倒序：小字(描述)在上、大字(标题)在下 */
}
/* up 变体时间：镜像到时间轴上方（底边与下排顶边距线距离对称，均 13px） */
.tl-feature-up .tl-feature-period {
  top: 50px;                        /* 线 y85：时间占 50~72px，底边距线 13px（与下排时间顶边 13px 对称） */
}

/* 时间轴主线入场（JS 每次进屏重挂 .tl-line-anim 触发重播）：
   从末端（右端淡色端）向左生长到目标（左端最蓝），1s（--ease-out） */
.timeline.tl-line-anim::before {
  transform-origin: right center;                 /* 锚定末端：从右向左长出 */
  animation: tlLineGrow 1s var(--ease-out) both;
}
@keyframes tlLineGrow {
  from { transform: translateY(-50%) scaleX(0); }
  to   { transform: translateY(-50%) scaleX(1); }
}

/* ---------- 18. Footer ---------- */
.footer {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;         /* 内容整体在画布内垂直居中（底部多留白，抵消顶部导航视觉覆盖） */
  align-items: center;
  padding: 0 0 var(--sp-6);        /* 背景透明，统一透出视口固定底 */
}
.footer-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--c-primary), transparent 70%); opacity: 0.8; }
.footer > .container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0;                        /* 覆盖全局 margin auto 0 */
  padding: 0 var(--sp-5);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); width: 100%; }
.footer h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-text-sub); margin-bottom: var(--sp-4); }
.footer h4 em { font-style: normal; color: var(--c-primary); }
/* CONTACT 列（nth-child(2)）：flex 纵向居中，标题与堆叠卡片同轴，
   并随卡片同步左移 100px —— 标题精确居中于卡片正上方 */
.footer-col:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center;          /* h4 与卡片组都在列内水平居中 */
}
.footer-col:nth-child(2) h4 { transform: translateX(-100px); }   /* 与 .sc-stack 同偏移，保持同心 */
.footer-col p { font-size: var(--fs-14); color: var(--c-text-sub); max-width: 40ch; }
.footer-links { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-text-sub);
  transition: color var(--t-fast);
  width: fit-content;
}
.footer-links a:hover { color: var(--c-primary); }
.footer-links a svg { width: 14px; height: 14px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: var(--sp-3);
  margin-top: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--c-text-dim);
  text-transform: uppercase;
}
.footer-bottom a { color: var(--c-text-dim); transition: color var(--t-fast), transform 160ms var(--ease-house); }
.footer-bottom a:hover { color: var(--c-primary); }
.footer-bottom a:active { transform: translateY(1px); }   /* 按压下沉反馈（即时应答） */
.footer-status { display: inline-flex; align-items: center; gap: var(--sp-2); }
.footer-status .led { width: 6px; height: 6px; background: var(--c-green); animation: ledBlink 2.4s ease-in-out infinite; }
@keyframes ledBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---------- 18b. Footer 底部堆叠卡片（素材搬运：CSS simple stack card hover effect）----------
   完全照原素材实现：hover 判定 = 容器矩形（.sc-stack:hover，CSS 伪类，无 JS）；
   容器宽仅容纳堆叠态（200px），展开后左右卡溢出容器 —— 鼠标移出容器即稳定收回，
   离开后不再触发 hover，天然无闪动循环。尺寸 token（--sc-w/--sc-h/--sc-gap）见 :root §1 */
.sc-stack {
  position: relative;
  width: var(--sc-cw);       /* 容器宽：仅覆盖堆叠态范围（不可扩到展开宽度，否则收回后仍被 hover → 闪） */
  height: var(--sc-h);
  margin: var(--sp-3) auto 0;        /* 列内容局：紧贴 CONTACT 标题下方，水平居中 */
  transform: translateX(-100px);     /* 居中基础上整体左移 100px（负 = 向左） */
}
.sc-stack .sc-card {
  position: absolute;
  /* top 固定 50%（卡片垂直居中），垂直位移动画全部走 transform（纯合成层，
     不触发重排）—— 原素材用 top 0→50% 过渡会逐帧重排造成"展开抖动"；
     translateY(-50%) 恰使卡片填满容器高，与素材视觉位置等价 */
  top: 50%;
  left: 50%;
  width: var(--sc-w);
  height: var(--sc-h);
  background: var(--card-glass-bg);                              /* 毛玻璃底色（站内玻璃令牌，替换素材 #444） */
  -webkit-backdrop-filter: blur(var(--card-glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--card-glass-blur)) saturate(140%);  /* 毛玻璃模糊 */
  border: 1px solid var(--glass-br);                             /* 玻璃描边 + 顶部内高光 */
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    12px 12px 50px rgba(0, 0, 0, 0.35);                          /* 原阴影保留，加内高光 */
  transform: translateX(-50%) translateY(calc(-50% + calc(var(--sc-h) / 6 * var(--i)))) rotate(40deg) skew(-20deg, -10deg) scale(0.6);
  z-index: calc(-1 * var(--i));
  transition: transform 0.5s, opacity 0.5s, z-index 0.5s,
              translate 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
  /* z-index 须随过渡渐进（素材 transition:0.5s 含 z-index）：hover 瞬间三卡层级若突变，
     · 中间卡会被左右卡瞬时盖住又露出，产生"闪一下"；加上 z-index 过渡后层级在动画末期
     · 才切换（此时卡片已分离不重叠），消除闪动；top 固定不参与，避免布局重排抖动
     · translate/box-shadow/border-color/color 为展开态单卡悬停反馈的快过渡 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;      /* 卡片为 <a>：去除下划线 */
  color: inherit;              /* 继承父级文字色，避免浏览器默认链接蓝 */
  cursor: pointer;             /* 手型提示可点击 */
}
.sc-stack .sc-card:nth-child(2) { opacity: 0.8; }
.sc-stack .sc-card:nth-child(3) { opacity: 0.6; }

/* 堆叠态：最上层卡片（EMAIL，--i:-1 / first-child）上下跳动提示"可交互"。
   动画只在 translate 独立属性上跑（不碰 transform，不与展开/收回动画冲突）；
   整组 hover 展开时暂停，避免与展开态 hover 反馈的 translate 打架 */
.sc-stack .sc-card:first-child {
  animation: scCardBounce 1.6s var(--ease-house) infinite;
}
.sc-stack:hover .sc-card:first-child,
.sc-stack:active .sc-card:first-child {
  animation: none;
}
@keyframes scCardBounce {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }   /* 上跳 8px 提示 */
}

.sc-stack:hover .sc-card {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
  z-index: 1;
  transform: translateX(calc(-50% + calc(var(--sc-gap) * var(--i)))) translateY(-50%) rotate(0deg) skew(0deg, 0deg) scale(1);
}
/* 展开态下单卡悬停反馈：上浮"拿起感" + 青蓝描边/辉光 + 图标文字转主色。
   translate 用独立属性（不与展开/收回的 transform 冲突，Chromium/Firefox/Safari 15+ 支持） */
.sc-stack:hover .sc-card:hover {
  translate: 0 -10px;
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 12px 26px rgba(0, 0, 0, 0.35),
    0 0 22px rgba(76, 195, 240, 0.45);        /* 辉光提亮：青蓝 45% 强度，扩散 22px */
}
/* 按压反馈：点击瞬间下压回平（-10px → 0）+ 亮度略降，模拟物理按压；translate 独立于 transform */
.sc-stack:hover .sc-card:hover:active {
  translate: 0 0;
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 6px 14px rgba(0, 0, 0, 0.28),
    0 0 14px rgba(76, 195, 240, 0.35);
  filter: brightness(0.88);
}
.sc-stack:hover .sc-card:hover .sc-content svg { color: var(--c-primary); }
.sc-stack:hover .sc-card:hover .sc-content h2 { color: var(--c-primary); }
.sc-stack .sc-card .sc-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;                 /* 原素材 10px（缩半后视觉接近，保留原值更贴合素材） */
}
.sc-stack .sc-card .sc-content svg {
  width: 48px;
  height: 48px;
  color: #18ffaf;            /* 原素材 ion-icon 色 */
}
.sc-stack .sc-card .sc-content h2 {
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.15em;
  font-size: var(--fs-12);
}
/* 触摸设备无 hover：touch 按压展开（近似 hover 语义） */
@media (hover: none) {
  .sc-stack:active .sc-card {
    top: 50%;
    left: 50%;
    opacity: 1;
    z-index: 1;
    transform: translateX(calc(-50% + calc(var(--sc-gap) * var(--i)))) translateY(-50%) rotate(0deg) skew(0deg, 0deg) scale(1);
  }
}

/* ---------- 18c. 微信二维码遮罩（fixed 视口层，毛玻璃盖住页面，点击任意处关闭） ----------
   空间一致性：图片从触发卡方位（屏幕左中，卡在 CONTACT 列靠左）生长进入，
   关闭走同路径收回 —— 不悬空淡入，来源关系清晰 */
.qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;                      /* 高于导航/欢迎层，遮挡全站 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 12, 0.22);   /* 半透明暗底（再调透：0.35 → 0.22） */
  -webkit-backdrop-filter: blur(6px) saturate(110%);    /* 背景毛玻璃（再调透：10 → 6px） */
  backdrop-filter: blur(6px) saturate(110%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-house), visibility 0.3s;
  cursor: pointer;                    /* 点击任意位置关闭 */
}
.qr-overlay.show { opacity: 1; visibility: visible; }
.qr-overlay img {
  max-width: min(72vw, 380px);
  max-height: 72vh;
  border: 1px solid var(--glass-br);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-2), 0 0 40px rgba(76, 195, 240, 0.18);
  background: #fff;                   /* 二维码白底，防止透明穿透 */
  cursor: pointer;
  /* 从触发卡方位（屏幕左中）滑入生长；关闭反向收回（012：中心锚定不随尺寸漂移） */
  transform-origin: center;
  transform: translateX(-24px) scale(0.92);
  opacity: 0.4;
  transition: transform 0.28s var(--ease-house), opacity 0.28s var(--ease-house);
}
.qr-overlay.show img {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* ---------- 18.5 动态文章小窗：毛玻璃遮罩 + 直角终端风面板（与 qr-overlay 同交互语言） ---------- */
.article-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;                      /* 低于二维码层（9999），互不同开 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 12, 0.22);   /* 透亮暗底（同 qr-overlay 调透语言） */
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  backdrop-filter: blur(8px) saturate(110%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-house), visibility 0.3s;
}
.article-overlay.show { opacity: 1; visibility: visible; }
.article-panel {
  position: relative;                 /* 关闭钮绝对定位锚点 */
  width: min(680px, 88vw);
  max-height: 76vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--glass-bg-2), rgba(12, 16, 20, 0.50));  /* 站内玻璃底色（同 tl-card） */
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--glass-br);
  border-radius: var(--card-radius);  /* 圆角：与站内玻璃卡片同码（直角体系内的小圆角 8px） */
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-2), 0 0 40px rgba(76, 195, 240, 0.12);
  padding: 28px 32px 24px;
  transform: translateY(14px);
  transition: transform 0.3s var(--ease-house);
}
.article-overlay.show .article-panel { transform: translateY(0); }
.article-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 18px;
  line-height: 1;
  color: var(--c-text-dim);
  background: none;
  border: 1px solid var(--c-border);
  border-radius: var(--card-radius);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.article-close:hover { color: var(--c-text); border-color: var(--c-border-lt); background: var(--c-surface-2); }
.article-close:active { transform: translateY(1px); }
.article-close:focus-visible { outline: 1px solid var(--c-primary); outline-offset: 2px; }
.article-panel .article-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-primary);
  letter-spacing: 0.1em;
  display: block;
}
.article-panel h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: 0.02em;
  margin: 8px 0 14px;
  padding-right: 36px;                /* 避让右上关闭钮 */
}
.article-body p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-text-sub);
  margin-bottom: 12px;
}

/* ---------- 19. 等比画布下无布局断点；仅窄屏时顶部菜单切换为汉堡（不改变主布局） ---------- */
@media (max-width: 768px) {
  .nav-inner { justify-content: space-between; }   /* 移动端回到 左标志 + 右汉堡 两端布局 */
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .hero-pager { display: none; }

  /* 时间轴窄屏回退为纵向（原 §17 样式：左竖线 + 圆点） */
  #timeline { justify-content: flex-start; padding: calc(var(--nav-h) + var(--sp-4)) 0 24px; }
  #timeline .sec-head { position: static; padding: 0 var(--sp-5); }
  .timeline { display: block; max-width: 860px; padding: var(--sp-4) 0; }
  .timeline::before { left: 0; top: 4px; bottom: 4px; width: 1px; height: auto; transform: none; background: linear-gradient(180deg, var(--c-primary), var(--c-border) 30%, var(--c-border) 70%, var(--c-primary)); }
  .tl-item { display: block; height: auto; padding: 0 0 16px var(--sp-6); }
  .tl-dot { left: -4px; top: 6px; transform: rotate(45deg); }
  .tl-body { position: static; width: auto; display: block; }
  .tl-feature { flex: none; }
  .tl-feature-period { position: static; margin-bottom: 6px; }
  .tl-feature .tl-card { position: static; height: 200px; display: flex; flex-direction: column-reverse; }
  .tl-feature-up .tl-card { top: auto; bottom: auto; flex-direction: column; }  /* up 变体移动端：取消绝对定位，保持图上文下 */
  .tl-item h3 { font-size: 18px; }
}

/* ---------- 20. 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .stage { transition: none; }
  .slide:not([data-role="main"]) { display: none; }
}

/* ---------- 20.5 触摸/无悬停指针：技能卡 hover 装饰关停（来源：动画机会发现 第1条） ----------
   触摸点按没有"悬停"语义，hover 态会滞留并误展开装饰；无 (hover:hover) 能力时
   卡片保持静态构图，仅尺寸/配色/入场的非交互动效继续生效。 */
@media (hover: none), (pointer: coarse) {
  .stack-card:hover,
  .stack-card:hover .content,
  .stack-card:hover::before,
  .stack-card:hover::after,
  .stack-card:nth-child(1):hover,
  .stack-card:nth-child(2):hover,
  .stack-card:nth-child(3):hover,
  .stack-card:nth-child(4):hover,
  .stack-card:nth-child(1):hover .content,
  .stack-card:nth-child(2):hover .content {
    transform: none !important;          /* 上浮/玻璃位移/斜层展开/光斑定位全停 */
    padding: 20px 36px !important;       /* 玻璃框保持基态内边距 */
    opacity: 1 !important;               /* 光斑不隐藏也不浮出 */
    filter: none !important;             /* 辉光不启用 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;  /* 阴影回到基态 */
  }
  /* 光斑本体一律隐藏（含 :hover 触发态）：touch 无悬停，不应出现浮动玻璃块 */
  .stack-card > span::before,
  .stack-card > span::after,
  .stack-card:hover > span::before,
  .stack-card:hover > span::after { opacity: 0 !important; animation: none !important; }
}

/* ---------- 20.5b 触摸/无悬停指针：其余 hover 位移/展开元素归位（动画优化 004，AUDIT §6）
   与 §20.5 同语义：触摸点按没有悬停，tap 会滞留 hover 态 → 位移/展开/辉光全部归回基态，
   仅保留颜色类反馈（变色 hover）。基态值抄自各元素静态定义。 */
@media (hover: none), (pointer: coarse) {
  /* 通用卡片上浮 */
  .card:hover,
  .skill-item:hover { transform: none !important; }
  .card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.30) !important; }
  .skill-item:hover { box-shadow: none !important; }
  /* 动态卡（最新动态）：卡片整体上浮（独立 translate）归零，玻璃左移 + padding 展开归位，阴影回基态 */
  .update-card:hover { translate: 0 0 !important; }
  .update-card:hover .content { transform: none !important; padding: 20px 36px !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important; }
  /* 动态卡：渐变斜层基态（translateX(50px) scaleX(1) skewX(15deg)），辉光与光斑关停 */
  .update-card:hover::before,
  .update-card:hover::after { transform: translateX(50px) scaleX(1) skewX(15deg) !important; }
  .update-card:hover::after { filter: none !important; }
  .update-card:hover > span::before,
  .update-card:hover > span::after { opacity: 0 !important; transform: translate(0, 0) scale(0.85) !important; animation: none !important; }
  /* 动态卡：Read Me 按钮跃动/圆角/阴影归位 */
  .update-card .more:hover { transform: none !important; border-radius: 4px !important; box-shadow: none !important; }
  /* 首页 CTA：悬浮位移/辉光归位（静态底色与流光层保留），流光不旋转 */
  .hero-actions .btn:hover { transform: none !important; box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.50),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.30),
    inset 7px -7px 1px -6px rgba(255, 255, 255, 0.30),
    inset -7px 7px 1px -6px rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 -8px 16px -8px rgba(0, 0, 0, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.35) !important; }
  .hero-actions .btn:hover::before { animation: none !important; opacity: 0.5 !important; }
}

/* ---------- 21. 首次进入 · 欢迎揭幕（品牌浮入 + 中间 print hello world，进度条已移除） ---------- */
.welcome {
  position: fixed;
  inset: 0;
  z-index: 300;                       /* 覆盖所有内容层（nav 100 / 纹理 2） */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;                /* 纯色不透明：与主页 --c-bg 同色，接管/移除均无缝、不透出 */
  visibility: hidden;                 /* 默认隐藏：JS 异常则不出现（fail-open） */
  overflow: hidden;
  pointer-events: none;               /* 不挡底层交互，翻页另由 welcomeActive 锁 */
}
.welcome.is-live { visibility: visible; }

/* 背景氛围层：青蓝光晕 + 斜向扫描光带 + 星点闪烁 */
.w-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 30% 18%, rgba(76, 195, 240, 0.07), transparent 55%),
    radial-gradient(ellipse at 76% 72%, rgba(139, 142, 247, 0.06), transparent 55%);
  transition: opacity 0.8s ease;
}
.welcome.is-live .w-bg { opacity: 1; }
.w-bg::before {                 /* 斜向扫描光带：数据流动感（放慢） */
  content: "";
  position: absolute;
  inset: -60% -30%;
  background: linear-gradient(105deg, transparent 42%, rgba(76, 195, 240, 0.055) 50%, transparent 58%);
  animation: wScan 7s linear infinite;
}
@keyframes wScan { from { transform: translateX(-28%); } to { transform: translateX(28%); } }
.w-bg::after {                  /* 星点闪烁 */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(140, 210, 255, 0.55), transparent),
    radial-gradient(1px 1px at 27% 68%, rgba(120, 190, 255, 0.45), transparent),
    radial-gradient(1px 1px at 41% 31%, rgba(150, 220, 255, 0.5), transparent),
    radial-gradient(1px 1px at 55% 74%, rgba(110, 180, 255, 0.4), transparent),
    radial-gradient(1px 1px at 63% 18%, rgba(140, 210, 255, 0.5), transparent),
    radial-gradient(1px 1px at 78% 52%, rgba(120, 190, 255, 0.45), transparent),
    radial-gradient(1px 1px at 88% 30%, rgba(150, 220, 255, 0.5), transparent),
    radial-gradient(1px 1px at 33% 86%, rgba(110, 180, 255, 0.4), transparent),
    radial-gradient(1px 1px at 71% 88%, rgba(140, 210, 255, 0.45), transparent),
    radial-gradient(1px 1px at 92% 78%, rgba(120, 190, 255, 0.4), transparent);
  animation: wStars 4.5s ease-in-out infinite alternate;
}
@keyframes wStars { from { opacity: 0.35; } to { opacity: 0.9; } }

/* 四角取景框：直角 L 从角落扩出 */
.w-frame { position: absolute; inset: 0; }
.w-frame i {
  position: absolute;
  width: 30px; height: 30px;
  border-color: rgba(76, 195, 240, 0.55);
  opacity: 0;
}
.w-frame .tl { top: 34px; left: 34px; border-top: 1px solid; border-left: 1px solid; transform-origin: top left; }
.w-frame .tr { top: 34px; right: 34px; border-top: 1px solid; border-right: 1px solid; transform-origin: top right; }
.w-frame .bl { bottom: 34px; left: 34px; border-bottom: 1px solid; border-left: 1px solid; transform-origin: bottom left; }
.w-frame .br { bottom: 34px; right: 34px; border-bottom: 1px solid; border-right: 1px solid; transform-origin: bottom right; }
.welcome.is-live .w-frame i { animation: frameIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.welcome.is-live .w-frame .tr, .welcome.is-live .w-frame .br { animation-delay: 0.08s; }
@keyframes frameIn { 0% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } }

/* 中央文案：浮入链（eyebrow → logo → sub → status） */
.w-copy { position: relative; text-align: center; }
.w-eyebrow {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--c-primary);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
  opacity: 0;
}
.w-logo { line-height: 1.05; margin-top: var(--sp-6); }   /* 位于 hello world 下方 */
.w-logo b {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.16em;
  color: var(--c-text);
  opacity: 0;
}
.w-logo b em { font-style: normal; color: var(--c-primary); }
.w-sub {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.42em;
  color: var(--c-text-dim);
  text-transform: uppercase;
  margin-top: var(--sp-4);
  opacity: 0;
}
.welcome.is-live .w-eyebrow { animation: fadeUp 0.5s 0.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.welcome.is-live .w-status  { animation: fadeUp 0.4s 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.welcome.is-live .w-logo b  { animation: fadeUp 0.55s 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.welcome.is-live .w-sub     { animation: fadeUp 0.5s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* 中间内容：print hello world 打字（位于标志上方；大字号，与标志大小互换） */
.w-status {
  margin-top: var(--sp-4);
  font-family: var(--f-mono);
  font-size: 64px;
  letter-spacing: 0.08em;
  color: var(--c-text);
  opacity: 0;
}
.w-caret { color: var(--c-primary); margin-right: 0.5em; }
.w-cursor {
  display: inline-block;
  width: 4px;                        /* 细竖线插入光标（常用样式），不覆盖字母 */
  height: 1.2em;
  margin-left: 0.12em;
  vertical-align: text-bottom;
  background: var(--c-primary);
  box-shadow: 0 0 8px rgba(76, 195, 240, 0.7), 0 0 16px rgba(76, 195, 240, 0.45);   /* 光标自发光 */
  animation: wBlink 1s steps(1) infinite;
}
@keyframes wBlink { 50% { opacity: 0; } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* 揭幕收尾：封面整体渐淡（1→0），时长与 main.js CFG.welcomeReveal(760) 同步 */
.welcome.is-out { animation: welcomeFade 0.7s ease forwards; }
@keyframes welcomeFade { to { opacity: 0; } }

/* 欢迎播放期间：主页整体隐藏为暗场（不透出、不提前曝光内容） */
body.welcome-boot .app,
body.welcome-boot .bg-atmosphere,
body.welcome-boot .nav { opacity: 0; }

/* 收尾揭幕：主页随封面渐淡同步从暗场浮现（0→1），错峰 0.15s 先暗后亮
   时长与 main.js CFG.welcomeSettle(940) 同步 */
body.welcome-boot .app.w-rising,
body.welcome-boot .bg-atmosphere.w-rising,
body.welcome-boot .nav.w-rising { animation: appRise 0.9s ease 0.15s forwards; }
@keyframes appRise { from { opacity: 0; } to { opacity: 1; } }

/* 窄屏：标志与 print 行收小（等宽大字号需适应窄屏宽度） */
@media (max-width: 768px) {
  .w-logo b { font-size: 18px; }
  .w-status { font-size: 30px; }
}