/* ══════════════════════════════════════════════════════════════════
   hw-reforge.css — V.167 重构动效层 (Rebuild · Batch 1)
   灵感: Aceternity UI (3D Card + Spotlight) / React Bits (Count-Up)
         MotionSites (stagger reveal) / anime.js (timeline)

   铁律:
     · 只动 transform / opacity / filter  (GPU 合成层, 零 layout 抖动)
     · 不搬 DOM / 不改结构 / 不碰标识符
     · 不碰地球 (.earth-bg/#aiEarth/three.js)
     · 不碰涨跌色 (--hw-up/--hw-down/--up/--down)
     · 回滚: URL ?motion=off  (与 hw-motion.js 共用开关)
   ══════════════════════════════════════════════════════════════════ */

/* ── ① 3D 卡片容器: 让倾斜有透视深度 ─────────────────────────── */
.hrf-tilt{
  perspective:900px;
  transform-style:preserve-3d;
}
/* 被倾斜的卡片本体 */
.hrf-tilt > *{
  transition:transform .38s cubic-bezier(.22,1,.36,1),
             box-shadow .38s cubic-bezier(.22,1,.36,1);
  transform-style:preserve-3d;
  will-change:transform;
}
.hrf-tilt.hrf-on > *{
  transition:transform .08s linear, box-shadow .3s ease;
}

/* ── ② 鼠标聚光层 (Aceternity Card Spotlight) ─────────────────── */
.hrf-spot{position:relative}
.hrf-spot::after{
  content:'';
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .34s ease;
  background:radial-gradient(
    340px circle at var(--rf-x,50%) var(--rf-y,50%),
    rgba(77,124,254,.13),
    rgba(34,211,238,.05) 42%,
    transparent 68%);
  mix-blend-mode:screen;z-index:2;
}
.hrf-spot.hrf-on::after{opacity:1}

/* 悬停时卡片描边提亮 (与聚光呼应) */
.hrf-spot.hrf-on{
  border-color:rgba(77,124,254,.42)!important;
  box-shadow:0 18px 44px -20px rgba(77,124,254,.42),
             0 0 0 1px rgba(77,124,254,.14)!important;
}

/* ── ③ KPI 数字滚数 (React Bits Count-Up) ────────────────────── */
.hrf-num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  display:inline-block;
  will-change:contents;
}
/* 数字跳动瞬间的高光脉冲 (极短, 不抢戏) */
.hrf-num.hrf-tick{
  animation:hrfTick .5s cubic-bezier(.22,1,.36,1) 1;
}
@keyframes hrfTick{
  0%{filter:brightness(1)}
  22%{filter:brightness(1.5)}
  100%{filter:brightness(1)}
}

/* ── ④ 入场: 阶梯升起 (由 anime.js 驱动, 此处只定义初末态) ────── */
.hrf-in{opacity:0}
html.hrf-noanim .hrf-in{opacity:1!important;transform:none!important;filter:none!important}

/* 情报卡片模糊聚焦入场 (React Bits Blur-In) */
.hrf-blur{opacity:0;filter:blur(7px)}
html.hrf-noanim .hrf-blur{opacity:1!important;filter:none!important}

/* ── ⑤ 导航激活标签: 流光下划线 ─────────────────────────────── */
.hrf-flow::after{
  content:'';position:absolute;left:8%;right:8%;bottom:0;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--hw-brand,#4D7CFE),transparent);
  box-shadow:0 0 9px rgba(77,124,254,.75);
  transform-origin:left center;
  animation:hrfFlow 4.2s ease-in-out infinite;
}
@keyframes hrfFlow{
  0%{opacity:.35;transform:scaleX(.42)}
  50%{opacity:1;transform:scaleX(1)}
  100%{opacity:.35;transform:scaleX(.42)}
}

/* ── ⑥ 策略卡片: 运行中呼吸脉冲边框 ─────────────────────────── */
.hrf-pulse{
  border-top-color:rgba(77,124,254,.9)!important;
  animation:hrfPulse 3.1s ease-in-out infinite;
}
@keyframes hrfPulse{
  0%,100%{border-top-color:rgba(77,124,254,.34)}
  50%{border-top-color:rgba(155,180,255,.95)}
}

/* ── ⑦ 终端墙: CRT 扫描线 ──────────────────────────────────── */
#hwWall.hrf-crt::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(
    to bottom,
    rgba(77,124,254,.028) 0px,
    rgba(77,124,254,.028) 1px,
    transparent 1px,
    transparent 3px);
  animation:hrfScan 8s linear infinite;
}
@keyframes hrfScan{
  0%{transform:translateY(0)}
  100%{transform:translateY(3px)}
}
/* 微故障闪烁 (15s 一次, 120ms) */
@keyframes hrfGlitch{
  0%,96%,100%{transform:none;filter:none}
  97%{transform:translateX(-1.5px) skewX(-.4deg);filter:hue-rotate(14deg)}
  98%{transform:translateX(1.5px) skewX(.4deg)}
  99%{transform:none;filter:brightness(1.12)}
}

/* ── ⑧ 表格行交错入场 ─────────────────────────────────────── */
.hrf-row{opacity:0}

/* ── ⑨ Logo 悬停粒子 ─────────────────────────────────────── */
.hrf-p{
  position:fixed;width:5px;height:5px;border-radius:50%;
  pointer-events:none;z-index:9999;
  background:radial-gradient(circle,#9BB4FF,rgba(77,124,254,.15) 70%,transparent);
  will-change:transform,opacity;
}

/* ── ⑩ 图表面积呼吸 ──────────────────────────────────────── */
.hrf-breath{animation:hrfBreath 8.5s ease-in-out infinite}
@keyframes hrfBreath{0%,100%{opacity:.85}50%{opacity:1}}

/* ── ⑪ 无障碍 / 降级 ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hrf-pulse,.hrf-breath{animation:none!important}
  .hrf-flow::after{animation:none!important;opacity:.7;transform:scaleX(1)}
  #hwWall.hrf-crt::before{animation:none!important}
}
@media (max-width:760px){
  .hrf-tilt{perspective:none}
  .hrf-tilt > *{transform:none!important}
  .hrf-spot::after{display:none}
}

/* ── ⑫ 导航项 hover: 流光预览 (Aceternity Moving Border) ───── */
.hw-nav .nav-item{position:relative}
.hw-nav .nav-item:not(.active)::after{
  content:'';position:absolute;left:12%;right:12%;bottom:0;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--hw-brand,#4D7CFE),transparent);
  transform:scaleX(0);transform-origin:center;
  transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .34s ease;
  opacity:0;
}
.hw-nav .nav-item:not(.active):hover::after{transform:scaleX(1);opacity:.75}

/* ── ⑬ 情报行 hover: 左侧强调条 ──────────────────────────── */
#aiIntelList > div{position:relative;transition:background .25s ease,padding-left .25s ease}
#aiIntelList > div::before{
  content:'';position:absolute;left:-10px;top:14%;bottom:14%;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--hw-brand,#4D7CFE),transparent);
  opacity:0;transition:opacity .25s ease;
}
#aiIntelList > div:hover{background:rgba(77,124,254,.045);padding-left:10px}
#aiIntelList > div:hover::before{opacity:1}

/* ══════════════════════════════════════════════════════════════════
   ⑭ 修复: 旧动效层(hm-*) 与性能层(hw-app-37.js) 冲突
   真因: hw-app-37.js 伪造 prefers-reduced-motion=true
        → @media(reduce) 分支里 .hm-on .hm-rise{animation:none!important;opacity:1!important}
        特异性(0,2,0) 输给 .hm-on .hm-rise.hm-done{will-change:auto}(0,3,0) 附近的
        普通规则链, 实际表现为 KPI 永久停在 opacity:0 (不可见)。
   修法: 用 html.hrf-on 前缀 + !important 强制解除透明, 只针对"已入场"的元素。
   ══════════════════════════════════════════════════════════════════ */
html.hrf-on .hm-on .hm-rise.hm-done,
html.hrf-on .hm-on .hm-rise,
html.hrf-on .hm-on .hm-focus.hm-done,
html.hrf-on .hm-on .hm-row.hm-done{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
}
/* 面板头扫掠线不要卡在半路 */
html.hrf-on .hm-on .hm-sweep::after{animation:none!important;opacity:0!important}

/* ══════════════════════════════════════════════════════════════
   BATCH 3 — 视觉冲击层
   ══════════════════════════════════════════════════════════════ */

/* ── ⑮ 终端墙: CRT 扫描线 + 微故障 ─────────────────────────── */
/* ⚠️ 铁律: 绝不改 #hwWall 的 position (原为 fixed, 改了会把墙推出屏幕) */
#hwWall::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(
    to bottom,
    rgba(77,124,254,.022) 0px, rgba(77,124,254,.022) 1px,
    transparent 1px, transparent 3px);
}
/* 缓慢下移的扫描光带 */
#hwWall .hrf-scanbar{
  position:absolute;left:0;right:0;height:120px;pointer-events:none;z-index:51;
  background:linear-gradient(to bottom,transparent,rgba(77,124,254,.055),transparent);
  animation:hrfScanBar 7.5s linear infinite;
}
@keyframes hrfScanBar{
  0%{transform:translateY(-140px)}
  100%{transform:translateY(100vh)}
}
/* 微故障 (周期性) */
#hwWall.hrf-glitch{animation:hrfGlitchWall .18s steps(2) 1}
@keyframes hrfGlitchWall{
  0%{transform:none;filter:none}
  40%{transform:translateX(-2px);filter:hue-rotate(18deg) brightness(1.1)}
  70%{transform:translateX(2px)}
  100%{transform:none;filter:none}
}

/* ── ⑯ 表格行: 交错入场 ─────────────────────────────────── */
.hrf-row{opacity:0}

/* ── ⑰ Logo 粒子 (HRF burst) ───────────────────────────── */
.hrf-p{
  position:fixed;width:5px;height:5px;border-radius:50%;pointer-events:none;z-index:99999;
  background:radial-gradient(circle,#9BB4FF,rgba(77,124,254,.35) 55%,transparent 72%);
  box-shadow:0 0 6px rgba(77,124,254,.7);
  will-change:transform,opacity;
}

/* ── ⑱ 图表区域: 缓慢呼吸辉光 ───────────────────────────── */
.chart-wrap,.equity-chart,.chart-box{position:relative}
.hrf-breath{animation:hrfBreathSoft 7.5s ease-in-out infinite}
@keyframes hrfBreathSoft{
  0%,100%{filter:brightness(1) saturate(1)}
  50%{filter:brightness(1.07) saturate(1.12)}
}

/* ══════════════════════════════════════════════════════════════
   BATCH 4 — 结构 / 信息层
   ══════════════════════════════════════════════════════════════ */

/* ── ⑲ 导航分组分隔符 ───────────────────────────────────── */
.hw-nav-scroll{position:relative}
.hrf-navsep{
  flex:0 0 auto;align-self:center;width:1px;height:20px;margin:0 9px;
  background:linear-gradient(180deg,transparent,rgba(77,124,254,.62),transparent);
  box-shadow:0 0 6px rgba(77,124,254,.42);
  pointer-events:none;opacity:1;border-radius:1px;
}
@media (max-width:900px){.hrf-navsep{display:none}}

/* ── ⑳ SI 一句话摘要 (overview 顶部) ─────────────────────── */
.hrf-brief{
  display:flex;align-items:center;gap:9px;
  margin:2px 0 12px;padding:9px 13px;border-radius:11px;
  background:linear-gradient(100deg,rgba(77,124,254,.09),rgba(34,211,238,.045) 60%,transparent);
  border:1px solid rgba(77,124,254,.17);
  font-size:12.5px;color:var(--sub);line-height:1.55;
  opacity:0;transform:translateY(-6px);
}
.hrf-brief.hrf-brief-in{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.hrf-brief .ic{
  flex:0 0 auto;width:17px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9BB4FF,rgba(77,124,254,.35));
  box-shadow:0 0 10px rgba(77,124,254,.5);
}
.hrf-brief b{color:var(--txt);font-weight:700}
.hrf-brief .sep{color:var(--dim);opacity:.5;margin:0 1px}
.hrf-brief .v-up{color:var(--ok)}
.hrf-brief .v-dn{color:var(--err)}
html.hrf-noanim .hrf-brief{opacity:1!important;transform:none!important}

/* ══════════════════════════════════════════════════════════════
   BATCH 5 — v252 (老板 2026-09-30)
   ① 右侧情报默认收起, 需要时展开 (不抢球体主视觉)
   ② 球体居中放大后, 情报展开时也不遮球
   ══════════════════════════════════════════════════════════════ */

/* ── 情报面板: 默认收起 ─────────────────────────────────── */
/* v255(2026-09-30 老板: 新闻打不开) —— 根因: .hq-intel 的 CSS 过渡在合成层里
   卡死(currentTime 恒为 0, will-change:transform,opacity + backdrop-filter 所致),
   面板永远停在屏外 → 点开也看不见。
   修法: ① 去掉 will-change(消除卡死源) ② 展开态加 !important(即便过渡不跑也必显示)
        ③ 过渡只做「锦上添花」, 正确性不依赖它。 */
/* v255b(2026-09-30) —— ★根治: 去掉 transition。
   运行中的 CSS 过渡【优先级高于 !important】(Cascading: Transitions 最高) →
   只要过渡卡死(本机 will-change+backdrop-filter 合成层实测 currentTime 恒0),
   class / 内联 !important 全都会被压过 → 面板永远停在屏外。
   不依赖过渡后, 显隐由 class 直接驱动, 任何环境都必可见。
   (滑出动画改由 JS 用 Web Animations 做, 不影响正确性) */
.hq-intel{
  transform:translateX(calc(100% + 26px));
  opacity:0;
}
.hq-intel.hrf-open{transform:none!important;opacity:1!important}

/* ── 收起时右侧的"展开"把手 ────────────────────────────── */
.hrf-intel-tab{
  position:absolute;top:50%;right:0;z-index:13;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:13px 7px;cursor:pointer;
  border-radius:12px 0 0 12px;
  border:1px solid rgba(77,124,254,.30);border-right:none;
  background:linear-gradient(270deg,rgba(12,14,26,.92),rgba(10,12,22,.62));
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  box-shadow:-8px 0 26px -12px rgba(77,124,254,.55);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
  pointer-events:auto;
}
.hrf-intel-tab:hover{
  transform:translateY(-50%) translateX(-3px);
  border-color:rgba(77,124,254,.62);
  box-shadow:-12px 0 32px -10px rgba(77,124,254,.85);
}
.hrf-intel-tab .ic{
  font-size:13px;line-height:1;color:#9bb4ff;
  text-shadow:0 0 10px rgba(77,124,254,.85);
}
.hrf-intel-tab .n{
  font-family:var(--mono);font-size:10px;font-weight:800;
  color:#fff;letter-spacing:.4px;
  background:linear-gradient(135deg,#4D7CFE,#22D3EE);
  padding:1px 5px;border-radius:6px;line-height:1.5;
}
.hrf-intel-tab .txt{
  font-size:9.5px;letter-spacing:2.2px;color:rgba(155,180,255,.75);
  writing-mode:vertical-rl;font-family:var(--mono);
}
/* 有未读脉冲 */
.hrf-intel-tab.hrf-ping{animation:hrfTabPing 2.6s ease-in-out infinite}
@keyframes hrfTabPing{
  0%,100%{box-shadow:-8px 0 26px -12px rgba(77,124,254,.55)}
  50%{box-shadow:-8px 0 30px -6px rgba(77,124,254,.95)}
}
/* 展开后把手滑出 */
.hrf-intel-tab.hrf-hidden{transform:translateY(-50%) translateX(120%);opacity:0;pointer-events:none}

/* ── 情报面板展开时的关闭钮 ─────────────────────────────── */
.hrf-intel-x{
  position:absolute;top:9px;right:9px;z-index:14;
  width:23px;height:23px;display:grid;place-items:center;cursor:pointer;
  border-radius:7px;border:1px solid rgba(77,124,254,.26);
  background:rgba(10,12,22,.72);color:#9aa6bd;font-size:12px;line-height:1;
  transition:all .24s ease;pointer-events:auto;
}
.hrf-intel-x:hover{color:#fff;border-color:rgba(255,107,118,.55);background:rgba(255,77,107,.16)}

@media (max-width:900px){
  /* 2026-10-06 老板: 窄屏也必须【默认收起】。
     原为 transform:none;opacity:1 (强制常显) → 压过默认收起规则,
     导致 ≤900px 新闻面板一直挂在页面上 (老板反馈「时间段新闻没自动隐藏」)。
     改为与默认收起一致, 开合仍由 .hrf-open 驱动; 保留把手供点按展开。 */
  .hq-intel{transform:translateX(calc(100% + 26px));opacity:0}
  .hq-intel.hrf-open{transform:none!important;opacity:1!important}
  .hrf-intel-tab{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .hq-intel{transition:none}
  .hrf-intel-tab{animation:none!important}
}



/* ── v252b: 情报展开时球体让位 ──────────────────────────────
   ⚠️ 不能动 canvas: hw-app-12.js 的 earthParallax 会写按行内
      transform (滚动视差), 优先级高于样式表 → 只能用 JS 调
      Three.js group。此处仅定义过渡时长常量, 实际位移在 JS 中。 */

/* ══════════════════════════════════════════════════════════════
   BATCH 6 — v253 (老板 2026-09-30)
   球体居中后两侧空荡 → 补"操作台数据侧栏", 增强视觉包围感
   设计约束: 只做"氛围/刻度/数据流", 不抢球体、不遮挡交互
   ══════════════════════════════════════════════════════════════ */
.hrf-flank{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:6;pointer-events:none;
  display:flex;flex-direction:column;gap:14px;
  width:150px;
}
.hrf-flank.left{left:26px;align-items:flex-start}
.hrf-flank.right{right:26px;align-items:flex-end}

/* 每个数据块: 细线 + 小标签 + 数字 */
.hrf-flank .fb{
  display:flex;flex-direction:column;gap:5px;
  opacity:0;transform:translateY(8px);
  animation:hrfFlankIn .7s cubic-bezier(.22,1,.36,1) forwards;
}
.hrf-flank .fb .lb{
  font-family:var(--mono);font-size:9px;letter-spacing:2.4px;
  text-transform:uppercase;color:rgba(77,124,254,.62);
  display:flex;align-items:center;gap:6px;
}
.hrf-flank.right .fb .lb{flex-direction:row-reverse}
.hrf-flank .fb .lb::before{
  content:'';width:14px;height:1px;
  background:linear-gradient(90deg,rgba(77,124,254,.7),transparent);
}
.hrf-flank.right .fb .lb::before{background:linear-gradient(270deg,rgba(77,124,254,.7),transparent)}
.hrf-flank .fb .vl{
  font-family:var(--mono);font-size:15px;font-weight:700;
  color:rgba(226,236,250,.88);letter-spacing:.4px;
  text-shadow:0 0 12px rgba(77,124,254,.30);
}
.hrf-flank .fb .vl.up{color:#4ade80}
.hrf-flank .fb .vl.dn{color:#ff6b6b}

/* 刻度尺 (两侧竖向, 强化"操作台"感) */
.hrf-flank .gr{
  width:100%;height:1px;
  background:repeating-linear-gradient(90deg,
    rgba(226,236,250,.16) 0 1px,transparent 1px 9px);
}
.hrf-flank.right .gr{background:repeating-linear-gradient(90deg,
    rgba(226,236,250,.16) 0 1px,transparent 1px 9px)}

/* 竖向数据流 (极淡, 缓慢下移) */
.hrf-flank .stream{
  width:1px;height:86px;align-self:center;
  background:linear-gradient(180deg,transparent,rgba(77,124,254,.55),transparent);
  animation:hrfStream 3.4s linear infinite;
}
@keyframes hrfStream{
  0%{transform:translateY(-100%);opacity:0}
  20%{opacity:1}
  80%{opacity:1}
  100%{transform:translateY(100%);opacity:0}
}
@keyframes hrfFlankIn{to{opacity:1;transform:none}}

/* 逐块延迟入场 */
.hrf-flank .fb:nth-child(1){animation-delay:.05s}
.hrf-flank .fb:nth-child(2){animation-delay:.16s}
.hrf-flank .fb:nth-child(3){animation-delay:.27s}
.hrf-flank .fb:nth-child(4){animation-delay:.38s}
.hrf-flank .fb:nth-child(5){animation-delay:.49s}

/* 窄屏/情报展开时隐去, 不挤球体 */
@media (max-width:1200px){ .hrf-flank{display:none} }
body.hrf-intel-open .hrf-flank.right{opacity:0;transition:opacity .3s ease}

@media (prefers-reduced-motion:reduce){
  .hrf-flank .fb{animation:none;opacity:1;transform:none}
  .hrf-flank .stream{animation:none}
}

/* ══ v255(2026-09-30 老板) ══ */
.hrf-brief{display:none!important}          /* 今日概览摘要条: 不要显示 */
.hrf-flank{display:none!important}          /* 球体两侧资产/仓位栏: 不要显示 */
/* v255b: 过渡已移除(见上); 滑出改 JS 动画 */