@layer legacy {
/* 四秒循环传导：来源汇入、AI 扫描、档案确认和链上存证。 */
main:has(.home-intro-hero) { padding-bottom: 14px; }
.asset-introduction { --motion-cycle: 4s; }
.flow-lines { display: block; overflow: hidden; clip-path: inset(0); }
.source-convergence { height: 20px; width: 66.666%; margin: 0 auto; }
.flow-lines path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.flow-base { stroke: var(--line); stroke-width: 1.5; }
.flow-energy {
  stroke: var(--accent); stroke-width: 3; stroke-dasharray: 18 110;
  opacity: 0; animation: source-travel var(--motion-cycle) linear infinite;
}
.source-energy { animation-name: source-travel; }
/* 文件扫描、三个鉴别维度响应、完成回执组成同一过程，随后向档案输出。 */
.asset-assessment { position: relative; overflow: hidden; isolation: isolate; gap: 9px; }
.assessment-symbol { width: 40px; height: 40px; align-items: center; justify-content: center; }
.assessment-analyzer { width: 40px; height: 40px; overflow: hidden; }
.analyzer-frame, .analyzer-file { fill: none; stroke: var(--on-accent); stroke-linecap: round; stroke-linejoin: round; }
.analyzer-frame { stroke-width: 1.3; opacity: .55; }
.analyzer-file { stroke-width: 1.2; opacity: .8; }
.analyzer-scan { fill: var(--on-accent); opacity: 0; animation: analyzer-scan var(--motion-cycle) linear infinite; }
.analyzer-node { fill: var(--on-accent); opacity: .2; animation: analyzer-node var(--motion-cycle) linear infinite; }
.node-second { animation-delay: .12s; }
.node-third { animation-delay: .24s; }
.assessment-copy { flex: 1; }
.assessment-feedback { width: 24px; height: 24px; flex-shrink: 0; }
.assessment-feedback svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.analysis-bars { animation: analysis-bars var(--motion-cycle) linear infinite; }
.analysis-bars path { fill: none; stroke: var(--on-accent); stroke-width: 2; stroke-linecap: round; }
.analysis-done { fill: color-mix(in srgb, var(--on-accent) 13%, transparent); stroke: color-mix(in srgb, var(--on-accent) 50%, transparent); opacity: 0; animation: analysis-done var(--motion-cycle) linear infinite; }
.analysis-check {
  fill: none; stroke: var(--on-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  animation: analysis-check var(--motion-cycle) linear infinite;
}
.assessment-progress {
  position: absolute; bottom: 0; left: 14px; right: 14px; height: 2px;
  border-radius: 2px; background: color-mix(in srgb, var(--accent-hover) 56%, transparent); transform-origin: left;
  transform: scaleX(0); animation: analysis-progress var(--motion-cycle) linear infinite;
}
/* 区块独立持续产生；每四秒的数据写入最新区块，着色随区块保留直到离场。 */
.onchain-sequence { position: relative; height: 64px; padding: 24px 2px 0; }
.onchain-caption { position: absolute; top: 4px; left: 2px; max-width: calc(50% - 12px); }
.onchain-caption strong {
  display: block; font-size: 10px; line-height: 1.3; font-weight: 600; color: var(--accent-dark);
}
.onchain-caption span {
  display: block; font-size: 9px; line-height: 1.4; color: var(--muted); text-align: left;
}
.onchain-track { position: relative; width: 100%; height: 40px; overflow: hidden; }
.onchain-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 23px; height: 1px;
  background: var(--line);
}
.chain-block {
  position: absolute; top: 12px; left: calc(100% - 24px); z-index: 1;
  width: 24px; height: 24px; border: 1px solid var(--accent-soft); border-radius: 5px;
  background: var(--diagram-surface); color: var(--accent); display: flex; align-items: center; justify-content: center;
  animation: block-drift 8s linear infinite;
  animation-delay: var(--block-delay);
}
.data-block { animation-name: block-drift, block-record; }
.data-block .icon { opacity: 0; animation: block-check 8s linear infinite; animation-delay: var(--block-delay); }
/* 折线从档案底部出发，绕到右侧最新区块的顶部，信号沿完整线路传导。 */
.assessment-record-link { width: 20px; height: 10px; margin: 0 auto; }
.record-energy { animation-name: record-travel; }
.onchain-upload-route {
  position: absolute; top: 0; left: 50%; width: calc(50% - 14px); height: 36px;
  pointer-events: none;
}
.upload-energy { animation-name: upload-travel; }
.passport-seal { animation: asset-confirm var(--motion-cycle) ease-in-out infinite; }
.passport-evidence > span { animation: evidence-light var(--motion-cycle) ease-in-out infinite; }
.passport-evidence > span:nth-child(2) { animation-delay: .1s; }
.passport-evidence > span:nth-child(3) { animation-delay: .2s; }
.asset-outcomes { margin-top: 10px; }
.asset-outcomes > div { animation: outcome-light var(--motion-cycle) ease-in-out infinite; }
.asset-outcomes > div:nth-child(2) { animation-delay: .12s; }
/* 信号进入线路前、离开线路后均完全隐去，避免停留在端点露出半截。 */
@keyframes source-travel {
  0% { stroke-dashoffset: 120; opacity: 0; }
  3% { opacity: 1; }
  22% { stroke-dashoffset: -20; opacity: 1; }
  25%, 100% { stroke-dashoffset: -20; opacity: 0; }
}
/* 来源信号到达后扫描文件，三个节点依次确认，完成回执与输出传导衔接。 */
@keyframes analyzer-scan {
  0%, 18% { transform: translateY(0); opacity: 0; }
  20% { transform: translateY(0); opacity: .85; }
  29% { transform: translateY(14px); opacity: .85; }
  31%, 100% { transform: translateY(14px); opacity: 0; }
}
@keyframes analyzer-node {
  0%, 26%, 47%, 100% { opacity: .2; }
  29%, 42% { opacity: 1; }
}
@keyframes analysis-bars {
  0%, 18%, 48%, 100% { opacity: .25; transform: scaleY(.55); transform-origin: center; }
  23%, 29% { opacity: .9; transform: scaleY(1); transform-origin: center; }
  34%, 44% { opacity: 0; transform: scaleY(.55); transform-origin: center; }
}
@keyframes analysis-done {
  0%, 32%, 48%, 100% { opacity: 0; }
  35%, 44% { opacity: 1; }
}
@keyframes analysis-check {
  0%, 32% { stroke-dashoffset: 1; opacity: 0; }
  35% { opacity: 1; }
  39%, 44% { stroke-dashoffset: 0; opacity: 1; }
  48%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes analysis-progress {
  0%, 18% { transform: scaleX(0); opacity: 0; }
  20% { opacity: .7; }
  35%, 42% { transform: scaleX(1); opacity: .7; }
  48%, 100% { transform: scaleX(1); opacity: 0; }
}
/* 新区块先在右端显现，数据写入后沿整条链向左移动，在离场前完整淡出。 */
@keyframes block-drift {
  0%, 3% { left: calc(100% - 24px); opacity: 0; transform: scale(.75); }
  4%, 8% { left: calc(100% - 24px); opacity: 1; transform: scale(1); }
  86% { opacity: 1; }
  94%, 100% { left: -24px; opacity: 0; transform: scale(1); }
}
@keyframes block-record {
  0%, 6% { background: var(--diagram-surface); border-color: var(--accent-soft); }
  7%, 100% { background: var(--accent-fill); border-color: var(--accent); }
}
@keyframes block-check {
  0%, 6% { opacity: 0; }
  7%, 100% { opacity: 1; }
}
@keyframes record-travel {
  0%, 38% { stroke-dashoffset: 120; opacity: 0; }
  40% { opacity: 1; }
  48% { stroke-dashoffset: -20; opacity: 1; }
  50%, 100% { stroke-dashoffset: -20; opacity: 0; }
}
@keyframes upload-travel {
  0%, 48% { stroke-dashoffset: 120; opacity: 0; }
  51% { opacity: 1; }
  64% { stroke-dashoffset: -20; opacity: 1; }
  66%, 100% { stroke-dashoffset: -20; opacity: 0; }
}
@keyframes asset-confirm {
  0%, 36%, 59%, 100% { background: transparent; color: var(--accent); box-shadow: 0 0 0 0 transparent; }
  51%, 56% { background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 0 0 4px var(--selected-surface); }
}
@keyframes evidence-light {
  0%, 36%, 60%, 100% { background: var(--soft-surface); }
  51%, 56% { background: var(--selected-surface); }
}
@keyframes outcome-light {
  0%, 85%, 100% { background: var(--soft-surface); box-shadow: inset 0 0 0 1px transparent; }
  90%, 96% { background: var(--selected-surface); box-shadow: inset 0 0 0 1px var(--accent-soft); }
}

}