/* ============================================================
   routes-anim.css · "为什么需要 attention" 三路线动画 v2
   网络结构级展示：RNN 展开图 / 全连接层 / Attention 计算图
   配合 routes-anim.js 使用。
   ============================================================ */

.routes-anim {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 1rem 1.2rem 0.8rem;
  margin: 1.4rem 0;
  font-family: var(--sans);
}

.routes-anim .ra-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.7rem;
}

.routes-anim button {
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.routes-anim button.secondary { background: #fff; color: var(--accent); }
.routes-anim button:disabled { opacity: 0.4; cursor: default; }
.routes-anim .ra-status { margin-left: auto; font-size: 0.8rem; color: var(--ink-soft); }

.ra-scene { width: 100%; height: auto; display: block; }
.ra-scene text { font-family: var(--sans); }

/* 分幕显现 */
.ra-act { opacity: 0; transition: opacity 0.5s; }
.ra-act.on { opacity: 1; }

/* 节点闪烁 */
.ra-glow { animation: ra-nodeglow 0.6s ease; }
@keyframes ra-nodeglow {
  0% { stroke-width: 1; }
  50% { stroke-width: 3.5; }
  100% { stroke-width: 1; }
}

/* 自环/流动虚线 */
.ra-flow { stroke-dasharray: 4 3; animation: ra-dash 1.1s linear infinite; }
@keyframes ra-dash { to { stroke-dashoffset: -14; } }

/* 链路强调脉动 */
.ra-chain-hot { animation: ra-chainhot 1.3s ease infinite; }
@keyframes ra-chainhot {
  0%, 100% { stroke: #4d6ef5; stroke-width: 2; }
  50% { stroke: var(--accent-warm); stroke-width: 3; }
}

/* 线条绘制动画（dashoffset 由 JS 设定） */
.ra-draw { transition: stroke-dashoffset 0.55s ease, opacity 0.5s; }

.ra-caption {
  margin-top: 0.7rem;
  min-height: 2.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.ra-caption strong { color: var(--accent-warm); }

@media print {
  .routes-anim button { display: none; }
  .ra-caption { min-height: 0; }
}