/* /home/ubuntu/baoleme/frontend/assets/hw-immersive.css
   HONGWU.SI — 沉浸式表现层 v1 (2026-10-12 老板令「最牛的沉浸式交互式」)
   ─ 只做 hw-motion(聚光/入场/数字/流光) 与 hw-styles(v29 纯黑) 未覆盖的【真增量】:
     极光背景 · 胶片噪点 · 伪玻璃悬浮层 · 卡片圆角/深投影 · 等宽数字 · 现代焦点环 ·
     滚动揭示 · SPA 视图过渡
   ─ 纯 CSS additive; 只用令牌变量(与 hw-tokens 同源), 绝不改涨跌语义色
   ─ 性能: 尊重 v29 全站 backdrop-filter:none 决定(不重开真模糊, 用彩色渐变模拟);
           只动 transform/opacity; 无无限循环(除低频极光)
   ─ 回退: URL 加 ?fx=off, 或删 index.html 本 <link> 行
   ─ 无障碍: 动效全走 @media (prefers-reduced-motion: reduce)
*/
:root{
  /* 流体字号阶梯 (clamp) */
  --fs-h1: clamp(1.55rem, 1.05rem + 1.5vw, 2.3rem);
  --fs-h2: clamp(1.2rem, 0.98rem + 0.75vw, 1.55rem);
  --fs-h3: clamp(1.0rem, 0.92rem + 0.35vw, 1.18rem);
  --hw-r:   14px;
  --hw-r-sm:10px;
  --hw-r-lg:20px;
  --hw-spring: cubic-bezier(.22,1,.36,1);
}

/* ── ① 沉浸背景: 把渐变极光 + 胶片噪点【烤进 body 背景】
      — 零 DOM / 零模糊滤镜 / 零每帧成本 (静态背景图), 不跟 v29 的层级与性能决定斗
      — 位于 z-index:-1 的 DOM 层会被 v29 不透明 body 背景遮住, 故此路正解是直接接管 body 背景 ── */
html.hw-theme.v29-on body,
html.hw-theme body{
  background-color:#07070C!important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E"),
    radial-gradient(780px 460px at 14% 4%, rgba(77,124,254,.13), transparent 70%),
    radial-gradient(660px 400px at 88% 8%, rgba(34,211,238,.075), transparent 70%),
    radial-gradient(980px 620px at 64% 112%, rgba(43,78,216,.105), transparent 70%)!important;
  background-size:140px 140px, auto, auto, auto!important;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat!important;
  background-attachment:fixed!important;
}

/* ── ③ 「伪玻璃」悬浮层 —— 尊重 v29 全站 backdrop-filter:none 的性能决定,
      不用真模糊(曾致动画卡死), 用半透渐变 + 内高光描边模拟 ── */
html.hw-theme .hw-nav{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--hw-bg-elev) 88%, transparent),
    color-mix(in srgb, var(--hw-bg-elev) 70%, transparent))!important;
  border-bottom:1px solid var(--hw-border-2)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 14px 40px -26px rgba(0,0,0,.9)!important;
}
html.hw-theme .hw-statusbar{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--hw-bg-elev) 74%, transparent),
    color-mix(in srgb, var(--hw-bg-elev) 60%, transparent))!important;
}
html.hw-theme .asset-bar{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--hw-surface) 74%, transparent),
    color-mix(in srgb, var(--hw-surface) 58%, transparent))!important;
}
/* 悬浮下拉/弹层: 伪玻璃 + 深投影 + 内高光描边 */
html.hw-theme .hv-drop{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--hw-surface-2) 96%, transparent),
    color-mix(in srgb, var(--hw-surface) 92%, transparent))!important;
  border:1px solid var(--hw-border-2)!important;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06) inset!important;
}

/* ── ④ 卡片: 圆角统一 (v29 已管阴影/过渡, 不与其 !important 对抗) ── */
html.hw-theme .panel,
html.hw-theme .kpi,
html.hw-theme .dept-block{
  border-radius:var(--hw-r);
}

/* ── ⑤ 排版: 等宽数字 (量化终端硬需求) + 标题流体化 ── */
html.hw-theme .mono,
html.hw-theme .ss-v,
html.hw-theme .ss-clock,
html.hw-theme td,
html.hw-theme .kpi .value,
html.hw-theme .si-hero-v,
html.hw-theme [class*="num"]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"zero" 1;
}
html.hw-theme h1{font-size:var(--fs-h1)}
html.hw-theme h2{font-size:var(--fs-h2)}
html.hw-theme h3{font-size:var(--fs-h3)}

/* ── ⑥ 现代焦点环 (键盘无障碍; 只在 :focus-visible 出现) ── */
html.hw-theme :focus-visible{
  outline:2px solid var(--hw-brand);
  outline-offset:2px;
  border-radius:6px;
}

/* ── ⑦ 滚动揭示 (渐进增强; 无支持时元素默认可见, 绝不隐藏内容) ── */
@supports (animation-timeline: view()){
  .hw-reveal{animation:hwRise .6s linear both; animation-timeline:view(); animation-range:entry 8% cover 32%}
}
@keyframes hwRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── ⑧ SPA 视图过渡 (View Transitions API, 渐进增强) ── */
@keyframes hwVtOut{to{opacity:0;transform:translateY(-6px) scale(.994)}}
@keyframes hwVtIn{from{opacity:0;transform:translateY(8px) scale(.996)}}
::view-transition-old(root){animation:hwVtOut .17s ease both}
::view-transition-new(root){animation:hwVtIn .28s var(--hw-spring) both}

/* ── ⑩ 面包屑 (hw-shell 页头内) + 键盘跳转链接 ── */
html.hw-theme .hw-crumb{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 11px 3px;border-radius:999px;
  border:1px solid var(--hw-brand-line,rgba(77,124,254,.28));
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--hw-brand) 14%, transparent),
    color-mix(in srgb, var(--hw-brand) 5%, transparent));
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;line-height:1.5;
  white-space:nowrap;
}
html.hw-theme .hw-crumb-dept{color:var(--hw-brand-hi,#9BB4FF);font-weight:700}
html.hw-theme .hw-crumb-sep{color:var(--hw-dim);opacity:.7}
html.hw-theme .hw-crumb-tab{color:var(--hw-text)}
/* 键盘跳转链接: 平时屏外, 聚焦时滑入 */
.hw-skip{
  position:fixed;top:8px;left:50%;transform:translate(-50%,-260%);z-index:99999;
  padding:8px 16px;border-radius:10px;
  background:var(--hw-brand);color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;
  text-decoration:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.8);
  transition:transform .18s var(--hw-spring);
}
.hw-skip:focus{transform:translate(-50%,0);outline:2px solid #fff;outline-offset:2px}

/* ── ⑪ 减弱动效 (CSS 层读真实偏好; reduced-motion 下全静态) ── */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .hw-reveal{animation:none;opacity:1;transform:none}
  .hw-skip{transition:none}
}

/* 背景回退开关 (?fx=off): 抹掉渐变+噪点, 回到纯黑 (特异度须 ≥ 主规则) */
html.hw-theme.hw-fx-off body,
html.hw-fx-off body{
  background-image:none!important;
}