/* ============================================================
   base.css —— Reset / 排版 / 科技质感背景 / 滚动条
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* 移动端：去掉 WebKit 默认的蓝色矩形点击高亮（圆形按钮上尤其突兀），
     按压反馈由各控件的 :active 样式提供 */
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
/* 页面加载阶段禁用平滑滚动：避免跨页导航时浏览器恢复滚动位置产生抖动 */
html.is-booting {
  scroll-behavior: auto;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-1);
  background-color: var(--bg-base);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 背景一：星空（纯代码生成，无需素材）。近层四角星由两组互质尺寸（907 / 673px）的 SVG pattern 错位叠加，
   相同星点的重复周期高达约 61 万像素 → 观感随机不重复；星群分 4 档大小 × 4 档明度，
   最亮取 #E3ECFD（明度低于正文 --text-1，任何时刻不超过字体颜色）；中远层为点状微光，
   远近分层、各自速度慢速呼吸：四角星 5s（两组相位错开）、中景点 8s、远景点 10.5s，
   中远层振幅更深且负延迟错开相位 → 整片星空依次明灭、层次清晰，克制不抢内容。
   2026-08-19：底色提亮一档后，为避免「整体平移」式提亮压缩层次感，星点呼吸下限/星云 α
   回调至提亮前（甚至更低），恢复「亮点 vs 极暗底」反差；文字区域改由「中央光柱」分区照明（见 body::before） */
.bg-stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
/* 星层纵向各扩展 25%，为滚动视差（近层同向缓移 / 远层反向）预留平移余量，避免边缘露底 */
.bg-stars svg {
  position: absolute;
  left: 0;
  top: -25%;
  width: 100%;
  height: 150%;
}
.bg-stars__near   { animation: bg-twinkle 5s ease-in-out infinite; }
.bg-stars__near-b { animation: bg-twinkle 5s ease-in-out infinite; animation-delay: -1.7s; }
.bg-stars__mid    { animation: bg-twinkle-dot 8s ease-in-out infinite; animation-delay: -2.2s; }
.bg-stars__far    { animation: bg-twinkle-dot 10.5s ease-in-out infinite; animation-delay: -4.8s; }
@keyframes bg-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes bg-twinkle-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
/* 背景零：深空星云（纯 CSS 渐变，位于星点之下，透明度极低不抢内容）
   多团大尺度径向渐变模拟星云明暗斑驳（品牌深蓝 + 靛紫 + 主蓝，α ≤ 0.10）；
   外层外扩 6% 防平移露边，整层以 60s 周期缓慢往复漂移 → 隐隐浮动，静止时也保有深浅层次；
   reduced-motion 下全局压停，退化为静态渐变 */
.bg-stars::before {
  content: "";
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(52% 44% at 18% 26%, rgba(46, 84, 155, 0.10), transparent 68%),
    radial-gradient(44% 38% at 82% 68%, rgba(122, 92, 230, 0.05), transparent 70%),
    radial-gradient(60% 50% at 55% 12%, rgba(30, 58, 128, 0.08), transparent 72%),
    radial-gradient(38% 34% at 74% 30%, rgba(46, 124, 246, 0.045), transparent 66%);
  transform: translateZ(0);
  animation: nebula-drift 60s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes nebula-drift {
  from { transform: translate3d(-1.5%, -1%, 0); }
  to   { transform: translate3d(1.5%, 1.2%, 0); }
}
/* 背景二：细网格纹理（透明度 ≤ 0.03，克制、不抢内容） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(175, 193, 224, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(175, 193, 224, 0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
/* 背景三：中央光柱（分区照明——文字区亮、两侧暗）。固定全屏，叠于星空之上、内容之下（z-index:-1），
   与网格同为负层级：::before 先于 ::after 绘制，光柱在网格下方 → 网格线仍叠在光带上保持纹理感。
   水平方向以中央内容列（容器 ≤1200px）为亮区、向两侧淡出，垂直方向以视口中部为焦点、上下渐隐；
   蓝系柔光峰值 α≈0.4（中央极小范围），两侧深空暗调保持不变 → 提亮靠分区照明而非整体平移 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 16%, rgba(98, 144, 230, 0.10) 36%, rgba(108, 154, 238, 0.20) 50%, rgba(98, 144, 230, 0.10) 64%, transparent 84%),
    radial-gradient(ellipse 60% 58% at 50% 44%, rgba(98, 144, 230, 0.22), rgba(98, 144, 230, 0.10) 52%, rgba(98, 144, 230, 0) 76%);
}
/* 移动端内容近满宽：光柱加宽覆盖全内容列，并略降峰值防止整屏过亮 */
@media (max-width: 768px) {
  body::before {
    background:
      linear-gradient(90deg, transparent 5%, rgba(98, 144, 230, 0.10) 30%, rgba(108, 154, 238, 0.18) 50%, rgba(98, 144, 230, 0.10) 70%, transparent 95%),
      radial-gradient(ellipse 78% 62% at 50% 42%, rgba(98, 144, 230, 0.20), rgba(98, 144, 230, 0.09) 56%, rgba(98, 144, 230, 0) 80%);
  }
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;   /* 中文标题 = 思源黑体 700（决策记录 #1） */
  line-height: 1.25;
  letter-spacing: 0.01em;
}

::selection {
  background: rgba(46, 124, 246, 0.35);
  color: var(--text-1);
}

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

/* 滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-base);
}

/* 无障碍：尊重系统减少动效设置 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}