/* ===== RESET ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== 设计系统变量 ===== */
/* 整个网站的颜色、字体都从这里取，修改颜色只需改这里 */
:root {
  --bg: #080810;
  --surface: #111120;
  --border: #1e1e35;
  --text: #e2e8f0;
  --muted: #5e7284;
  --purple: #4878a8;
  --mint: #558868;
  --purple-dim: rgba(72, 120, 168, 0.10);
  --mint-dim: rgba(85, 136, 104, 0.09);
  --slate: #6a8088;
  --slate-dim: rgba(106, 128, 136, 0.10);
  --font: 'JetBrains Mono', monospace;
}

/* ===== 基础样式 ===== */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  /* 点阵背景纹理，低透明度，科技感 */
  background-image: radial-gradient(circle, rgba(139, 92, 246, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
}

/* ===== 顶部导航栏 ===== */
/* 固定在顶部，滚动时始终可见，带毛玻璃效果 */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: rgba(8, 8, 16, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.nav-inner {
  max-width: 760px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 0;
}

.nav-logo {
  font-size: 14px;
  font-weight: 700;
  color: var(--purple);
  letter-spacing: 0.05em;
}

.nav-links {
  display: flex;
  gap: 24px;
}

.nav-links a {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
}

/* ===== 各 Section 通用样式 ===== */
/* 初始状态隐藏（JS 控制滚动时淡入） */
section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* JS 添加此类后，section 淡入显示 */
section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero 区域直接可见，不需要淡入 */
#hero {
  opacity: 1;
  transform: none;
}

/* 内容区：最大宽度 760px，左右居中 */
.section-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 96px 24px;
}

/* "// about" 这样的小标签 */
.section-label {
  display: block;
  font-size: 12px;
  color: var(--purple);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

/* 区块标题 */
.section-heading {
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

/* 标题下的副标题 */
.section-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: -16px;
  margin-bottom: 32px;
}

/* ===== HERO 区域 ===== */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 大名字 */
.hero-name {
  font-size: clamp(48px, 8vw, 80px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* 名字后面的闪烁光标 _ */
.cursor::after {
  content: '_';
  color: var(--purple);
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* 日文/假名静态名字 */
.hero-jp {
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 300;
 font-size: 14px;
 color: var(--slate);
 margin-top: 10px;
 letter-spacing: 0.06em;
}

.hero-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin-top: 28px;
  letter-spacing: 0.05em;
  min-height: 22px;
}

.cursor-sub::after {
  content: '|';
  color: var(--mint);
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}

/* 页面底部的"↓ scroll"提示 */
.scroll-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 64px;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

/* ===== ABOUT 区域 ===== */
.about-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.about-body p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
}

/* 日文名展示区，左侧有紫色竖线 */
.jp-name {
  display: inline-flex;
  flex-direction: column;
  border-left: 2px solid var(--purple);
  padding-left: 20px;
  gap: 4px;
}

.jp-kanji {
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.05em;
}

.jp-reading {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* ===== SKILLS 区域 ===== */
.skill-group {
  margin-bottom: 32px;
}

.skill-group:last-child {
  margin-bottom: 0;
}

/* 技能分组标题，如 "DATA & ANALYSIS" */
.skill-group-label {
  font-size: 11px;
  color: var(--purple);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* 标签容器，允许换行 */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 单个标签基础样式（胶囊形状） */
.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--font);
  transition: all 0.2s ease;
}

/* 薄荷色标签：用于数据分析类技能 */
.tags-mint .tag {
  background: var(--mint-dim);
  border: 1px solid rgba(45, 212, 191, 0.3);
  color: var(--mint);
}

.tags-mint .tag:hover {
  background: rgba(45, 212, 191, 0.18);
  border-color: var(--mint);
}

/* 紫色标签：用于会计财务类技能 */
.tags-purple .tag {
  background: var(--purple-dim);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: var(--purple);
}

.tags-purple .tag:hover {
  background: rgba(139, 92, 246, 0.22);
  border-color: var(--purple);
}

/* 中性标签：用于语言技能 */
.tags-neutral .tag {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

.tags-neutral .tag:hover {
  border-color: var(--muted);
  color: var(--text);
}

.tags-slate .tag {
  background: var(--slate-dim);
  border: 1px solid rgba(122, 143, 166, 0.28);
  color: var(--slate);
}

.tags-slate .tag:hover {
  background: rgba(122, 143, 166, 0.18);
  border-color: var(--slate);
  color: var(--text);
}

/* ===== PROJECTS 区域 ===== */
.project-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 项目卡片：深色背景 + 细边框，hover 时边框变紫 */
.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px;
  transition: border-color 0.2s ease;
}

.project-card:hover {
  border-color: var(--purple);
}

/* 卡片顶部：左边是标题，右边是年份标签 */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.card-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* 右上角小标签，如 "MCM/ICM 2020 · Problem E" */
.card-badge {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 4px;
}

/* 进行中的项目标签用薄荷色 */
.card-badge-active {
  color: var(--mint);
}

.card-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* ===== EDUCATION 区域 ===== */
.edu-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 每条教育经历，左侧有竖线 */
.edu-entry {
  border-left: 2px solid var(--border);
  padding-left: 20px;
}

/* 当前/主要学历，竖线用紫色 */
.edu-entry-active {
  border-left-color: var(--purple);
}

.edu-institution {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.edu-degree {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}

.edu-meta {
  font-size: 12px;
  color: var(--muted);
}

.edu-note {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: 6px;
}

/* ===== CONTACT 区域 ===== */
.contact-list {
  display: flex;
  flex-direction: column;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.contact-icon {
  font-size: 16px;
  color: var(--muted);
  width: 24px;
  text-align: center;
}

/* GH / in 这类文字图标 */
.contact-icon-text {
 font-size: 11px;
 font-weight: 700;
 color: var(--slate);
 letter-spacing: 0.05em;
 width: 24px;
 text-align: center;
}

.contact-label {
  font-size: 13px;
  color: var(--text);
  width: 80px;
}

.contact-placeholder {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* ===== 页脚 ===== */
footer {
  padding: 32px 24px;
  text-align: center;
}

.footer-text {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
}

/* ===== 弹窗：毛玻璃蒙层 ===== */
.modal-overlay {
 position: fixed;
 inset: 0;
 background: rgba(4, 4, 12, 0.75);
 backdrop-filter: blur(18px) saturate(0.5);
 -webkit-backdrop-filter: blur(18px) saturate(0.5);
 z-index: 200;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.25s ease;
}

.modal-overlay.open {
 opacity: 1;
 pointer-events: auto;
}

/* ===== 弹窗主体 ===== */
.modal-box {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 16px;
 width: 100%;
 max-width: 620px;
 max-height: 85vh;
 overflow-y: auto;
 padding: 32px;
 transform: translateY(16px);
 transition: transform 0.25s ease;
 scrollbar-width: thin;
 scrollbar-color: var(--border) transparent;
}

.modal-overlay.open .modal-box {
 transform: translateY(0);
}

.modal-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 28px;
}

.modal-label {
 font-size: 11px;
 color: var(--purple);
 letter-spacing: 0.1em;
 margin-bottom: 6px;
}

.modal-title {
 font-size: 22px;
 font-weight: 500;
 color: var(--text);
}

.modal-close {
 background: transparent;
 border: 1px solid var(--border);
 color: var(--muted);
 font-family: var(--font);
 font-size: 14px;
 width: 32px;
 height: 32px;
 border-radius: 8px;
 cursor: pointer;
 transition: all 0.2s ease;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}

.modal-close:hover {
 border-color: var(--purple);
 color: var(--text);
}

.modal-section {
 margin-bottom: 24px;
 padding-bottom: 24px;
 border-bottom: 1px solid var(--border);
}

.modal-section:last-child {
 margin-bottom: 0;
 padding-bottom: 0;
 border-bottom: none;
}

.modal-section-label {
 font-size: 11px;
 color: var(--mint);
 letter-spacing: 0.1em;
 text-transform: uppercase;
 margin-bottom: 12px;
}

.modal-text {
 font-size: 13px;
 color: var(--muted);
 line-height: 1.75;
}

/* Approach 列表 */
.modal-items {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.modal-item {
 display: flex;
 gap: 16px;
 font-size: 13px;
}

.modal-item-label {
 color: var(--purple);
 min-width: 110px;
 flex-shrink: 0;
}

.modal-item-value {
 color: var(--muted);
 line-height: 1.6;
}


/* ===== Signal vs Substantive 对比格 ===== */
.signal-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
}

.signal-box {
 border-radius: 10px;
 padding: 16px;
}

.signal-box-label {
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 margin-bottom: 10px;
}

.signal-box-items {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.signal-box-items li {
 font-size: 12px;
 color: var(--muted);
 line-height: 1.5;
}

.signal-box-signal {
 background: var(--purple-dim);
 border: 1px solid rgba(139, 92, 246, 0.3);
}

.signal-box-signal .signal-box-label {
 color: var(--purple);
}

.signal-box-substantive {
 background: var(--mint-dim);
 border: 1px solid rgba(45, 212, 191, 0.3);
}

.signal-box-substantive .signal-box-label {
 color: var(--mint);
}

/* ===== 论文状态栏 ===== */
.thesis-status {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 12px;
 color: var(--muted);
 padding: 12px 16px;
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 8px;
}

.thesis-status-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--mint);
 flex-shrink: 0;
 animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.35; }
}

@media (max-width: 640px) {
 .signal-grid { grid-template-columns: 1fr; }
}

/* 手机适配 */
@media (max-width: 640px) {
 .modal-box {
 padding: 20px;
 }
 .signal-grid {
 grid-template-columns: 1fr;
 }
}

/* ===== 响应式：手机适配（屏幕宽度 ≤ 640px） ===== */
@media (max-width: 640px) {
  .hero-name {
    font-size: clamp(36px, 12vw, 56px);
  }

  .section-inner {
    padding: 64px 20px;
  }

  .section-heading {
    font-size: 22px;
  }

  .project-card {
    padding: 20px;
  }

  .card-top {
    flex-direction: column;
    gap: 8px;
  }

  .card-title {
    font-size: 17px;
  }
}


/* ===== Contact 实际信息样式 ===== */
.contact-value {
 font-size: 13px;
 color: var(--mint);
 text-decoration: none;
 transition: color 0.2s ease;
}

.contact-value:hover {
 color: var(--text);
}

.contact-info {
 font-size: 13px;
 color: var(--muted);
}

.contact-icon-text-slate {
 font-size: 11px;
 font-weight: 700;
 color: var(--slate);
 letter-spacing: 0.05em;
 width: 24px;
 text-align: center;
}

.about-closing {
 font-size: 14px;
 color: var(--muted);
 line-height: 1.8;
 border-left: 2px solid var(--border);
 padding-left: 16px;
 margin-top: 8px;
}

/* ===== 2026-05-10 polish: pixel cat, slate accents, contact, thesis ===== */


/* slate 标签 */
.tags-slate .tag {
 background: var(--slate-dim);
 border: 1px solid rgba(122, 143, 166, 0.28);
 color: var(--slate);
}
.tags-slate .tag:hover {
 background: rgba(122, 143, 166, 0.18);
 border-color: var(--slate);
 color: var(--text);
}

/* 导航链接默认色 */
.nav-links a { color: var(--slate); }
.nav-links a:hover,
.nav-links a.active { color: var(--text); }

/* hero 静态文字 */
.hero-jp {
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 300;
 font-size: 14px;
 color: var(--slate);
 margin-top: 10px;
 letter-spacing: 0.06em;
}
.scroll-hint { color: var(--slate); }

/* about 结尾段 */
.about-closing {
 font-size: 14px;
 color: var(--muted);
 line-height: 1.8;
 border-left: 2px solid var(--slate);
 padding-left: 16px;
 margin-top: 8px;
 opacity: 0.85;
}

/* 卡片右上角标注 */
.card-badge { color: var(--slate); }

/* education 竖线 */
.edu-entry { border-left: 2px solid var(--slate); opacity: 0.7; }
.edu-entry-active { border-left-color: var(--purple); opacity: 1; }

/* contact */
.contact-value {
 font-size: 13px;
 color: var(--mint);
 text-decoration: none;
 transition: color 0.2s ease;
}
.contact-value:hover { color: var(--text); }
.contact-info { font-size: 13px; color: var(--slate); }
.contact-icon-text-slate {
 font-size: 11px;
 font-weight: 700;
 color: var(--slate);
 letter-spacing: 0.05em;
 width: 24px;
 text-align: center;
}

/* thesis 弹窗 */
.thesis-status {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 12px;
 color: var(--muted);
 padding: 12px 16px;
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 8px;
}
.thesis-status-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--mint);
 flex-shrink: 0;
 animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.35; }
}

/* signal grid */
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.signal-box { border-radius: 10px; padding: 16px; }
.signal-box-label {
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 margin-bottom: 10px;
}
.signal-box-items { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.signal-box-items li { font-size: 12px; color: var(--muted); line-height: 1.5; }
.signal-box-signal {
 background: var(--purple-dim);
 border: 1px solid rgba(124, 101, 212, 0.3);
}
.signal-box-signal .signal-box-label { color: var(--purple); }
.signal-box-substantive {
 background: var(--mint-dim);
 border: 1px solid rgba(43, 168, 154, 0.3);
}
.signal-box-substantive .signal-box-label { color: var(--mint); }

@media (max-width: 640px) {
 .signal-grid { grid-template-columns: 1fr; }
}

/* ===== 2026-05-10 root/css refresh ===== */


/* 导航链接默认色改为 slate */
.nav-links a { color: var(--slate); }
.nav-links a:hover,
.nav-links a.active { color: var(--text); }

/* hero 静态日文名 */
.hero-jp {
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 300;
 font-size: 14px;
 color: var(--slate);
 margin-top: 10px;
 letter-spacing: 0.06em;
}

/* 滚动提示 */
.scroll-hint { color: var(--slate); opacity: 0.7; }

/* about 结尾引用段 */
.about-closing {
 font-size: 14px;
 color: var(--muted);
 line-height: 1.8;
 border-left: 2px solid var(--slate);
 padding-left: 16px;
 margin-top: 8px;
}

/* slate 标签组 */
.tags-slate .tag {
 background: var(--slate-dim);
 border: 1px solid rgba(122, 143, 166, 0.28);
 color: var(--slate);
}
.tags-slate .tag:hover {
 background: rgba(122, 143, 166, 0.18);
 border-color: var(--slate);
 color: var(--text);
}

/* 卡片右上角非 active 标注 */
.card-badge { color: var(--slate); }

/* Education 竖线 */
.edu-entry { border-left: 2px solid var(--slate); opacity: 0.75; }
.edu-entry-active { border-left-color: var(--purple); opacity: 1; }

/* Education 国家小标注 */
.edu-country {
 font-size: 11px;
 color: var(--slate);
 font-weight: 400;
 letter-spacing: 0.05em;
 margin-left: 10px;
 vertical-align: middle;
}

/* contact */
.contact-value {
 font-size: 13px;
 color: var(--mint);
 text-decoration: none;
 transition: color 0.2s ease;
}
.contact-value:hover { color: var(--text); }
.contact-info { font-size: 13px; color: var(--slate); }
.contact-icon-text-slate {
 font-size: 11px;
 font-weight: 700;
 color: var(--slate);
 letter-spacing: 0.05em;
 width: 24px;
 text-align: center;
}

/* thesis 弹窗 */
.thesis-status {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 12px;
 color: var(--muted);
 padding: 12px 16px;
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 8px;
}
.thesis-status-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--mint);
 flex-shrink: 0;
 animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.35; }
}

/* signal grid */
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.signal-box { border-radius: 10px; padding: 16px; }
.signal-box-label {
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 margin-bottom: 10px;
}
.signal-box-items { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.signal-box-items li { font-size: 12px; color: var(--muted); line-height: 1.5; }
.signal-box-signal {
 background: var(--purple-dim);
 border: 1px solid rgba(124, 101, 212, 0.3);
}
.signal-box-signal .signal-box-label { color: var(--purple); }
.signal-box-substantive {
 background: var(--mint-dim);
 border: 1px solid rgba(43, 168, 154, 0.3);
}
.signal-box-substantive .signal-box-label { color: var(--mint); }


.nav-cat {
 color: var(--purple);
 transition: color 0.15s steps(3, end);
 cursor: pointer;
 display: flex;
 align-items: center;
}

.cat-wrapper {
 display: flex;
 align-items: center;
}

/* 常态：慢速像素浮动，二值跳变 */
.nav-cat svg {
 display: block;
 shape-rendering: crispEdges;
 animation: cat-bob 1.4s steps(1, end) infinite;
}

@keyframes cat-bob {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-2px); }
}

/* hover：像素跳跃，替换浮动 */
@media (hover: hover) and (pointer: fine) {
 .nav-cat:hover {
 color: var(--mint);
 }
 .nav-cat:hover svg {
 animation: cat-hop 0.5s steps(4, end) infinite;
 }
 .nav-cat:hover .cat-eye {
 animation: none;
 transform: scaleY(0.28);
 }
}

@keyframes cat-hop {
 0% { transform: translateY(0); }
 25% { transform: translateY(-5px); }
 60% { transform: translateY(-5px); }
 85% { transform: translateY(0); }
 100% { transform: translateY(0); }
}

/* 眨眼：即开即关，像素翻转 */
.cat-eye {
 transform-box: fill-box;
 transform-origin: center;
 animation: cat-blink 4s steps(1, end) infinite;
}

.cat-eye + .cat-eye { animation-delay: 0.06s; }

@keyframes cat-blink {
 0%, 88% { transform: scaleY(1); }
 90%, 95% { transform: scaleY(0.05); }
 96% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
 .nav-cat svg { animation: none; }
 .cat-eye { animation: none; }
}


/* 像素粒子 */
.cat-particle {
 position: fixed;
 pointer-events: none;
 image-rendering: pixelated;
 border-radius: 0;
 z-index: 9999;
 transition: none;
}


/* ===== Language switcher ===== */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.05em;
  margin-left: 10px;
  margin-right: auto;
}

.lang-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--slate);
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 0;
  transition: color 0.2s ease;
}

.lang-btn:hover,
.lang-btn.active {
  color: var(--purple);
}

.lang-separator {
  color: var(--border);
  user-select: none;
}

/* ===== 汉堡按钮（桌面隐藏）===== */
.nav-hamburger {
 display: none;
 flex-direction: column;
 gap: 4px;
 background: transparent;
 border: none;
 cursor: pointer;
 padding: 4px;
 color: var(--slate);
 transition: color 0.15s steps(3, end);
}

.nav-hamburger:hover { color: var(--purple); }

.hamburger-bar {
 display: block;
 width: 18px;
 height: 2px;
 background: currentColor;
 transition: transform 0.15s steps(3, end), opacity 0.1s steps(2, end);
}

/* 打开时变成 × */
.nav-hamburger.is-open .hamburger-bar:nth-child(1) {
 transform: translateY(6px) rotate(45deg);
}
.nav-hamburger.is-open .hamburger-bar:nth-child(2) {
 opacity: 0;
}
.nav-hamburger.is-open .hamburger-bar:nth-child(3) {
 transform: translateY(-6px) rotate(-45deg);
}

/* ===== 手机菜单（桌面隐藏）===== */
.mobile-menu {
 display: none;
 position: fixed;
 top: 48px;
 left: 0;
 right: 0;
 background: rgba(8, 8, 16, 0.97);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--border);
 flex-direction: column;
 z-index: 99;
 padding: 8px 0;
}

.mobile-menu.open {
 display: flex;
}

.mobile-link {
 font-family: var(--font);
 font-size: 14px;
 color: var(--slate);
 text-decoration: none;
 padding: 14px 24px;
 border-bottom: 1px solid var(--border);
 transition: color 0.15s steps(3, end),
 background 0.1s steps(2, end);
}

.mobile-link:last-child { border-bottom: none; }

.mobile-link:hover,
.mobile-link.active { color: var(--text); }

/* ===== 手机端响应式 ===== */
@media (max-width: 640px) {
 .nav-links { display: none; }
 .nav-hamburger { display: flex; }
}

/* ===== 项目卡片 view more 分隔线 ===== */
.card-viewmore {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 20px 0 16px;
 cursor: pointer;
}

/* 左侧延伸线 */
.card-viewmore::before {
 content: '';
 flex: 1;
 height: 1px;
 background: var(--border);
 transition: background 0.2s steps(3, end);
}

.viewmore-text {
 font-family: var(--font);
 font-size: 11px;
 color: var(--mint);
 letter-spacing: 0.1em;
 transition: color 0.15s steps(3, end);
}

.viewmore-arrow {
 font-family: var(--font);
 font-size: 11px;
 color: var(--mint);
 display: inline-block;
 transition: transform 0.15s steps(3, end);
}

@media (hover: hover) and (pointer: fine) {
 .card-viewmore:hover::before {
 background: rgba(43, 168, 154, 0.3);
 }
 .card-viewmore:hover .viewmore-arrow {
 transform: translateX(3px);
 }
}

/* ===== 极光动态渐变 ===== */
@keyframes aurora-border-flow {
 0% { background-position: 0% 50%; }
 100% { background-position: 300% 50%; }
}

@keyframes aurora-line-flow {
 0% { background-position: 0% 50%; }
 100% { background-position: 200% 50%; }
}

@keyframes aurora-vline-flow {
 0% { background-position: 50% 0%; }
 100% { background-position: 50% 300%; }
}

/* 项目卡片：hover 时边框变为流动极光 */
.project-card {
 position: relative;
 isolation: isolate;
}

.project-card::before {
 content: '';
 position: absolute;
 inset: -1px;
 border-radius: 13px;
 padding: 1px;
 background: linear-gradient(
 90deg,
 #5848c0, #2870b8, #20a0a8, #28a878, #5848c0
 );
 background-size: 300% 100%;
 -webkit-mask:
 linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0);
 -webkit-mask-composite: destination-out;
 mask:
 linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0);
 mask-composite: exclude;
 z-index: -1;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s ease;
 animation: aurora-border-flow 4s linear infinite;
 animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
 .project-card:hover {
 border-color: transparent;
 }
 .project-card:hover::before {
 opacity: 1;
 animation-play-state: running;
 }
}

/* view more 横线：始终流动 */
.card-viewmore::before {
 background: linear-gradient(
 90deg,
 transparent, #5848c0, #2870b8, #20a0a8, #28a878, transparent
 );
 background-size: 200% 100%;
 animation: aurora-line-flow 3s linear infinite;
 transition: none;
}

/* 教育竖线：颜色从上到下持续流动 */
.edu-entry-active {
 border-left-color: transparent;
 position: relative;
}

.edu-entry-active::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 2px;
 border-radius: 1px;
 background: linear-gradient(
 180deg,
 #5848c0, #2870b8, #20a0a8, #28a878, #5848c0
 );
 background-size: 100% 300%;
 animation: aurora-vline-flow 3s linear infinite;
}

/* 减少动效偏好适配 */
@media (prefers-reduced-motion: reduce) {
 .project-card::before { animation: none; }
 .card-viewmore::before { animation: none; }
 .edu-entry-active::before {
 animation: none;
 background: #5848c0;
 }
}

/* 兼容原有 hover 规则：保持 view more 横线在 hover 时也使用同一流动极光 */
@media (hover: hover) and (pointer: fine) {
 .card-viewmore:hover::before {
 background: linear-gradient(
 90deg,
 transparent, #5848c0, #2870b8, #20a0a8, #28a878, transparent
 );
 }
}

.edu-degree-level {
 font-size: 10px;
 color: var(--purple);
 font-weight: 400;
 letter-spacing: 0.04em;
 margin-left: 8px;
 margin-right: 2px;
 vertical-align: middle;
 padding: 1px 6px;
 border: 1px solid rgba(88, 72, 192, 0.28);
 border-radius: 3px;
 background: rgba(88, 72, 192, 0.08);
}