/* ============ 主题 token ============
   默认深色（终端本色）。浅色 token 出现两次：
   一次给「未手动选择时跟随系统」，一次给「手动选择 light」，
   两处必须保持一致。
   浅色 muted / accent2 已按 WCAG AA（4.5:1）校准，改值前先算对比度。 */
:root {
  color-scheme: dark;
  --bg: #010409;
  --term-bg: #0d1117;
  --term-border: #30363d;
  --fg: #e6edf3;
  --muted: #8b949e;
  --accent: #3fb950;
  --accent-dim: rgba(63, 185, 80, 0.14);
  --accent2: #d29922;
  --link: #79c0ff;
  --blue: #58a6ff;
  --selection: rgba(63, 185, 80, 0.35);
  --dot1: #ff5f56;
  --dot2: #ffbd2e;
  --dot3: #27c93f;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  /* AI 视觉：渐变三色、字形光晕、页面氛围光 */
  --ai-g1: #3fb950;
  --ai-g2: #2dd4bf;
  --ai-g3: #a78bfa;
  --ai-gradient: linear-gradient(120deg, var(--ai-g1), var(--ai-g2) 45%, var(--ai-g3));
  --ai-glow: rgba(45, 212, 191, 0.22);
  --ai-glow-strong: rgba(45, 212, 191, 0.5);
  --cursor-glow: rgba(45, 212, 191, 0.1);
  --aurora1: rgba(63, 185, 80, 0.14);
  --aurora2: rgba(167, 139, 250, 0.13);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #eee8d5;
    --term-bg: #fdf6e3;
    --term-border: #d5cdb6;
    --fg: #433f38;
    --muted: #6e6551;
    --accent: #178035;
    --accent-dim: rgba(23, 128, 53, 0.12);
    --accent2: #8a6806;
    --link: #1a63a8;
    --blue: #1a63a8;
    --selection: rgba(23, 128, 53, 0.22);
    --shadow: 0 18px 50px rgba(101, 92, 70, 0.28);
    --ai-g1: #178035;
    --ai-g2: #0d9488;
    --ai-g3: #6d4fc4;
    --ai-glow: rgba(13, 148, 136, 0.15);
    --ai-glow-strong: rgba(13, 148, 136, 0.3);
    --cursor-glow: rgba(13, 148, 136, 0.07);
    --aurora1: rgba(23, 128, 53, 0.09);
    --aurora2: rgba(109, 79, 196, 0.08);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eee8d5;
  --term-bg: #fdf6e3;
  --term-border: #d5cdb6;
  --fg: #433f38;
  --muted: #6e6551;
  --accent: #178035;
  --accent-dim: rgba(23, 128, 53, 0.12);
  --accent2: #8a6806;
  --link: #1a63a8;
  --blue: #1a63a8;
  --selection: rgba(23, 128, 53, 0.22);
  --shadow: 0 18px 50px rgba(101, 92, 70, 0.28);
  --ai-g1: #178035;
  --ai-g2: #0d9488;
  --ai-g3: #6d4fc4;
  --ai-glow: rgba(13, 148, 136, 0.15);
  --ai-glow-strong: rgba(13, 148, 136, 0.3);
  --cursor-glow: rgba(13, 148, 136, 0.07);
  --aurora1: rgba(23, 128, 53, 0.09);
  --aurora2: rgba(109, 79, 196, 0.08);
}

/* 手动切换主题时由 JS 挂上 .theming，统一让全页颜色一起渐变，避免一半瞬变一半渐变 */
html.theming,
html.theming *,
html.theming *::before,
html.theming *::after {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ============ 基础 ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  /* 等宽栈之后显式声明中文字体，避免 Windows 上 monospace 泛型回退到宋体 */
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", "PingFang SC", "Microsoft YaHei", monospace;
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg);
  background: var(--bg);
  padding: 48px 16px 32px;
}

/* AI 氛围光：两团极淡的绿 / 紫光晕铺在视口上方，缓慢漂移。
   固定伪元素 + transform 动画，走合成器，不触发整页重绘 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(52% 38% at 16% -8%, var(--aurora1) 0%, transparent 62%),
    radial-gradient(46% 34% at 86% 2%, var(--aurora2) 0%, transparent 62%);
  animation: aurora-drift 10s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  to { transform: translate3d(-1.5%, -5%, 0) scale(1.12); opacity: 0.6; }
}

/* 顶部流星线：一段带光晕的渐变短线沿视口顶部左→右滑过，循环之间留空档 */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: -240px;
  width: 240px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ai-g1), var(--ai-g2));
  box-shadow: 0 0 12px var(--ai-glow-strong);
  z-index: 3;
  pointer-events: none;
  animation: meteor 4.5s cubic-bezier(0.35, 0, 0.65, 1) infinite;
}
@keyframes meteor {
  0% { transform: translateX(0); opacity: 0; }
  6% { opacity: 1; }
  52% { opacity: 1; }
  60% { transform: translateX(calc(100vw + 480px)); opacity: 0; }
  100% { transform: translateX(calc(100vw + 480px)); opacity: 0; }
}

::selection { background: var(--selection); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

a { color: var(--link); text-decoration: none; }
a:hover { background: var(--accent-dim); text-decoration: underline; text-underline-offset: 3px; }

.muted { color: var(--muted); }
.hash { color: var(--accent2); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ 终端窗口 ============ */
.terminal {
  max-width: 780px;
  margin: 0 auto;
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.js .terminal { animation: boot 0.35s ease both; }
@keyframes boot {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--term-border);
}

/* 三色圆点纯装饰，不给 hover 反馈以免暗示可点 */
.dots { display: flex; gap: 8px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; }
.dots i:nth-child(1) { background: var(--dot1); }
.dots i:nth-child(2) { background: var(--dot2); }
.dots i:nth-child(3) { background: var(--dot3); }

.titlebar .title {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* 标题栏的 AI 状态灯：缓慢呼吸的 ✦ */
.ai-dot {
  display: inline-block;
  color: var(--accent);
  animation: breathe 2.8s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: 0.25; } }

#theme-toggle {
  position: relative;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 1px solid var(--term-border);
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
#theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
/* 视觉尺寸不变，把可点区域扩到 44px 级别 */
#theme-toggle::after { content: ""; position: absolute; inset: -9px; }

/* ============ 内容区 ============ */
.screen { padding: 30px 30px 44px; }

.block { margin-top: 34px; scroll-margin-top: 28px; }
.block:first-child { margin-top: 0; }
/* 板块之间的虚线分隔，让每个板块一眼可辨 */
.block + .block { border-top: 1px dashed var(--term-border); padding-top: 26px; }

/* ============ 命令行 ============ */
.cmdline {
  display: flex;
  align-items: baseline;
  gap: 1ch;
  white-space: nowrap;
}
.prompt { color: var(--accent); flex: none; }
.cmd { color: var(--fg); font-weight: 600; }

/* 未轮到的板块整行隐藏；prompt 瞬现（终端语汇里没有「淡入的提示符」） */
.js .block .cmdline { opacity: 0; }
.js .block.active .cmdline { opacity: 1; }

.caret {
  display: none;
  width: 0.6em; height: 1.1em;
  margin-left: 2px;
  background: var(--ai-gradient);
  transform: translateY(0.18em);
}
.cmdline.typing .caret { display: inline-block; animation: blink 1s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }

/* ============ 输出块 ============ */
.output { margin-top: 14px; }
.output > p + p { margin-top: 0.9em; }

/* 快速淡现，不位移——终端输出是「打印」出来的，不会从下面飘上来 */
.js .block .output { opacity: 0; transition: opacity 0.18s ease; }
.js .block.revealed .output { opacity: 1; }

/* ============ Hero ============ */
.figlet {
  font-family: inherit;
  font-size: clamp(9px, 2.4vw, 15px);
  line-height: 1.25;
  color: var(--accent);
  overflow-x: auto;
  filter: drop-shadow(0 0 22px var(--ai-glow));
  animation: glow-breathe 3.6s ease-in-out infinite;
}

/* LOGO 辉光呼吸 */
@keyframes glow-breathe {
  0%, 100% { filter: drop-shadow(0 0 12px var(--ai-glow)); }
  50% { filter: drop-shadow(0 0 34px var(--ai-glow-strong)); }
}

/* AI 渐变文字：figlet 大字与板块标题的 ✦，形成贯穿全页的视觉线索；
   不支持 background-clip: text 的浏览器回退为实色 */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .figlet,
  .sec-title::before {
    background-image: var(--ai-gradient);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .sec-title::before {
    animation:
      gradient-flow 3.5s ease-in-out infinite alternate,
      breathe 2.8s ease-in-out infinite;
  }
  .figlet {
    animation:
      gradient-flow 3.5s ease-in-out infinite alternate,
      glow-breathe 3.6s ease-in-out infinite;
  }
}
/* 渐变流动：大字上是三色横向流动，单个 ✦ 上表现为颜色循环 */
@keyframes gradient-flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.hero-title { font-size: 17px; font-weight: 700; margin-top: 14px; }
.hero-sub {
  display: inline-block;
  margin-left: 1ch;
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
}
.tagline { margin-top: 6px; color: var(--muted); }

/* 身份词轮播的打字光标 */
.hero-sub.rotating::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--ai-gradient);
  animation: blink 1s steps(1) infinite;
}

/* ============ 板块标题 ============ */
.sec-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.sec-title::before {
  content: "✦";
  margin-right: 0.5ch;
  color: var(--accent);
  /* 与标题栏状态灯同款同节奏的呼吸闪烁 */
  animation: breathe 2.8s ease-in-out infinite;
}

/* ============ posts：树形列表 ============ */
.tree { list-style: none; }
.tree li { position: relative; padding-left: 4ch; margin-top: 14px; }
.tree li::before {
  content: "├──";
  position: absolute; left: 0;
  color: var(--muted);
}
.tree li:last-child::before { content: "└──"; }

.post-link { color: var(--fg); }
.post-link:hover { color: var(--link); }
.post-link .date { color: var(--muted); margin-right: 1ch; font-size: 13px; }

.desc { color: var(--muted); font-size: 13px; line-height: 1.7; }
/* 11ch = 日期 10ch + 间隔 1ch，让简介和标题首字对齐 */
.tree .desc { padding-left: 11ch; }

/* ============ projects ============ */
.proj { list-style: none; }
.proj li { margin-top: 18px; }
.proj li:first-child { margin-top: 4px; }

.proj-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proj-name { color: var(--accent); font-weight: 700; }
.proj-name:hover { color: var(--accent); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--term-border);
  color: var(--muted);
}
.badge i { width: 6px; height: 6px; border-radius: 50%; }
.b-active i { background: var(--accent); animation: pulse 2s ease-in-out infinite; }
.b-shipped i { background: var(--blue); }
.b-building i { background: var(--accent2); }

@keyframes pulse { 50% { opacity: 0.25; } }

/* ============ contact ============ */
.kv div { display: flex; gap: 2ch; margin-top: 6px; }
.kv dt { color: var(--muted); width: 8ch; flex: none; }

.qr-ph {
  margin-top: 18px;
  width: 132px; height: 132px;
  border: 1.5px dashed var(--muted);
  border-radius: 8px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* ============ 交互终端 ============ */
#shell-log .cmdline { opacity: 1; margin-top: 10px; }
#shell-log .shell-out {
  font-family: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 4px;
  color: var(--fg);
}
#shell-log .shell-out.muted { color: var(--muted); }

.shell-line { margin-top: 10px; }
#shell-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--fg);
  background: none;
  border: none;
  outline: none;
  caret-color: var(--accent);
}
#shell-input::placeholder { color: var(--muted); opacity: 0.7; }

.hint { margin-top: 14px; color: var(--muted); font-size: 13px; }

/* 无 JS 时交互终端没有意义，整体隐藏 */
html:not(.js) #shell { display: none; }

/* ============ 鼠标跟随光晕（仅桌面指针设备，由 JS 创建） ============ */
.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cursor-glow) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}

/* ============ 页脚 ============ */
.pagefoot {
  max-width: 780px;
  margin: 20px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* ============ 响应式 ============ */
@media (max-width: 600px) {
  body { padding: 20px 10px 24px; }
  .screen { padding: 22px 16px 32px; }
  .block { margin-top: 30px; }
  .block + .block { padding-top: 22px; }
  .hero-sub { display: block; margin-left: 0; }
  .tree .desc { padding-left: 0; }
  .kv div { flex-direction: column; gap: 0; }
  .kv dt { width: auto; }
  .cmdline { white-space: normal; }
}

/* ============ 打印 ============ */
@media print {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --term-bg: #ffffff;
    --term-border: #bbbbbb;
    --fg: #111111;
    --muted: #555555;
    --accent: #1a7f37;
    --accent2: #6a5200;
    --link: #0a4d8c;
    --blue: #0a4d8c;
    --shadow: none;
  }
  body { padding: 0; }
  .terminal { box-shadow: none; animation: none; }
  /* 未播放的动画块也要完整印出来（JS 的 beforeprint 会补全命令文本） */
  .js .block .cmdline,
  .js .block .output { opacity: 1 !important; }
  .caret { display: none !important; }
  #theme-toggle, #shell { display: none !important; }
  /* 渐变文字与光效在打印时还原为实色 */
  .figlet, .sec-title::before { background: none !important; color: var(--accent) !important; }
  .figlet { filter: none !important; }
  body::before, body::after, .cursor-glow { display: none; }
}

/* ============ 降级：关闭动效 ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}