/* ==========================================================
   01-base.css — 设计令牌 / 全局重置 / 页面基底
   职责:CSS 变量、reset、body、氛围光斑、滚动进度条、
        全局滚动条、共享关键帧
   ========================================================== */

/* ★ 预留滚动条占位:视口宽度从第一帧起恒定。
   同时根治两个问题:
   ① 页头入场动画中途因滚动条出现导致的向左抖动;
   ② 阅读弹窗打开时因滚动状态变化导致的向右位移 */
html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

:root {
  --brand: #ffc000;
  --brand-light: rgba(255, 192, 0, 0.15);
  --brand-glow: rgba(255, 192, 0, 0.4);
  --white: #ffffff;
  --bg: #f5f5f7;
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #aeaeb2;
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-heavy: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: rgba(0, 0, 0, 0.06);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.2s ease;
}

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

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── 顶部滚动进度条(元素由 common.js 注入) ── */
.scroll-progress {
  position: fixed;
  top: 72px;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), #ffdb4d);
  z-index: 1001;
  width: 0%;
  transition: width 0.1s linear;
  border-radius: 0 3px 3px 0;
}

/* ── 氛围光斑(body 伪元素实现,固定不随滚动) ── */
body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  z-index: -1;
  pointer-events: none;
}
body::before {
  width: 700px;
  height: 700px;
  background: rgba(255, 192, 0, 0.14);
  top: -150px;
  right: -200px;
}
body::after {
  width: 600px;
  height: 600px;
  background: rgba(255, 192, 0, 0.08);
  bottom: 200px;
  left: -200px;
}

/* ── 氛围光斑(HTML 元素实现,对应 index.html 中的 .bg-decor) ── */
.bg-decor {
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
.bg-decor-1 {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 192, 0, 0.05);
  top: 50%;
  right: 5%;
  filter: blur(80px);
}
.bg-decor-2 {
  width: 200px;
  height: 400px;
  border-radius: 200px;
  background: rgba(255, 192, 0, 0.04);
  bottom: 10%;
  left: 10%;
  filter: blur(60px);
  transform: rotate(-20deg);
}

/* ── 全局滚动条(WebKit) ──
   注:阅读弹窗内的 .reading-scroll 以更高优先级自行隐藏,不受此处影响 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* ── 共享关键帧 ──
   cardEnter:卡片入场,被 04-featured / 05-article-grid / 空态共用。
   关键帧定义位置不影响解析,统一收口在 base 便于查找 */
@keyframes cardEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}