/* ============================================================
 * GlassSurface.css — 液态玻璃（SVG 色散滤镜）样式
 *
 * 原理：
 *   1. SVG feDisplacementMap 将背景拆为 R/G/B 三通道
 *   2. 各通道以不同偏移量位移
 *   3. feColorMatrix 分别提纯 → feBlend screen 重合成
 *   4. 最终产生色散 + 折射的"液态玻璃"视觉效果
 *
 * backdrop-filter: url(#filterId) 将 SVG 滤镜应用到容器后方背景
 * Fallback：不支持 SVG filter 的浏览器用普通毛玻璃兜底
 * ============================================================ */

/* ---- 容器 ---- */
.glass-surface {
  position: relative;
  overflow: hidden;
  /* 背景透明 + 轻微 frost，让滤镜效果更明显 */
  background: rgba(255, 255, 255, var(--glass-frost, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* 内容不溢出圆角 */
  border-radius: inherit;
  /* 默认高度由内容撑开；如果父级传了 height，会覆盖 */
  height: auto;
}

/* ---- SVG 滤镜（隐藏）---- */
.glass-surface__filter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 不可见：仅提供滤镜定义，不占据布局 */
  pointer-events: none;
  opacity: 0;
}

/* ---- 内容层（z-index 保持在滤镜之上）---- */
.glass-surface__content {
  position: relative;
  z-index: 1;
  width: 100%;
  /* 不要写 height: 100%，否则父容器 auto 时内容被压扁 */
  min-height: 100%;
}

/* ============================================================
 * 浏览器分支
 * ============================================================ */

/* SVG 滤镜模式（Chrome / Edge / Chromium）：应用 feDisplacementMap 色散 */
.glass-surface--svg {
  backdrop-filter: var(--filter-id) saturate(var(--glass-saturation, 1));
  -webkit-backdrop-filter: var(--filter-id) saturate(var(--glass-saturation, 1));
}

/* Fallback 模式（Safari / Firefox 不支持 SVG filter on backdrop-filter）：
 * 降级为普通毛玻璃 + 饱和度增强，视觉效果接近但不含色散 */
.glass-surface--fallback {
  backdrop-filter: blur(18px) saturate(var(--glass-saturation, 1.6));
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-saturation, 1.6));
}

/* 滚动中的临时轻量模式：避免每帧重算多张卡片的色散滤镜。 */
.snap-scroll--scrolling .glass-surface--svg,
.snap-scroll--scrolling .glass-surface--fallback {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* 本地极光玻璃背景：在线 WebGL 场景不可用时的无网络替代方案。 */
.local-aurora-bg {
  --aurora-pointer-x: 0;
  --aurora-pointer-y: 0;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  opacity: 1;
  background:
    radial-gradient(72% 80% at 78% 8%, rgba(77, 180, 232, 0.42), transparent 56%),
    radial-gradient(68% 68% at 15% 78%, rgba(9, 79, 153, 0.88), transparent 68%),
    linear-gradient(150deg, #0a76bd 0%, #075a9f 35%, #073d77 68%, #061d43 100%);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), visibility 700ms;
}

.local-aurora-bg::before,
.local-aurora-bg::after {
  content: '';
  position: absolute;
  inset: -12%;
  pointer-events: none;
}

.local-aurora-bg::before {
  opacity: 0.7;
  background:
    radial-gradient(38% 34% at 50% 34%, rgba(232, 250, 255, 0.46), transparent 72%),
    radial-gradient(30% 24% at 57% 59%, rgba(185, 237, 255, 0.18), transparent 72%);
  filter: blur(34px);
  transform: translate3d(
    calc(var(--aurora-pointer-x) * -18px),
    calc(var(--aurora-pointer-y) * -14px),
    0
  );
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.local-aurora-bg::after {
  opacity: 0.3;
  background-image: radial-gradient(rgba(255, 255, 255, 0.42) 0.6px, transparent 0.8px);
  background-size: 8px 8px;
  mix-blend-mode: soft-light;
}

.local-aurora-bg--hidden {
  opacity: 0;
  visibility: hidden;
}

.local-aurora-bg__bloom {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(54px);
  will-change: transform, translate;
}

.local-aurora-bg__bloom--one {
  width: min(58vw, 820px);
  aspect-ratio: 1.2;
  left: 22%;
  top: 18%;
  background: radial-gradient(ellipse, rgba(235, 251, 255, 0.5), rgba(138, 225, 250, 0.12) 48%, transparent 72%);
  transform: translate3d(calc(var(--aurora-pointer-x) * 24px), calc(var(--aurora-pointer-y) * 16px), 0);
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: aurora-drift-one 15s ease-in-out infinite alternate;
}

.local-aurora-bg__bloom--two {
  width: min(42vw, 600px);
  aspect-ratio: 1;
  right: -4%;
  bottom: -12%;
  background: radial-gradient(circle, rgba(110, 216, 246, 0.28), rgba(33, 138, 214, 0.1) 46%, transparent 70%);
  transform: translate3d(calc(var(--aurora-pointer-x) * -16px), calc(var(--aurora-pointer-y) * -24px), 0);
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: aurora-drift-two 18s ease-in-out infinite alternate;
}

.local-aurora-bg__prism {
  position: absolute;
  border: 1px solid rgba(231, 251, 255, 0.38);
  border-radius: clamp(28px, 5vw, 78px);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.36) 0%, rgba(225, 248, 255, 0.08) 30%, rgba(95, 194, 235, 0.08) 66%, rgba(255, 255, 255, 0.18) 100%),
    rgba(8, 54, 107, 0.17);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.42),
    inset -18px -24px 38px rgba(0, 38, 95, 0.2),
    0 32px 90px rgba(1, 24, 70, 0.25);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  will-change: transform;
}

.local-aurora-bg__prism::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.26), transparent 24%, transparent 72%, rgba(117, 218, 248, 0.15));
}

.local-aurora-bg__prism--back {
  width: min(38vw, 520px);
  height: min(54vw, 700px);
  left: 7%;
  bottom: -18%;
  opacity: 0.34;
  transform: rotate(-10deg) translate3d(calc(var(--aurora-pointer-x) * -12px), calc(var(--aurora-pointer-y) * -16px), 0);
  transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: prism-float-back 16s ease-in-out infinite alternate;
}

.local-aurora-bg__prism--front {
  width: min(31vw, 430px);
  height: min(47vw, 620px);
  left: 40%;
  top: 14%;
  opacity: 0.56;
  transform: rotate(7deg) translate3d(calc(var(--aurora-pointer-x) * 20px), calc(var(--aurora-pointer-y) * 14px), 0);
  transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: prism-float-front 13s ease-in-out infinite alternate;
}

.local-aurora-bg__prism--edge {
  width: min(24vw, 320px);
  height: min(38vw, 460px);
  right: 10%;
  top: 4%;
  opacity: 0.28;
  transform: rotate(17deg) translate3d(calc(var(--aurora-pointer-x) * -18px), calc(var(--aurora-pointer-y) * 12px), 0);
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: prism-float-edge 19s ease-in-out infinite alternate;
}

@keyframes aurora-drift-one {
  to { translate: 3% -2%; }
}

@keyframes aurora-drift-two {
  to { translate: -5% 4%; }
}

@keyframes prism-float-back {
  to { translate: 2% 4%; }
}

@keyframes prism-float-front {
  to { translate: -2% 3%; }
}

@keyframes prism-float-edge {
  to { translate: -2% 4%; }
}

@media (max-width: 640px) {
  .local-aurora-bg__bloom--one { width: 90vw; left: 3%; top: 24%; }
  .local-aurora-bg__bloom--two { width: 70vw; }
  .local-aurora-bg__prism--back { width: 62vw; height: 86vw; left: -12%; }
  .local-aurora-bg__prism--front { width: 58vw; height: 78vw; left: 25%; top: 22%; }
  .local-aurora-bg__prism--edge { width: 42vw; height: 62vw; right: -16%; }
}

@media (prefers-reduced-motion: reduce) {
  .local-aurora-bg,
  .local-aurora-bg::before,
  .local-aurora-bg__bloom,
  .local-aurora-bg__prism {
    transition: none;
    animation: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .local-aurora-bg__prism {
    background: rgba(7, 63, 120, 0.72);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* ============================================================
 * 全局样式 & 设计系统
 * ============================================================
 *
 * 两个核心理念：
 *   • 所有页面共享 Unicorn Studio 动态 WebGL 背景（全屏固定，z-index:0）
 *   • 前景内容区使用 Apple 风格毛玻璃卡片承载文案
 *
 * 滚动机制：CSS scroll-snap（y 轴强制吸附）
 *   → 每屏 .snap-section 为一个 100vh 模块
 *   → 滑过半屏自动"磁吸"到下一模块
 *   → framer-motion 补充 spring 入场弹性（见 Reveal.jsx）
 *
 * 如果你要调整：
 *   • 修改 --accent 可全局换主题色
 *   • 调 .unicorn-bg::after 的 radial-gradient 透明度来控制背景暗度
 *   • 调 scroll-snap-type（mandatory → proximity）可以减弱吸附力度
 * ============================================================ */

/* ============ CSS 变量 / 设计 Token ============ */
:root {
  --ink: #0b0b0f;                          /* 最深色：方案底、暗部 */
  --paper: #f4f1e8;                        /* 浅色：用于个别强调 */
  --accent: #75c5de;                       /* 主色调：湖水蓝 */
  --glass-bg: rgba(255, 255, 255, 0.08);   /* 毛玻璃默认背景 */
  --glass-brd: rgba(255, 255, 255, 0.16);  /* 毛玻璃边框 */
  --glass-bg-strong: rgba(16, 18, 26, 0.42); /* 毛玻璃加强版（侧边栏等） */
  --text-hi: rgba(255, 255, 255, 0.96);    /* 文字：主要 */
  --text-mid: rgba(255, 255, 255, 0.72);   /* 文字：次要 */
  --text-dim: rgba(255, 255, 255, 0.5);    /* 文字：辅助 */
  --font: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
}

/* ============ 全局重置 ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font);
  background: #05060a;
  color: var(--text-hi);
  /* 平滑字体渲染 */
  -webkit-font-smoothing: antialiased;
  /* 外层 overflow hidden → 滚动完全交给 .snap-scroll 容器接管 */
  overflow: hidden;
}

#root {
  height: 100%;
}

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

button {
  font-family: inherit;
}

/* 选中文字的高亮色，和主色呼应 */
::selection {
  background: rgba(117, 197, 222, 0.4);
}

/* ============================================================
 * 背景层：Unicorn Studio WebGL 动态背景
 * ============================================================
 *   .unicorn-bg 是 UnicornBackground 组件的容器
 *   固定定位、全屏、z-index:0，在所有内容之下
 *   ::after 伪元素叠加暗角渐变，提升文字可读性
 */
.unicorn-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.unicorn-bg--ready {
  opacity: 1;
}
.unicorn-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(4, 6, 12, 0.55) 100%),
    linear-gradient(180deg, rgba(4, 6, 12, 0.25), rgba(4, 6, 12, 0.5));
}

/* 浏览器空闲时预热一次真实 SVG 液态玻璃滤镜，不显示任何额外内容。 */
.glass-preloader {
  position: fixed;
  width: 320px;
  height: 180px;
  left: -480px;
  top: -240px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .unicorn-bg {
    transition: none;
  }
}

/* ============ 应用骨架 ============ */
.app-shell {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ============================================================
 * 顶栏 Topbar
 * ============================================================
 *   固定顶部，pointer-events:none 让自身不挡操作
 *   内部子元素单独恢复 pointer-events:auto
 */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(18px, 4vw, 44px);
  pointer-events: none;
}
.topbar > * {
  pointer-events: auto;
}

/* Logo 按钮 → 点击打开侧边栏作品导航 */
.logo-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 12px;
}
.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #06121a;
  /* 渐变由浅到深蓝，和方案背景协调 */
  background: linear-gradient(135deg, #9be2f5, #75c5de 60%, #4aa8c8);
  box-shadow: 0 6px 24px rgba(117, 197, 222, 0.45);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo-btn:hover .logo-mark {
  transform: rotate(-8deg) scale(1.06);
}
.logo-word {
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 13px;
  color: var(--text-hi);
}
.logo-word small {
  display: block;
  font-weight: 400;
  letter-spacing: 0.14em;
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* 右上角「SCROLL · 探索」提示 + 呼吸点 */
.topbar-hint {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 10px;
}
.scroll-hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%   { transform: scale(1.6); opacity: 0.4; }
}

/* ============================================================
 * 侧边栏 Sidebar（作品导航）
 * ============================================================
 *   从左侧滑入，毛玻璃背景 + 半透明遮罩
 *   AnimatePresence 控制出场动画（见 Chrome.jsx）
 */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(3, 5, 10, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  width: min(420px, 88vw);
  display: flex;
  flex-direction: column;
  padding: 28px 28px 32px;
  /* 强毛玻璃 + 色彩饱和度增强 */
  background: var(--glass-bg-strong);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-right: 1px solid var(--glass-brd);
}

/* 侧边栏头部 */
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sidebar-title {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--text-dim);
}
/* 关闭按钮：圆形、旋转动效 */
.sidebar-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-hi);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.25s, transform 0.25s;
}
.sidebar-close:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(90deg);
}

/* 导航项列表 */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 每条导航链接 */
.side-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  text-align: left;
  width: 100%;
  color: var(--text-hi);
}
.side-link:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--glass-brd);
  transform: translateX(6px);
}
.side-index {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  flex-shrink: 0;
}
.side-meta  { flex: 1; min-width: 0; }
.side-name  { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.side-sub   { font-size: 13px; color: var(--text-mid); margin-top: 3px; }
/* 右上箭头图标 */
.side-arrow {
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform 0.25s, color 0.25s;
}
.side-link:hover .side-arrow {
  transform: translate(2px, -2px);
  color: var(--accent);
}

/* 侧边栏底：联系方式 */
.sidebar-foot {
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-brd);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-foot a {
  font-size: 13px;
  color: var(--text-mid);
  transition: color 0.25s;
}
.sidebar-foot a:hover {
  color: var(--text-hi);
}

/* ============================================================
 * 滚动捕捉容器
 * ============================================================
 *   .snap-scroll → 接管页面滚动，每屏自动吸附
 *   .snap-section → 每个 100vh 全屏模块
 *
 *   吸附力度：
 *     mandatory → 始终强制吸附（本文件使用）
 *     proximity → 接近时才吸附（手感更自由）
 *   吸附点 scroll-snap-stop: always → 快速滑动也不会跳过
 */
.snap-scroll {
  height: 100vh;
  height: 100dvh;          /* dvh 适配移动端地址栏收起 */
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-behavior: auto;
  /* 隐藏滚动条（桌面端用右侧圆点导航，移动端触摸滑动） */
  scrollbar-width: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.snap-scroll::-webkit-scrollbar {
  display: none;
}

.snap-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 上下留出顶栏的空间 */
  padding: 96px clamp(18px, 5vw, 56px) 48px;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 100dvh;
}

/* 手势滚动时避免对每张卡片实时重跑昂贵的 SVG backdrop-filter。
   停止 140ms 后恢复液态色散，视觉完整性不受影响。 */
.snap-scroll--scrolling .glass-surface {
  background: rgba(8, 39, 83, 0.42);
}
.snap-scroll--scrolling .glass-surface--svg,
.snap-scroll--scrolling .glass-surface--fallback {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
 * Landing 首页各区块
 * ============================================================ */

/* Hero 块（第一屏） */
.hero-block {
  max-width: 1040px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.hero-eyebrow {
  font-size: 13px;
  letter-spacing: 0.34em;
  color: var(--accent);
  text-transform: uppercase;
}
.hero-title {
  font-size: clamp(42px, 7vw, 86px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
/* 渐变文字（名字高亮） */
.hero-title .grad {
  background: linear-gradient(120deg, #ffffff 20%, #9be2f5 55%, #75c5de);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lede {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 640px;
}

/* CTA 按钮行 */
.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

/* 两种按钮：主按钮（渐变实心）/ 幽灵按钮（透明边框） */
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, background 0.3s;
}
.btn-primary {
  background: linear-gradient(135deg, #9be2f5, #75c5de);
  color: #06121a;
  box-shadow: 0 10px 30px rgba(117, 197, 222, 0.35);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(117, 197, 222, 0.5);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--glass-brd);
  color: var(--text-hi);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-3px);
}

/* 区块标题（通用） */
.section-head {
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.section-kicker {
  font-size: 12px;
  letter-spacing: 0.34em;
  color: var(--accent);
  text-transform: uppercase;
}
.section-title {
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.section-lede {
  color: var(--text-mid);
  font-size: 16px;
  max-width: 560px;
  line-height: 1.7;
}

/* 作品网格（第二屏） */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  width: min(1080px, 100%);
}
/* 作品卡片：点击进入详情页 */
.work-card {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  color: var(--text-hi);
  min-height: 220px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s, background 0.3s;
  width: 100%;
  background: transparent;
  /* 文字阴影，让白字在复杂背景上可读 */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.work-card:hover {
  transform: translateY(-8px);
  /* 不要加白色背景hover，只保留轻微边框提亮 */
  border-color: rgba(255, 255, 255, 0.24);
}
.work-card-top     { display: flex; justify-content: space-between; align-items: flex-start; }
.work-card-index   { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; }
.work-card-tag     {
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  color: var(--text-mid);
}
.work-card-title   { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: auto; }
.work-card-sub     { font-size: 15px; color: var(--text-mid); }
.work-card-summary { font-size: 14px; line-height: 1.6; color: var(--text-mid); }

/* 能力胶囊（第三屏） */
.caps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  width: min(1080px, 100%);
}
.cap-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.cap-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-brd);
}
.cap-title { font-size: 19px; font-weight: 700; }
.cap-text  { font-size: 14px; line-height: 1.7; color: var(--text-mid); }

/* 数据带（第四屏） */
.stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  width: min(1080px, 100%);
}
.stat-card { padding: 30px 24px; text-align: center; background: transparent; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.stat-num  {
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, #fff, #9be2f5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label { margin-top: 8px; font-size: 13px; letter-spacing: 0.1em; color: var(--text-mid); }

/* 关于我（第五屏） */
.about-wrap {
  width: min(880px, 100%);
  padding: clamp(28px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: transparent;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.about-text {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.9;
  color: var(--text-mid);
}
.about-text strong {
  color: var(--text-hi);
  font-weight: 600;
}

/* 技术标签 */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-mid);
}

/* 尾页入口 + 联系（第六屏） */
.final-wrap {
  width: min(760px, 100%);
  text-align: center;
  padding: clamp(30px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  background: transparent;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.final-title {
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.final-text { color: var(--text-mid); line-height: 1.8; max-width: 520px; }
.email-link {
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.email-link:hover { border-color: var(--accent); }
.footnote {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

/* ============================================================
 * 作品详情页（Work.jsx）
 * ============================================================ */
.work-detail {
  width: min(880px, 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.work-detail-hero {
  padding: clamp(28px, 5vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: transparent;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.work-detail-eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.work-detail-title {
  font-size: clamp(38px, 7vw, 76px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.work-detail-sub {
  font-size: clamp(17px, 2.4vw, 22px);
  color: var(--text-mid);
}
.work-detail-lede {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-mid);
  max-width: 640px;
}
.work-panel {
  padding: clamp(24px, 4vw, 40px);
  background: transparent;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.work-panel h3 {
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

/* 特性列表：每个 li 前带 → */
.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-hi);
}
.feature-list li::before {
  content: '→';
  color: var(--accent);
  flex-shrink: 0;
}

/* 上/下篇导航 */
.work-nav-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.work-resource-note {
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 18px;
}
.work-resource-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.work-resource-link {
  padding: 11px 18px;
  font-size: 14px;
}
.work-nav-divider {
  height: 1px;
  margin: 28px 0;
  background: var(--glass-brd);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-mid);
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.25s;
}
.back-link:hover { color: var(--text-hi); }

/* ============================================================
 * 滚动锚点指示圆点（右侧边）
 * ============================================================
 *   snap-dot → 每个圆点对应一个 snap-section
 *   active → 放大 + 变为 accent 色
 *   移动端隐藏（屏幕窄，用触摸滑动即可）
 */
.snap-dots {
  position: fixed;
  right: clamp(14px, 3vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.snap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
  padding: 0;
}
.snap-dot.active {
  background: var(--accent);
  transform: scale(1.5);
}
.snap-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

/* 移动端精简 */
@media (max-width: 640px) {
  .snap-dots    { display: none; }
  .topbar-hint  { display: none; }
  .topbar       { padding: 18px 16px; }
  .logo-word small { font-size: 8px; letter-spacing: 0.1em; }
  .hero-block   { gap: 20px; }
  .hero-title   {
    font-size: clamp(30px, 8.4vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.025em;
  }
  .hero-lede    { font-size: 15px; line-height: 1.65; }
  .btn-primary,
  .btn-ghost    { padding: 12px 18px; font-size: 14px; }
}