@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   首屏 · 实时感 r23 · 2026-09-23
   委托人原话:「沒看出來有變化,需要再精細打磨更AI更科技感一些,
   展示的品種交易價格快速變動,營造一種整體很智能實時,並且發展很快的那種感覺」。

   r22 太克制(她看不出来 = 没做到)。这一轮把力气放在**会动的东西**上:
   跳动的数字、逐位高亮、成交方向的红绿冲刷、边走边长的走势线、
   闸上过件时的脉冲、以及背景里一道扫过去的光。

   ⚠️ 数字是真的(见 hero-r23.js 文件头:Coinbase / Kraken 逐笔推送),
      这里只负责让「它真的在动」这件事被看见。
   ⚠️ 仍然一个色值都没新造 —— 全部 color-mix 自 tokens-dark.css。
   ══════════════════════════════════════════════════════════════════ */

/* ── §1 行情面板:四列 → 名称叠放 + 走势线 ──────────────────────
   代号与中文名竖排,腾出的横向空间给走势线。面板本来只有 400 出头,
   平铺四列时走势线无处可放。 */
.qlv .hstage__row {
  position: relative;
  grid-template-columns: minmax(0, 1fr) 60px auto 4.4em;
  align-items: center;
  padding-block: 9px;
  overflow: hidden;
}
.qlv__name { display: grid; line-height: 1.3; min-inline-size: 0; }
.qlv__name .hstage__code { font-weight: 700; }

/* 每一行写明自己是哪一档 —— 三个口径混在一张表里,不标就是把它们伪装成一个。 */
.qlv__row[data-cadence="slow"]  .hstage__zh::after { content: " · 每 10 分钟"; opacity: .72; }
.qlv__row[data-cadence="daily"] .hstage__zh::after { content: " · 每日";       opacity: .72; }

/* ── §2 价格逐位跳动 ─────────────────────────────────────────────
   只有真的变了的那几位才做动效。整格一起闪,眼睛就丢掉了「哪一位在动」
   这条信息 —— 而那恰好是「它在跑」的证据。 */
.qlv .hstage__px { display: inline-flex; font-weight: 500; }
.qlv__d { display: inline-block; }
.qlv__d--up, .qlv__d--dn {
  animation: qlv-tick 620ms var(--ease) 1;
  border-radius: 2px;
}
.qlv__d--up { --tick-c: var(--sem-up); }
.qlv__d--dn { --tick-c: var(--sem-down); }
@keyframes qlv-tick {
  0%   { color: var(--tick-c); background: color-mix(in srgb, var(--tick-c) 26%, transparent);
         transform: translateY(-2px); }
  40%  { transform: translateY(0); }
  100% { color: var(--c-text); background: transparent; }
}

/* 整行的方向冲刷:从右缘扫进来一层极薄的红/绿,620ms 退干净。
   它是**第二重**提示(第一重是逐位高亮),颜色掉了语义仍在涨跌箭头上。 */
.qlv .hstage__row::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 620ms var(--ease);
}
.qlv .hstage__row[data-flash="up"]::before,
.qlv .hstage__row[data-flash="down"]::before { opacity: 1; transition-duration: 90ms; }
.qlv .hstage__row[data-flash="up"]::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sem-up) 16%, transparent));
}
.qlv .hstage__row[data-flash="down"]::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sem-down) 16%, transparent));
}

/* ── §3 走势线 ───────────────────────────────────────────────────
   只画本次会话真的收到过的点,少于 6 个点不画(r20 的判据:
   两三个点连成的直线会被读成「这个品种很平稳」)。 */
.qlv__spark {
  inline-size: 60px;
  block-size: 18px;
  overflow: visible;
  color: var(--c-text-3);
}
.qlv__spark polyline { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.qlv__row[data-trend="up"]   .qlv__spark { color: var(--sem-up); }
.qlv__row[data-trend="down"] .qlv__spark { color: var(--sem-down); }

/* ── §4 链路状态 ─────────────────────────────────────────────────
   「逐笔实时 / 取快照」是**当前真实状态**,不是一个永远亮着的绿灯。
   WebSocket 断了它会自己变成「取快照」—— 灯要说实话才有用。 */
.qlv__link {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 30%, transparent);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--c-text-3);
}
.qlv__link[data-state="live"] {
  color: var(--c-accent-700);
  border-color: color-mix(in srgb, var(--c-accent-500) 42%, transparent);
  background: color-mix(in srgb, var(--c-accent-500) 10%, transparent);
}
/* 表头那颗点跟着心跳。它表示的是**这一路推送是活的**,不是价格在跳。 */
.qlv__pulse { animation: qlv-beat 1.8s var(--ease) infinite; }
@keyframes qlv-beat {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent-500) 18%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-accent-500) 0%, transparent); }
}

/* ── §5 面板脚:实测量出来的两个数 ──────────────────────────────
   「已接收 N 笔 · 链路 Xms」—— N 是本次会话真的应用过的推送条数,
   X 是本地时钟减成交时间的中位数。两个都不许编;取不到就不显示。 */
.qlv__foot { border-block-start: 1px solid color-mix(in srgb, var(--c-border-strong) 22%, transparent); }
.qlv__stat {
  display: block;
  padding: 7px var(--s-4) 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--c-accent-700);
}
.qlv .hstage__note { border-block-start: 0; padding-block-start: 4px; }

/* ── §6 执行流:让它像在跑 ──────────────────────────────────────
   r22 把整块产品面压到 .92 让位给标题;但她要的是「智能、实时」,
   而执行流正是这句话的图解 —— 收回那半档,改由闸本身发光来聚焦。 */
@media (min-width: 1024px) {
  .hero .hstage { opacity: 1; }
}
.hstage__gate {
  box-shadow: 0 0 14px color-mix(in srgb, var(--c-primary-500) 46%, transparent);
  animation: qlv-gate 3.4s var(--ease) infinite;
}
@keyframes qlv-gate {
  0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--c-primary-500) 30%, transparent); }
  50%      { box-shadow: 0 0 22px color-mix(in srgb, var(--c-primary-500) 62%, transparent); }
}
/* 代币拖一条短尾:静止时看不出来,过闸那一下能读出速度。 */
.hstage__tok { box-shadow: 0 0 10px color-mix(in srgb, var(--c-agent) 70%, transparent); }
.hstage__tok--human { box-shadow: 0 0 10px color-mix(in srgb, var(--c-human) 52%, transparent); }

/* ── §7 背景:一道扫过去的光 ────────────────────────────────────
   r22 的光带是静的。给它加一条更亮的窄边,每 9 秒沿着光带滑一次 ——
   画面里有东西在**定期经过**,才会被读成「系统在跑」,而不是一张壁纸。 */
.hero .hlx-beam::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 24%;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--c-accent-500) 22%, transparent) 46%,
    color-mix(in srgb, var(--c-primary-500) 16%, transparent) 60%,
    transparent);
  filter: blur(6px);
  animation: qlv-sweep 9s var(--ease) infinite;
}
@keyframes qlv-sweep {
  0%   { inset-block-start: -26%; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { inset-block-start: 102%; opacity: 0; }
}
/* 光场极慢地挪一点位置。40 秒一轮,单独看是看不见的 ——
   但画面因此不再是一张贴死的图。 */
.hero .hlx-amb::before { animation: qlv-drift 40s ease-in-out infinite; }
@keyframes qlv-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
}

/* ── §8 手机 ────────────────────────────────────────────────────
   面板落回文字下面、正面朝上,行情照常跳;走势线留着(它比数字更省地方)。 */
@media (max-width: 1023px) {
  .qlv .hstage__row { grid-template-columns: minmax(0, 1fr) 52px auto 4.2em; }
}

/* ── §9 关掉动效时 ──────────────────────────────────────────────
   数字照常更新(那是信息),只是不闪、不扫、不呼吸。 */
@media (prefers-reduced-motion: reduce) {
  .qlv__pulse, .hstage__gate, .hero .hlx-beam::after, .hero .hlx-amb::before { animation: none; }
  .qlv .hstage__row::before { display: none; }
}