/* ==========================================================================
   首屏三张卡片的演示画面：记忆引擎 / 多智能体 / 连接编排
   设计原则
   - 每张卡只有一个视觉焦点（曲线 / 协作链 / 汇流），字大、少、有留白；
   - 画布不再是“白底后台截图”，而是浅蓝点阵底，白色卡片和图形浮在上面；
   - JS 按步骤给舞台依次加上 s1 s2 …（累加类名），CSS 只描述“每一步长什么样”；
     没有 JS 时 HTML 里预置了全部类名，直接是最终画面。
   ========================================================================== */

.page-screen--hero .landing-panel .proof-card-media.proof-card-media--mem,
.page-screen--hero .landing-panel .proof-card-media.proof-card-media--chain,
.page-screen--hero .landing-panel .proof-card-media.proof-card-media--orch {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  padding: 0.5rem;
  height: auto;
  background:
    radial-gradient(120% 90% at 50% 0%, #f6f9ff 0%, rgba(246, 249, 255, 0) 60%),
    #e7eefc;
}

.hc {
  --hc-blue: #003fec;
  --hc-red: #c2372a;
  --hc-amber: #a2650a;
  --hc-green: #0b7a43;
  --hc-ink: #0f1b3d;
  --hc-mute: #7584a3;
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 15rem;
  overflow: hidden;
  color: var(--hc-ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", var(--font-sans, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.hc[data-hc="mem"] { min-height: 246px; }
.hc[data-hc="chain"] { min-height: 244px; }
.hc[data-hc="orch"] { min-height: 244px; }

.hc-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  font-size: 11px;
  line-height: 1.25;
  isolation: isolate;
}
/* 点阵底：让画面像“画布”而不是一张卡；放在伪元素上，蒙版不会影响内容 */
.hc-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 63, 236, 0.14) 1px, transparent 1.5px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 35%, rgba(0, 0, 0, 0.25) 100%);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 35%, rgba(0, 0, 0, 0.25) 100%);
}
.hc-stage svg { display: block; }
.hc-stage * { box-sizing: border-box; }

/* —— 通用关键帧 —— */
@keyframes hc-spin { to { transform: rotate(360deg); } }
@keyframes hc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 63, 236, 0.4); }
  100% { box-shadow: 0 0 0 8px rgba(0, 63, 236, 0); }
}
@keyframes hc-pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(194, 55, 42, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(194, 55, 42, 0); }
}
@keyframes hc-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes hc-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes hc-march { to { background-position: 12px 0; } }
@keyframes hc-travel {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 7px); opacity: 0; }
}
@keyframes hc-run {
  0% { offset-distance: 0%; opacity: 0; }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes hc-hub {
  0% { box-shadow: 0 6px 16px rgba(0, 63, 236, 0.28), 0 0 0 0 rgba(0, 63, 236, 0.35); }
  100% { box-shadow: 0 6px 16px rgba(0, 63, 236, 0.28), 0 0 0 10px rgba(0, 63, 236, 0); }
}

/* 共用小零件：对勾图标 */
.hc-stage svg.ck, .hcm-chip-b svg, .hcc-st-found svg, .hcc-done svg, .hco-tick svg {
  width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   1. 记忆引擎：一条“越用越准”的曲线
   ========================================================================== */
.hcm { padding: 10px 10px 10px; gap: 6px; }

.hcm-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; }
.hcm-title, .hcc-title { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; font-weight: 700; }
.hcm-title > span:last-child, .hcc-title > span:last-child, .hco-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcm-live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hc-blue); animation: hc-pulse 1.8s ease-out infinite; }
.hcm-badge, .hcc-badge, .hco-badge {
  flex: none; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); color: var(--hc-blue);
  font-size: 10px; font-weight: 700; box-shadow: 0 1px 2px rgba(0, 40, 140, 0.08);
}

/* 大数字：准确率 */
.hcm-score { flex: none; display: flex; align-items: flex-end; gap: 10px; height: 34px; }
.hcm-big { display: flex; align-items: baseline; line-height: 1; }
.hcm-big b { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--hc-ink); font-variant-numeric: tabular-nums; }
.hcm-big sup { margin-left: 2px; font-size: 15px; font-weight: 800; color: var(--hc-blue); }
.hcm-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 3px; }
.hcm-acc-l { font-size: 11px; font-weight: 600; color: #51618a; }
.hcm-delta {
  padding: 1px 7px; border-radius: 999px; background: #dff5e8; color: var(--hc-green); font-size: 10px; font-weight: 800;
  opacity: 0; transform: translateY(4px); transition: opacity 0.35s, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.hcm-delta::before { content: "▲ "; font-size: 8px; }
.hcm.s5 .hcm-delta { opacity: 1; transform: none; }

/* 曲线图 */
.hcm-chart { position: relative; flex: none; height: 74px; }
.hcm-grid, .hcm-reveal { position: absolute; inset: 0; width: 100%; height: 100%; }
.hcm-grid svg, .hcm-grid { width: 100%; height: 100%; }
.hcm-grid path { fill: none; stroke: rgba(0, 63, 236, 0.14); stroke-width: 1; stroke-dasharray: 2 4; }
.hcm-reveal { transition: clip-path 1s cubic-bezier(0.3, 0.7, 0.2, 1); }
.hcm-reveal svg { width: 100%; height: 100%; }
.hcm-area { fill: url(#hcmG); stroke: none; }
.hcm-line { fill: none; stroke: var(--hc-blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hcm-dot {
  position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: #fff; border: 3px solid var(--hc-blue); box-shadow: 0 0 0 4px rgba(0, 63, 236, 0.16);
  transition: left 1s cubic-bezier(0.3, 0.7, 0.2, 1), top 1s cubic-bezier(0.3, 0.7, 0.2, 1);
}

/* 曲线上方的两枚事件胶囊：新指纹 / 新告警 */
.hcm-chips { position: absolute; left: 0; right: 0; top: -2px; display: flex; justify-content: space-between; gap: 4px; pointer-events: none; }
.hcm-chip { position: relative; display: grid; min-width: 0; height: 22px; border-radius: 999px; background: #fff; font-size: 10.5px; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 40, 140, 0.12); opacity: 0; transform: translateY(5px) scale(0.96); transition: opacity 0.35s, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.hcm-chip > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; min-width: 0; white-space: nowrap; transition: opacity 0.3s; }
.hcm-chip > span > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hcm-chip--fp { color: #1c3fb0; }
.hcm-chip--al { color: var(--hc-red); }
.hcm-chip-b { opacity: 0; color: var(--hc-green); }
.hcm-spin { flex: none; width: 9px; height: 9px; border: 2px solid #b7cbfa; border-top-color: var(--hc-blue); border-radius: 50%; animation: hc-spin 0.7s linear infinite; }
.hcm-adot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hc-red); }
.hcm.s1 .hcm-chip--fp { opacity: 1; transform: none; }
.hcm.s2 .hcm-chip--fp .hcm-chip-a { opacity: 0; }
.hcm.s2 .hcm-chip--fp .hcm-chip-b { opacity: 1; }
.hcm.s3 .hcm-chip--al { opacity: 1; transform: none; }
.hcm.s4 .hcm-chip--al .hcm-chip-a { opacity: 0; }
.hcm.s4 .hcm-chip--al .hcm-chip-b { opacity: 1; }
.hcm.s4 .hcm-chip--al { box-shadow: 0 2px 8px rgba(11, 122, 67, 0.25); }
/* 告警飞向“降噪”那一格 */
.hcm-fly { position: absolute; right: 24px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--hc-red); opacity: 0; pointer-events: none; }
.hcm.s3 .hcm-fly { animation: hcm-fly 0.8s 0.25s cubic-bezier(0.5, 0, 0.7, 0.4) both; }
.hcm.s4 .hcm-fly { opacity: 0; animation: none; }
@keyframes hcm-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: translate(-184px, 97px) scale(0.7); }
}

/* 三层记忆：三个大号数字 */
.hcm-layers { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; height: 44px; }
.hcm-tile {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: end; row-gap: 1px;
  padding: 5px 9px 6px; border-radius: 11px; background: #fff; box-shadow: 0 1px 3px rgba(0, 40, 140, 0.09);
  transition: box-shadow 0.35s, background 0.35s, transform 0.35s;
}
.hcm-tile em { grid-column: 1 / 3; font-style: normal; font-size: 10px; font-weight: 700; color: var(--hc-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcm-tile b { align-self: end; font-size: 17px; line-height: 1; font-weight: 800; color: var(--hc-ink); font-variant-numeric: tabular-nums; display: inline-block; transform-origin: left bottom; }
.hcm-tile span { align-self: end; font-size: 9px; font-weight: 600; color: var(--hc-mute); padding-bottom: 1px; white-space: nowrap; }
.hcm.s2 .hcm-tile { animation: hcm-glow 0.9s ease both; }
.hcm.s2 .hcm-tile--2 { animation-delay: 0.12s; }
.hcm.s2 .hcm-tile--3 { animation-delay: 0.24s; }
@keyframes hcm-glow { 0% { background: #fff; } 40% { background: #eef3ff; } 100% { background: #fff; } }
.hcm.s4 .hcm-tile--1 { animation: none; background: var(--hc-blue); box-shadow: 0 6px 14px rgba(0, 63, 236, 0.32); transform: translateY(-2px); }
.hcm.s4 .hcm-tile--1 em, .hcm.s4 .hcm-tile--1 span { color: rgba(255, 255, 255, 0.78); }
.hcm.s4 .hcm-tile--1 b { color: #fff; animation: hc-pop 0.5s ease; }

/* 四步轨道 */
.hcm-steps { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; height: 28px; }
.hcm-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; font-size: 10px; font-weight: 700; color: #8d9bbb; transition: color 0.3s; }
.hcm-step i { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #c3cfe9; transition: background 0.3s, border-color 0.3s; }
.hcm-step::before { content: ""; position: absolute; top: 4px; left: calc(-50% + 5px); right: calc(50% + 5px); height: 2px; border-radius: 2px; background: #cfd9ef; transition: background 0.4s; }
.hcm-step--1::before { display: none; }
.hcm-step span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
/* 已到达：蓝色；当前：实心 + 光晕 */
.hcm.s2 .hcm-step--2::before, .hcm.s3 .hcm-step--3::before, .hcm.s5 .hcm-step--4::before { background: var(--hc-blue); }
.hcm.s1 .hcm-step--1, .hcm.s2 .hcm-step--2, .hcm.s3 .hcm-step--3, .hcm.s5 .hcm-step--4 { color: var(--hc-blue); }
.hcm.s1 .hcm-step--1 i, .hcm.s2 .hcm-step--2 i, .hcm.s3 .hcm-step--3 i, .hcm.s5 .hcm-step--4 i { background: #fff; border-color: var(--hc-blue); }
.hcm.s2 .hcm-step--1 i, .hcm.s3 .hcm-step--2 i, .hcm.s5 .hcm-step--3 i,
.hcm.s3 .hcm-step--1 i, .hcm.s5 .hcm-step--2 i, .hcm.s5 .hcm-step--1 i { background: var(--hc-blue); border-color: var(--hc-blue); }
.hcm.s1:not(.s2) .hcm-step--1 i, .hcm.s2:not(.s3) .hcm-step--2 i, .hcm.s3:not(.s4) .hcm-step--3 i, .hcm.s5 .hcm-step--4 i { animation: hc-pulse 1.4s ease-out infinite; }

/* ==========================================================================
   2. 多智能体：三个 Agent 并行取证，接力还原攻击链
   ========================================================================== */
.hcc { padding: 10px 10px 8px; gap: 6px; }
.hcc-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; }
.hcc-scan { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #9db3e8; transition: background 0.3s; }
.hcc.s1 .hcc-scan { background: var(--hc-blue); animation: hc-pulse 1.4s ease-out infinite; }
.hcc.s5 .hcc-scan { background: var(--hc-green); animation: none; }

.hcc-grid {
  flex: 1 1 auto; min-height: 0; display: grid; padding: 2px 0 0;
  grid-template-columns: 104px 22px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
}
.hcc-agent--1, .hcc-wire--1, .hcc-node--1 { grid-row: 1; }
.hcc-agent--2, .hcc-wire--2, .hcc-node--2 { grid-row: 3; }
.hcc-agent--3, .hcc-wire--3, .hcc-node--3 { grid-row: 5; }
.hcc-agent { grid-column: 1; }
.hcc-wire { grid-column: 2; }
.hcc-node { grid-column: 3; }
.hcc-hop { grid-column: 3; }
.hcc-hop--1 { grid-row: 2; }
.hcc-hop--2 { grid-row: 4; }

.hcc-agent { --c: var(--hc-blue); display: flex; align-items: center; gap: 8px; min-width: 0; opacity: 0.5; transition: opacity 0.4s; }
.hcc-agent--2 { --c: #6b4de6; }
.hcc-agent--3 { --c: #0e8f9c; }
.hcc.s1 .hcc-agent { opacity: 1; }
.hcc-av {
  position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: var(--c); background: #fff; box-shadow: 0 2px 6px rgba(0, 40, 140, 0.14);
}
.hcc-av svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 扫描时头像外圈转动的弧线 */
.hcc-av::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--c); border-right-color: color-mix(in srgb, var(--c) 35%, transparent);
  opacity: 0; transition: opacity 0.3s;
}
.hcc.s1 .hcc-av::after { opacity: 1; animation: hc-spin 1.1s linear infinite; }
.hcc.s2 .hcc-agent--1 .hcc-av::after, .hcc.s3 .hcc-agent--2 .hcc-av::after, .hcc.s4 .hcc-agent--3 .hcc-av::after { opacity: 0; animation: none; }
.hcc-ag-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.hcc-ag-t b { font-size: 11px; font-weight: 700; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.hcc-st { position: relative; display: block; height: 12px; font-style: normal; font-size: 9.5px; font-weight: 600; }
.hcc-st-scan, .hcc-st-found { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; transition: opacity 0.25s; opacity: 0; }
.hcc-st-scan { color: var(--c); }
.hcc-st-scan i { width: 7px; height: 7px; border: 1.5px solid color-mix(in srgb, var(--c) 25%, #fff); border-top-color: var(--c); border-radius: 50%; animation: hc-spin 0.7s linear infinite; }
.hcc-st-found { color: var(--hc-green); }
.hcc.s1 .hcc-st-scan { opacity: 1; }
.hcc.s2 .hcc-agent--1 .hcc-st-scan, .hcc.s3 .hcc-agent--2 .hcc-st-scan, .hcc.s4 .hcc-agent--3 .hcc-st-scan { opacity: 0; }
.hcc.s2 .hcc-agent--1 .hcc-st-found, .hcc.s3 .hcc-agent--2 .hcc-st-found, .hcc.s4 .hcc-agent--3 .hcc-st-found { opacity: 1; }

/* 连线 */
.hcc-wire { --c: var(--hc-blue); position: relative; align-self: center; height: 2px; margin: 0 2px; }
.hcc-wire--2 { --c: #6b4de6; }
.hcc-wire--3 { --c: #0e8f9c; }
.hcc-wire::before { content: ""; position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(90deg, #aebde2 0 3px, transparent 3px 6px); transition: opacity 0.3s; }
.hcc.s1 .hcc-wire::before { opacity: 1; animation: hc-march 0.6s linear infinite; }
.hcc-wire i { position: absolute; top: -2.5px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--c); opacity: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.hcc.s2 .hcc-wire--1::before, .hcc.s3 .hcc-wire--2::before, .hcc.s4 .hcc-wire--3::before { background: var(--c); animation: none; opacity: 1; }
.hcc.s2 .hcc-wire--1 i, .hcc.s3 .hcc-wire--2 i, .hcc.s4 .hcc-wire--3 i { animation: hc-travel 0.6s ease-out both; }

/* 证据节点：骨架 → 实体卡片（左侧严重度色条） */
.hcc-node { position: relative; border-radius: 12px; background: rgba(255, 255, 255, 0.55); border: 1.5px dashed #b9c7e6; overflow: hidden; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.hcc-node::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--hc-red); opacity: 0; transition: opacity 0.3s; }
.hcc-node--1::before { background: #e8573a; }
.hcc-node--2::before { background: #e89a1b; }
.hcc-node--3::before { background: var(--hc-red); }
.hcc-sk { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 12px; transition: opacity 0.25s; }
.hcc-sk i { display: block; height: 6px; width: 60%; border-radius: 4px; background: linear-gradient(90deg, #dbe4f7 25%, #edf2fc 50%, #dbe4f7 75%); background-size: 200% 100%; opacity: 0; }
.hcc-sk i + i { width: 36%; }
.hcc.s1 .hcc-sk i { opacity: 1; animation: hc-shimmer 1.4s linear infinite; }
.hcc-real { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-content: center; align-items: center; padding: 0 10px 0 14px; opacity: 0; transform: translateY(5px); transition: opacity 0.35s, transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1); }
.hcc-idx { display: none; }
.hcc-body { display: contents; }
.hcc-name { grid-column: 1; grid-row: 1; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcc-sev { grid-column: 2; grid-row: 1; padding: 2px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.hcc-ev { grid-column: 1 / 3; grid-row: 2; font-size: 10px; line-height: 1.2; color: #61708f; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.hcc-sev--high { background: #fdeceb; color: var(--hc-red); }
.hcc-sev--mid { background: #fdf1dc; color: var(--hc-amber); }
.hcc-sev--crit { background: var(--hc-red); color: #fff; }
.hcc.s2 .hcc-node--1, .hcc.s3 .hcc-node--2, .hcc.s4 .hcc-node--3 { border: 1.5px solid transparent; background: #fff; box-shadow: 0 4px 12px rgba(0, 40, 140, 0.13); }
.hcc.s2 .hcc-node--1::before, .hcc.s3 .hcc-node--2::before, .hcc.s4 .hcc-node--3::before { opacity: 1; }
.hcc.s2 .hcc-node--1 .hcc-sk, .hcc.s3 .hcc-node--2 .hcc-sk, .hcc.s4 .hcc-node--3 .hcc-sk { opacity: 0; }
.hcc.s2 .hcc-node--1 .hcc-real, .hcc.s3 .hcc-node--2 .hcc-real, .hcc.s4 .hcc-node--3 .hcc-real { opacity: 1; transform: none; }
.hcc.s4 .hcc-node--3 .hcc-sev--crit { animation: hc-pulse-red 1.6s ease-out 0.4s 2; }

/* 节点之间的跳转 */
.hcc-hop { display: flex; align-items: center; gap: 7px; padding-left: 20px; min-width: 0; }
.hcc-hop i { flex: none; width: 2px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #f1b9b3, var(--hc-red)); transform: scaleY(0); transform-origin: top; transition: transform 0.45s ease 0.05s; }
.hcc-hop span { font-size: 9.5px; font-weight: 700; color: var(--hc-red); opacity: 0; transform: translateX(-4px); transition: opacity 0.3s 0.25s, transform 0.3s 0.25s; white-space: nowrap; }
.hcc.s3 .hcc-hop--1 i, .hcc.s4 .hcc-hop--2 i { transform: scaleY(1); }
.hcc.s3 .hcc-hop--1 span, .hcc.s4 .hcc-hop--2 span { opacity: 1; transform: none; }

/* 底部：说明 → 结论胶囊 */
.hcc-foot { position: relative; flex: none; height: 26px; }
.hcc-note, .hcc-done { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; font-size: 10px; white-space: nowrap; }
.hcc-note { justify-content: center; color: #6a7a9b; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s, transform 0.3s; }
.hcc-done { gap: 6px; padding: 0 12px; border-radius: 999px; background: #dff5e8; color: var(--hc-green); font-weight: 800; box-shadow: 0 3px 10px rgba(11, 122, 67, 0.18); transform: translateY(100%); opacity: 0; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2), opacity 0.3s; }
.hcc-done em { margin-left: auto; font-style: normal; padding: 1px 8px; border-radius: 999px; background: #fff; color: var(--hc-green); }
.hcc.s5 .hcc-note { opacity: 0; transform: translateY(-100%); }
.hcc.s5 .hcc-done { transform: none; opacity: 1; }

/* ==========================================================================
   3. 连接编排：数据源逐个接入 → 统一接入层 → 资产 / 风险 / 告警
   ========================================================================== */
.hco { padding: 10px 0 8px; }
.hco-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 18px; padding: 0 10px; margin-bottom: 8px; }
.hco-label { flex: 1 1 auto; font-size: 12px; font-weight: 700; }
.hco-badge { display: inline-flex; align-items: baseline; gap: 5px; }
.hco-badge b { font-size: 11px; font-variant-numeric: tabular-nums; display: inline-block; }
.hco-badge i { font-style: normal; opacity: 0.55; margin-left: -3px; }

/* 三个来源：圆形图标 + 名称 */
.hco-srcs { flex: none; display: grid; grid-template-columns: repeat(3, 84px); justify-content: space-between; padding: 0 0; }
.hco-src { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 60px; min-width: 0; --c: var(--hc-blue); }
.hco-src--2 { --c: #6b4de6; }
.hco-src--3 { --c: #0e8f9c; }
.hco-orb {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.6); color: #a3b0cf; border: 1.5px dashed #b9c7e6; transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.hco-orb > svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hco-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--c); border-right-color: color-mix(in srgb, var(--c) 30%, transparent); opacity: 0; transition: opacity 0.3s; }
.hco-tick { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #12a150; color: #fff; border: 2px solid #eaf0fd; transform: scale(0); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.5); }
.hco-tick svg { width: 8px; height: 8px; stroke-width: 3; }
.hco-name { max-width: 100%; font-size: 11px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #7d8bab; transition: color 0.3s; }
.hco-st-wait { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1.15; color: var(--c); background: transparent; opacity: 0; transition: opacity 0.25s; white-space: nowrap; overflow: hidden; }
.hco-st-wait > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 第 N 个源：sN 连接中（名称让位给“连接中”），s(N+1) 在线 */
.hco.s1 .hco-src--1 .hco-orb, .hco.s2 .hco-src--2 .hco-orb, .hco.s3 .hco-src--3 .hco-orb { border-color: var(--c); color: var(--c); background: #fff; }
.hco.s1 .hco-src--1 .hco-ring, .hco.s2 .hco-src--2 .hco-ring, .hco.s3 .hco-src--3 .hco-ring { opacity: 1; animation: hc-spin 0.9s linear infinite; }
.hco.s1 .hco-src--1 .hco-name, .hco.s2 .hco-src--2 .hco-name, .hco.s3 .hco-src--3 .hco-name { opacity: 0; }
.hco.s1 .hco-src--1 .hco-st-wait, .hco.s2 .hco-src--2 .hco-st-wait, .hco.s3 .hco-src--3 .hco-st-wait { opacity: 1; }
.hco.s2 .hco-src--1 .hco-st-wait, .hco.s3 .hco-src--2 .hco-st-wait, .hco.s4 .hco-src--3 .hco-st-wait { opacity: 0; }
.hco.s2 .hco-src--1 .hco-orb, .hco.s3 .hco-src--2 .hco-orb, .hco.s4 .hco-src--3 .hco-orb { border: 1.5px solid transparent; background: #fff; color: var(--c); box-shadow: 0 4px 12px rgba(0, 40, 140, 0.16); }
.hco.s2 .hco-src--1 .hco-ring, .hco.s3 .hco-src--2 .hco-ring, .hco.s4 .hco-src--3 .hco-ring { opacity: 0; animation: none; }
.hco.s2 .hco-src--1 .hco-name, .hco.s3 .hco-src--2 .hco-name, .hco.s4 .hco-src--3 .hco-name { opacity: 1; color: var(--hc-ink); }
.hco.s2 .hco-src--1 .hco-tick, .hco.s3 .hco-src--2 .hco-tick, .hco.s4 .hco-src--3 .hco-tick { transform: scale(1); }

/* 连线与数据包 */
.hco-zone { position: relative; flex: none; width: 274px; }
.hco-zone--in { height: 40px; }
.hco-zone--out { height: 34px; }
.hco-zone svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hco-w { fill: none; stroke: #b9c7e6; stroke-width: 1.6; stroke-dasharray: 3 4; transition: stroke 0.4s; }
.hco.s2 .hco-w1, .hco.s3 .hco-w2, .hco.s4 .hco-w3 { stroke: #6f93f5; stroke-dasharray: none; stroke-width: 2; }
.hco.s6 .hco-w4, .hco.s6 .hco-w5, .hco.s6 .hco-w6 { stroke: #6f93f5; stroke-dasharray: none; stroke-width: 2; }
.hco-pk { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; opacity: 0; offset-rotate: 0deg; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); }
.hco-pk--in1 { offset-path: path("M42 0 C42 24 62 16 62 40"); background: #003fec; }
.hco-pk--in2 { offset-path: path("M137 0 V40"); background: #6b4de6; }
.hco-pk--in3 { offset-path: path("M232 0 C232 24 212 16 212 40"); background: #0e8f9c; }
.hco-pk--out1 { offset-path: path("M62 0 C62 20 42 14 42 34"); background: #003fec; }
.hco-pk--out2 { offset-path: path("M137 0 V34"); background: #a2650a; }
.hco-pk--out3 { offset-path: path("M212 0 C212 20 232 14 232 34"); background: #c2372a; }
.hco.s5 .hco-pk--in1, .hco.s5 .hco-pk--in2, .hco.s5 .hco-pk--in3 { animation: hc-run 1.1s ease-in-out infinite; }
.hco.s5 .hco-pk--in2 { animation-delay: 0.35s; }
.hco.s5 .hco-pk--in3 { animation-delay: 0.7s; }
.hco.s6 .hco-pk--out1, .hco.s6 .hco-pk--out2, .hco.s6 .hco-pk--out3 { animation: hc-run 1s ease-in-out infinite; }
.hco.s6 .hco-pk--out2 { animation-delay: 0.3s; }
.hco.s6 .hco-pk--out3 { animation-delay: 0.6s; }

/* 统一接入层：一枚发光的胶囊 */
.hco-hub {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 30px; margin: 0 22px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: #8393b8;
  white-space: nowrap; font-size: 11.5px; font-weight: 800; transition: background 0.4s, color 0.4s, box-shadow 0.4s;
}
.hco-hub-ic { flex: none; display: grid; place-items: center; width: 18px; height: 18px; }
.hco-hub-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hco-hub-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hco-hub-tag { flex: 0 100 auto; min-width: 0; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); font-size: 9.5px; font-weight: 700; max-width: 0; padding-inline: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: max-width 0.4s, opacity 0.4s, padding 0.4s; }
.hco.s4 .hco-hub { background: #a9bff5; color: #fff; }
.hco.s5 .hco-hub { background: linear-gradient(90deg, #0a49f2, #2e6bff); color: #fff; box-shadow: 0 6px 16px rgba(0, 63, 236, 0.28); animation: hc-hub 1.4s ease-out infinite; }
.hco.s5 .hco-hub-tag { max-width: 110px; padding-inline: 8px; opacity: 1; }

/* 产出：三个大号数字 */
.hco-outs { flex: none; display: grid; grid-template-columns: repeat(3, 84px); justify-content: space-between; margin-top: auto; }
.hco-out {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 42px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.7); color: var(--hc-mute); font-size: 10px; font-weight: 700;
  transition: background 0.4s, box-shadow 0.4s;
}
.hco-out-n { font-size: 20px; line-height: 1; font-weight: 800; color: #a9b5d0; font-variant-numeric: tabular-nums; transition: color 0.4s; }
.hco.s6 .hco-out { background: #fff; box-shadow: 0 4px 12px rgba(0, 40, 140, 0.13); }
.hco.s6 .hco-out--asset .hco-out-n { color: var(--hc-blue); }
.hco.s6 .hco-out--risk .hco-out-n { color: var(--hc-amber); }
.hco.s6 .hco-out--alert .hco-out-n { color: var(--hc-red); }
.hco-out.is-pop .hco-out-n { animation: hc-pop 0.4s ease; }
.hco-badge.is-pop b { animation: hc-pop 0.4s ease; }

/* 减少动态效果：只保留最终画面（JS 也会直接跳到最终状态） */
@media (prefers-reduced-motion: reduce) {
  .hc *, .hc *::before, .hc *::after { animation: none !important; transition: none !important; }
}

/* 一轮结束回到起点时瞬间复位，避免新旧文字叠影 */
.hc-stage.is-reset, .hc-stage.is-reset * { transition: none !important; animation: none !important; }

/* 窄屏：Agent 列收窄，把空间让给节点卡 */
@media (max-width: 480px) {
  .hcc-grid { grid-template-columns: 84px 12px minmax(0, 1fr); }
  .hcc-agent { gap: 6px; }
}

.hco-badge { max-width: 62%; }

/* 离开视口后暂停区块内所有持续动画（首屏卡片 / 意图驱动），避免后台空转占主线程 */
.page-screen--hero.is-perf-paused *,
.page-screen--hero.is-perf-paused *::before,
.page-screen--hero.is-perf-paused *::after,
.rd.is-perf-paused *,
.rd.is-perf-paused *::before,
.rd.is-perf-paused *::after {
  animation-play-state: paused !important;
}