/* ══════════════════════════════════════════════════════════════════════════
   虚空搜索 XuSearch — 共享设计系统
   全暗色「虚空」风：深空底色 + 星云渐变 + 玻璃拟态
   三个版本共用这套令牌，各自的版式在 v1/v2/v3.css 里
   ══════════════════════════════════════════════════════════════════════════ */

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

:root {
  /* ── 深空层级：0 最深（页面底）→ 3 抬升面 ───────────────────────── */
  --void-0: #040407;
  --void-1: #08080F;
  --void-2: #0D0D16;
  --void-3: #14141E;

  /* ── 文字：hi 主 / mid 次 / lo 弱 / dim 极弱 ──────────────────── */
  --text-hi:  #F2F2F6;
  --text-mid: #9E9EB2;
  --text-lo:  #5E5E74;
  --text-dim: #34344A;

  /* ── 星云色：紫为主，青为辅，粉作点缀 ────────────────────────── */
  --nebula:      #8B5CF6;
  --nebula-lite: #A78BFA;
  --nebula-deep: #6D28D9;
  --aurora:      #22D3EE;
  --aurora-deep: #0891B2;
  --flare:       #F472B6;

  /* ── 玻璃拟态 ────────────────────────────────────────────────── */
  --glass:        rgba(255, 255, 255, 0.04);
  --glass-hi:     rgba(255, 255, 255, 0.075);
  --glass-line:   rgba(255, 255, 255, 0.09);
  --glass-line-hi: rgba(255, 255, 255, 0.18);
  --blur: 22px;

  /* ── 圆角 ────────────────────────────────────────────────────── */
  --r-s:  10px;
  --r-m:  16px;
  --r-l:  24px;
  --r-xl: 32px;

  /* ── 缓动 ────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── 排版 ────────────────────────────────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC',
          'Microsoft YaHei', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--void-0);
  color: var(--text-hi);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.5;
}

/* 深空底噪：固定不动的星云光晕，垫在所有内容之下 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 12% -5%,  rgba(139, 92, 246, 0.16), transparent 65%),
    radial-gradient(800px 520px at 92% 8%,   rgba(34, 211, 238, 0.10), transparent 62%),
    radial-gradient(1000px 700px at 50% 105%, rgba(244, 114, 182, 0.07), transparent 68%);
}

/* 细网格纹理，强化「虚空」的空间感 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}

/* 内容统一抬到光晕之上 */
body > * { position: relative; z-index: 1; }

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: rgba(139, 92, 246, 0.35); color: #fff; }


/* ── 通用工具类 ──────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* 等宽数字/标签 */
.mono { font-family: var(--mono); }

/* 渐变文字：虚空紫 → 青 */
.grad {
  background: linear-gradient(100deg, var(--nebula-lite) 0%, var(--aurora) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 玻璃卡片 */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

/* 小标签 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--aurora);
  box-shadow: 0 0 10px var(--aurora);
}

/* 主按钮：渐变填充 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(120deg, var(--nebula-deep), var(--nebula) 45%, var(--aurora-deep));
  box-shadow: 0 8px 30px -8px rgba(139, 92, 246, 0.6);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -8px rgba(139, 92, 246, 0.75);
}

/* 次按钮：玻璃描边 */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-hi);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.3s var(--ease);
}
.btn-ghost:hover {
  background: var(--glass-hi);
  border-color: var(--glass-line-hi);
  transform: translateY(-2px);
}

/* 视频容器：统一圆角 + 描边 + 内阴影 */
.screen {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--glass-line);
  background: #000;
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.screen video { width: 100%; height: 100%; object-fit: cover; }

/* grid / flex 项里的替换元素必须允许收缩 */
.screen, .screen video { min-width: 0; }

/* 光晕描边：卡片顶部一道渐变高光 */
.edge-glow { position: relative; }
.edge-glow::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nebula), var(--aurora), transparent);
  opacity: 0.55;
}

/* 滚动淡入 */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; }
}

/* 打印：显示全部内容，去掉固定定位与深色底 */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
  .rail, .bar, .overlay, .dock { display: none !important; }
  .stage { margin-left: 0 !important; }
}

/* 语言切换按钮（三版共用样式） */
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background 0.25s var(--ease);
}
.lang-btn:hover {
  color: var(--text-hi);
  border-color: var(--glass-line-hi);
  background: var(--glass-hi);
}
.lang-btn svg { width: 14px; height: 14px; }