/* anim.css — 过程动画页（anim layout）样式
 * 由 data.js 的 anim 模板 + renderAnimStage 渲染器使用
 * 数组槽位可视化 + 分步动画（fragment 机制驱动）
 */

.anim-slide .anim-subtitle {
  color: var(--text-2, #8b8da6);
  font-size: 17px;
  margin: -6px 0 18px;
  line-height: 1.5;
}

.anim-stage { margin: 6px 0 10px; }

.anim-meta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 15px;
  color: var(--text-2, #8b8da6);
  font-family: var(--mono, ui-monospace, monospace);
}
.anim-meta b {
  color: var(--accent, #7c6ff5);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.anim-action {
  margin-left: auto;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  background: color-mix(in srgb, var(--accent, #7c6ff5) 18%, transparent);
  color: var(--accent, #7c6ff5);
}
.anim-action-add { background: color-mix(in srgb, var(--good, #1aaf6c) 18%, transparent); color: var(--good, #1aaf6c); }
.anim-action-grow { background: color-mix(in srgb, var(--warn, #f5a524) 20%, transparent); color: var(--warn, #f5a524); }
.anim-action-remove { background: color-mix(in srgb, var(--bad, #e0445a) 18%, transparent); color: var(--bad, #e0445a); }
.anim-action-init { background: color-mix(in srgb, var(--text-2, #8b8da6) 20%, transparent); color: var(--text-2, #8b8da6); }

.anim-array-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--text-2, #8b8da6);
  margin-bottom: 8px;
  letter-spacing: .03em;
}

.anim-slots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.anim-slot {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: 2px solid color-mix(in srgb, var(--text-2, #8b8da6) 32%, transparent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--text-2, #8b8da6) 6%, transparent);
  transition: border-color .3s, background .3s;
}
.anim-slot.is-filled {
  border-color: var(--accent, #7c6ff5);
  background: color-mix(in srgb, var(--accent, #7c6ff5) 15%, transparent);
}
.anim-slot.is-empty {
  border-style: dashed;
  opacity: .45;
}
.anim-slot .anim-val {
  font-weight: 700;
  font-size: 18px;
  color: var(--text, #f5f5fa);
  font-family: var(--mono, ui-monospace, monospace);
}
.anim-slot.is-more {
  width: auto;
  min-width: 44px;
  border-style: dashed;
  font-size: 13px;
  color: var(--text-2, #8b8da6);
  opacity: .7;
}

/* 本步新增的填充元素：滑入 + 高亮 */
.anim-slot.is-new {
  animation: anim-slot-in .55s cubic-bezier(.22, 1.3, .36, 1) both;
  border-color: var(--good, #1aaf6c);
  background: color-mix(in srgb, var(--good, #1aaf6c) 22%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good, #1aaf6c) 28%, transparent);
}
/* 扩容新增的空槽位：弹出 */
.anim-slot.is-new-slot {
  animation: anim-slot-pop .5s var(--anim-ease, cubic-bezier(.4,0,.2,1)) both;
  border-color: var(--warn, #f5a524);
}
@keyframes anim-slot-in {
  0% { opacity: 0; transform: translateY(-30px) scale(.4); }
  60% { transform: translateY(4px) scale(1.1); }
  100% { opacity: 1; transform: none; }
}
@keyframes anim-slot-pop {
  0% { opacity: 0; transform: scale(.3); }
  100% { opacity: .45; transform: scale(1); }
}

/* 扩容时整个数组脉冲 */
.anim-array.is-growing {
  animation: anim-grow-pulse .6s ease-out;
  border-radius: 12px;
}
@keyframes anim-grow-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn, #f5a524) 45%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

.anim-note {
  margin-top: 14px;
  padding: 9px 14px;
  border-left: 3px solid var(--accent, #7c6ff5);
  background: color-mix(in srgb, var(--accent, #7c6ff5) 8%, transparent);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: var(--text-2, #b9bcd0);
  line-height: 1.55;
}

.anim-caption {
  margin-top: 14px;
  padding: 13px 18px;
  background: color-mix(in srgb, var(--text-2, #8b8da6) 10%, transparent);
  border-radius: 12px;
  min-height: 28px;
}
.anim-caption-code {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent, #7c6ff5);
  margin-bottom: 3px;
}
.anim-caption-code:empty { margin-bottom: 0; }
.anim-caption-desc {
  font-size: 14px;
  color: var(--text-2, #b9bcd0);
  line-height: 1.6;
}

.anim-progress {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-2, #8b8da6);
  font-family: var(--mono, ui-monospace, monospace);
}
.anim-progress-bar {
  flex: 1;
  height: 4px;
  background: color-mix(in srgb, var(--text-2, #8b8da6) 20%, transparent);
  border-radius: 2px;
  overflow: hidden;
}
.anim-progress-bar > span {
  display: block;
  height: 100%;
  background: var(--accent, #7c6ff5);
  border-radius: 2px;
  transition: width .35s var(--anim-ease, cubic-bezier(.4,0,.2,1));
}

/* 移动端适配 */
@media (max-width: 900px) {
  .anim-slot { width: 44px; height: 44px; border-radius: 8px; }
  .anim-slot .anim-val { font-size: 15px; }
  .anim-meta { gap: 14px; font-size: 13px; }
  .anim-action { font-size: 11px; padding: 3px 10px; }
}
@media (max-width: 640px) {
  .anim-slot { width: 38px; height: 38px; }
  .anim-slot .anim-val { font-size: 13px; }
  .anim-slots { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .anim-slot.is-new, .anim-slot.is-new-slot, .anim-array.is-growing { animation: none !important; }
}

/* ========================================================================
 * 通用分步动画（fragment 机制）—— 适用于 flow/steps/timeline/arch/grid/vs/twoColumn
 * 元素标记 data-fragment="N"，引擎按"下一步"推进，序号 <= 已推进数量的元素显示
 * ====================================================================== */

/* 默认隐藏：占位但不可见，避免布局跳动 */
[data-fragment] {
  opacity: 0;
  transform: translateY(22px) scale(.94);
  transition: opacity .5s var(--anim-ease, cubic-bezier(.4,0,.2,1)),
              transform .55s cubic-bezier(.22, 1.2, .36, 1);
  pointer-events: none;
  filter: blur(2px);
}

/* 分步激活：滑入 + 聚焦 */
[data-fragment].frag-in {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  filter: none;
}

/* 列表项 / 卡片略带错峰，但同序号同时出现 */
.concept-card[data-fragment].frag-in,
.step[data-fragment].frag-in,
.tier[data-fragment].frag-in,
.item[data-fragment].frag-in,
.node[data-fragment].frag-in {
  animation: frag-pop .5s cubic-bezier(.22, 1.3, .36, 1) both;
}
@keyframes frag-pop {
  0% { opacity: 0; transform: translateY(22px) scale(.92); filter: blur(2px); }
  60% { transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* 对比页左右栏：分别从两侧滑入 */
.vs .side[data-fragment="1"].frag-in { animation: frag-from-left .55s var(--anim-ease, ease) both; }
.vs .side[data-fragment="2"].frag-in { animation: frag-from-right .55s var(--anim-ease, ease) both; }
.vs .mid[data-fragment].frag-in { animation: frag-zoom .5s cubic-bezier(.22,1.4,.36,1) both; }
@keyframes frag-from-left { from { opacity:0; transform: translateX(-50px); } to { opacity:1; transform:none; } }
@keyframes frag-from-right { from { opacity:0; transform: translateX(50px); } to { opacity:1; transform:none; } }
@keyframes frag-zoom { from { opacity:0; transform: scale(.3); } to { opacity:1; transform:none; } }

/* twoColumn 双栏同理 */
.grid.g2 .card[data-fragment="1"].frag-in { animation: frag-from-left .55s var(--anim-ease, ease) both; }
.grid.g2 .card[data-fragment="2"].frag-in { animation: frag-from-right .55s var(--anim-ease, ease) both; }

/* 流程箭头：跟随节点淡入拉伸 */
.flow .arr[data-fragment].frag-in { animation: frag-arr .4s ease both; }
@keyframes frag-arr { from { opacity:0; transform: scaleX(.2); } to { opacity:.8; transform:none; } }

/* 无分步页（无 data-fragment）不受影响；滚动模式仍由 base.css 兜底 */

@media (prefers-reduced-motion: reduce) {
  [data-fragment], [data-fragment].frag-in { animation: none !important; transition: opacity .2s !important; transform: none !important; filter: none !important; }
}