/* ============================================================
   虎迅客 · Base
   重置、排版、无障碍基础、全局动态氛围背景
   动态科技体系：Canvas 神经网络 + 极光流体 + 精密网格 + 胶片噪点
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'tnum' 0;
}

/* ============================================================
   全局氛围背景（4 层，全部 fixed 且 pointer-events:none）
   层 1 · .bg-scene    动态 Canvas：三维粒子神经网络 + 数据脉冲
   层 2 · body::before 极光流体：三团缓慢漂移的极光色云
   层 3 · body::after  精密网格 + 中心压暗 + 四周渐隐
   层 4 · html::after  胶片噪点：消除纯色的"塑料感"
   ============================================================ */

/* 层 1 · 动态神经网络画布（由 assets/js/bg-scene.js 注入） */
.bg-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -2;
  pointer-events: none;
}

/* 层 2 · 极光流体
   性能：全屏 fixed 大半径 blur 是最重的栅格化开销（每帧重采样整屏）。
   层尺寸由 136%（inset:-18%）收到 116%（inset:-8%）、模糊半径由 90px 降到 56px，
   栅格化面积与采样成本大幅下降；色云柔边由渐变本身的 transparent 停止点补回。 */
body::before {
  content: "";
  position: fixed;
  inset: -8%;
  width: 116%;
  height: 116%;
  background:
    radial-gradient(46% 46% at 14% 18%, rgba(124, 92, 255, 0.26) 0%, rgba(88, 28, 135, 0.10) 38%, transparent 68%),
    radial-gradient(38% 38% at 84% 72%, rgba(34, 211, 238, 0.16) 0%, rgba(6, 182, 212, 0.06) 38%, transparent 68%),
    radial-gradient(32% 32% at 62% 12%, rgba(20, 224, 177, 0.10) 0%, transparent 62%),
    radial-gradient(30% 30% at 24% 88%, rgba(201, 169, 97, 0.07) 0%, transparent 62%);
  filter: blur(56px);
  pointer-events: none;
  z-index: -3;
  animation: orbDrift 46s ease-in-out infinite alternate;
}

/* 层 3 · 精密网格 + 可读性压暗 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* 中心柔和压暗，保证正文对比度（WCAG） */
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(7, 10, 22, 0.42) 0%, transparent 72%),
    linear-gradient(to right, rgba(124, 92, 255, 0.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 92, 255, 0.030) 1px, transparent 1px);
  background-size: 100% 100%, 58px 58px, 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 88% 78% at 50% 45%, black 20%, transparent 82%);
  mask-image: radial-gradient(ellipse 88% 78% at 50% 45%, black 20%, transparent 82%);
}

/* 层 4 · 胶片噪点（静态贴图，无性能开销） */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

@keyframes orbDrift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate(-3.5%, 2.5%) rotate(2deg) scale(1.04); }
  50%  { transform: translate(2.5%, -1.5%) rotate(-1.5deg) scale(0.97); }
  75%  { transform: translate(-1.5%, 3.5%) rotate(1.2deg) scale(1.03); }
  100% { transform: translate(1.5%, -2.5%) rotate(-1deg) scale(1.015); }
}

img, svg, canvas, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-text); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--aurora-2); }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* --- 排版 --- */
h1, h2, h3, h4, h5, h6 { color: var(--ink); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
p { margin-bottom: var(--space-4); }
strong { color: var(--ink); font-weight: 600; }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* 大写英文分类标签（带发光短线 + 金点） */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: var(--space-4);
  position: relative;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--grad-aurora);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(124, 92, 255, 0.6);
}
.eyebrow::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(201, 169, 97, 0.8);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--aurora-3);
}

/* --- 无障碍：焦点环 --- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--aurora-2);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.16);
}

/* --- 无障碍：跳转主内容链接 --- */
.skip-link {
  position: fixed;
  top: 8px; left: 50%;
  transform: translate(-50%, -200%);
  z-index: 2000;
  padding: 10px 20px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus {
  transform: translate(-50%, 0);
  color: #fff;
}

/* 仅视觉隐藏（供屏幕阅读器） */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- 选区 --- */
::selection { background: rgba(124, 92, 255, 0.42); color: #fff; }

/* --- 滚动条（极光渐变滑块） --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.55), rgba(34, 211, 238, 0.45));
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #7C5CFF, #22D3EE); }

/* --- 减少动效偏好：停掉一切装饰动画，仅留静态画面 --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html::after { display: none; }
}

/* --- 打印 --- */
@media print {
  body { background: #fff; color: #000; }
  body::before, body::after, html::after, .bg-scene,
  .scroll-progress, .back-top, .mobile-cta, .site-header, .cs-fab, .cs-panel { display: none !important; }
  a { color: #000; text-decoration: underline; }
}

/* ============================================================
   低配降级 · html[data-perf="low"]
   ------------------------------------------------------------
   触发方式（均由 JS 设置，幂等且不可逆）：
     · head 内联能力探测脚本：CPU 核心 ≤4 / 设备内存 ≤4GB /
       省流模式 / 用户偏好「减少动效」→ 直接标记 low；
     · bg-scene.js 运行时掉帧自适应：连续 20 帧平均间隔 >33ms
       （或单帧 >50ms 连续 3 次）→ 主动降级为 low。
   降级内容：
     1) 关闭全部「装饰性」无限动画（背景漂移 / 扫光 / 旋涡 / 辉光 / 走马灯 …）；
     2) 去掉大半径 filter:blur() 与全部 backdrop-filter
        （两者都需每帧重采样，是低配设备掉帧与合成开销的主因）；
     3) 保留「功能性」动画：状态点 pulse / 客服 csPulse / 场景箭头
        flow-arrow-flow / 音频波形 wave / 气泡 bubbleIn / csBubbleIn
        等交互与状态反馈一律不受影响。
   使用 !important 以覆盖后加载的 theme-day.css 与 pages.css。
   ============================================================ */

/* 1. 关闭装饰性无限动画 */
html[data-perf="low"] body::before,
html[data-perf="low"] .section-bg__img,
html[data-perf="low"] .section-bg__img::before,
html[data-perf="low"] .section-bg__img::after,
html[data-perf="low"] .section-bg__sheen,
html[data-perf="low"] .hero::before,
html[data-perf="low"] .hero__bg,
html[data-perf="low"] .hero__particle,
html[data-perf="low"] .page-hero::after,
html[data-perf="low"] .softcta::after,
html[data-perf="low"] .site-footer::after,
html[data-perf="low"] .cl-marquee__track,
html[data-perf="low"] .scroll-progress,
html[data-perf="low"] .map-pin__pulse,
html[data-perf="low"] .hero__scroll,
html[data-perf="low"] .hero__scroll svg {
  animation: none !important;
}

/* 2. 去掉大半径模糊与毛玻璃 */
html[data-perf="low"] body::before,
html[data-perf="low"] .hero::before,
html[data-perf="low"] .page-hero::after,
html[data-perf="low"] .reveal {
  filter: none !important;
}
html[data-perf="low"] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
