/* ========== 主题变量 ========== */
:root {
  /* 深色主题 (默认) */
  --bg-color: #0b1120;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  
  --primary: #ec4899;       /* 粉 */
  --primary-glow: rgba(236, 72, 153, 0.6);
  --secondary: #0ea5e9;     /* 蓝 */
  --secondary-glow: rgba(14, 165, 233, 0.6);
  
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-hover: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  
  --nav-bg: rgba(11, 17, 32, 0.6);
  --footer-bg: rgba(11, 17, 32, 0.3);
  
  --orb-1: rgba(14, 165, 233, 0.25);
  --orb-2: rgba(236, 72, 153, 0.2);
}

/* 浅色主题切换 */
:root.light-mode {
  --bg-color: #f8fafc;
  --text-main: #0f172a;
  --text-muted: #475569;
  
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-bg-hover: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  
  --nav-bg: rgba(248, 250, 252, 0.85);
  --footer-bg: rgba(255, 255, 255, 0.4);
  
  --orb-1: rgba(14, 165, 233, 0.15);
  --orb-2: rgba(236, 72, 153, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  overflow-x: clip; 
}

/* ========== 鼠标长按划选文字特效 (Text Selection) ========== */
/* 浏览器安全限制下，划选无法改变真实 font-size，因此通过多重 text-shadow 发光打造“凸出/发涨”的错觉 */
::selection {
  background: rgba(236, 72, 153, 0.3);
  color: #fff;
  text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 20px var(--primary-glow);
}
::-moz-selection {
  background: rgba(236, 72, 153, 0.3);
  color: #fff;
  text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 20px var(--primary-glow);
}

/* ========== 自定义滚动条样式 ========== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}

body {
  font-family: 'MiSans', sans-serif;
  color: var(--text-main);
  background-color: var(--bg-color);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  transition: background-color 0.5s ease, color 0.5s ease;
  cursor: none; 
}

/* 全局统一干掉自带下划线，修复导航栏文字白线干扰 */
a { text-decoration: none; color: inherit; }

/* 优雅平滑的单个光环自定义鼠标 */
#cursor-ring {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 2px solid var(--secondary);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  z-index: 10000;
  transition: width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
              height 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
              border-width 0.1s,
              background 0.2s;
  box-shadow: 0 0 10px var(--secondary-glow);
}
#cursor-ring.clicking {
  transform: translate(-50%, -50%) scale(0.5);
  border-width: 4px;
  background-color: var(--primary-glow);
  border-color: var(--primary);
  box-shadow: 0 0 20px var(--primary);
}

#cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 10001;
}

a, button, .interactive-card, .article-item, .dot, .badge {
  cursor: none;
}

/* ========== 重新设计的无痕环境光：极客星云迷雾 (Dynamic Mesh Nebulas) ========== */
/* 彻底移除任何生硬的线条和光圈，而是使用多个巨型光团融合出来的苹果/Stripe风格流动背景 */
.ambient-orbs {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  filter: blur(120px); /* 极高斯模糊，让色块完全融合成星云渐变态 */
  opacity: 0.7;
  transition: opacity 0.5s;
}
:root.light-mode .ambient-orbs {
  opacity: 0.4;
}

.orb {
  position: absolute;
  border-radius: 50%;
}

.orb-1 {
  width: 70vw; height: 70vw;
  background: var(--orb-1); /* 主调：赛博青蓝 */
  top: -20%; left: -20%;
  animation: floatNebula 25s ease-in-out infinite alternate;
}
.orb-2 {
  width: 80vw; height: 80vw;
  background: var(--orb-2); /* 次调：亮粉红 */
  bottom: -30%; right: -20%;
  animation: floatNebulaRev 30s ease-in-out infinite alternate;
}
.orb-3 {
  width: 50vw; height: 50vw;
  /* 辅调：深邃神秘的紫色，增加色彩丰富的空间层次 */
  background: rgba(139, 92, 246, 0.25); 
  top: 30%; left: 30%;
  animation: floatNebula 22s ease-in-out infinite alternate-reverse;
  animation-delay: -5s;
}
.orb-4 {
  width: 60vw; height: 60vw;
  /* 辅调：一点点湖水青色点缀底部 */
  background: rgba(20, 184, 166, 0.2); 
  bottom: 10%; left: -10%;
  animation: floatNebulaRev 35s ease-in-out infinite alternate-reverse;
  animation-delay: -10s;
}

/* 利用极大跨度的缓慢偏移坐标，产生不规则云烟游曳感，杜决任何生硬几何体 */
@keyframes floatNebula {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(15vw, 10vh) scale(1.1); }
  66% { transform: translate(-5vw, 20vh) scale(0.9); }
  100% { transform: translate(-10vw, -10vh) scale(1.05); }
}
@keyframes floatNebulaRev {
  0% { transform: translate(0, 0) scale(1.1); }
  33% { transform: translate(-10vw, -15vh) scale(0.95); }
  66% { transform: translate(20vw, 5vh) scale(1.15); }
  100% { transform: translate(5vw, 15vh) scale(1); }
}

/* ========== 自定义图标通用样式 ========== */
.icon-svg {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  display: inline-block;
  margin-right: 4px;
}
.theme-toggle-btn .icon-svg {
  width: 1.5em;
  height: 1.5em;
  margin: 0;
  vertical-align: middle;
}
.article-action-icon .icon-svg {
  width: 1.5em;
  height: 1.5em;
  margin: 0;
}

/* ========== 顶部进度条 (Top Progress Bar) ========== */
#top-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 5px;
  background: var(--primary);
  z-index: 99999;
  transition: width 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 0 15px var(--primary-glow), 0 0 5px var(--primary);
  pointer-events: none;
  opacity: 0;
}

/* ========== 开启现代浏览器 Cross-Document View Transitions (Mpa 转场) ========== */
@view-transition {
  navigation: auto;
}

/* --- 自定义高级转场动画：摒弃纯淡入淡出，采用原生 APP 级的推拉与缩放 (Slide & Scale) --- */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.35s;
  /* 使用类似 Apple/原生阻尼曲线的贝塞尔曲线 */
  animation-timing-function: cubic-bezier(0.25, 1, 0.3, 1);
  animation-fill-mode: both;
}

/* --- 标题和封面的 View Transition 优化 --- */
/* 单独为标题/封面指定更短更快的转场时间 + GPU 合成层，避免长文本变形时的帧率抖动 */
::view-transition-group(title-*) {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* 提示浏览器提前将该图层提升到 GPU 合成层 */
  will-change: transform, opacity;
  contain: layout;
}

::view-transition-group(cover-*) {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
  contain: layout;
}

/* 标题在转场过程中渐隐/渐现的截图也需 GPU 加速 */
::view-transition-old(title-*),
::view-transition-new(title-*) {
  animation-duration: 0.3s;
  /* 使用纯透明度淡入淡出，避免位图缩放时的模糊锯齿 */
  mix-blend-mode: normal;
  will-change: opacity;
}

::view-transition-old(cover-*),
::view-transition-new(cover-*) {
  animation-duration: 0.3s;
  will-change: opacity;
}

/* 旧页面：向后推远、微微上移并淡出（Z轴推远感） */
::view-transition-old(root) {
  animation-name: page-slide-out;
}

/* 新页面：从底部微微上来、从稍大恢复到正常大小并淡入（浮现感） */
::view-transition-new(root) {
  animation-name: page-slide-in;
}

@keyframes page-slide-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(-20px); /* 退到后方 */
  }
}

@keyframes page-slide-in {
  from {
    opacity: 0;
    transform: scale(1.04) translateY(30px); /* 从稍大、稍下的位置浮出 */
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ========== 手机端/触屏设备：隐藏自定义鼠标光标，恢复系统默认 ========== */
@media (pointer: coarse), (max-width: 768px) {
  #cursor-ring,
  #cursor-dot {
    display: none !important;
  }
  body,
  a, button, .interactive-card, .article-item, .dot, .badge {
    cursor: auto;
  }
}