/* ===== 动效 =====
   全站一套时长（tokens.css 里的 --dur-fast/base/slow）和一条缓动曲线（--ease）。
   只动画 transform / opacity，避免布局抖动，也避免和文字渲染抢时间。 */

/* 内容进场：整块上浮 6px 淡入，不做逐字模糊，读起来不晃眼 */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* 轻提示、新出现的行：位移更小 */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* 状态切换（选中 / 收藏）的小回弹，幅度控制在一眼看不出的程度 */
@keyframes pop-in {
  0%   { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* 复制成功的小对勾 */
@keyframes check-pop {
  0%   { opacity: 0; transform: translateY(1px) scale(0.6); }
  60%  { opacity: 1; transform: translateY(1px) scale(1.08); }
  100% { opacity: 1; transform: translateY(1px) scale(1); }
}

/* 页面主体：一级块依次进场，错峰 40ms，最多三层 */
.view > * {
  animation: rise-in var(--dur-slow) var(--ease) both;
}
.view > *:nth-child(2) { animation-delay: var(--enter-step); }
.view > *:nth-child(3) { animation-delay: calc(var(--enter-step) * 2); }
.view > *:nth-child(n + 4) { animation-delay: calc(var(--enter-step) * 2); }

/* 标题：整块淡入，不逐字拆节点（逐字动画会让标题比正文慢半拍） */
.reveal-block {
  animation: fade-in var(--dur-slow) var(--ease) both;
}
/* 保留逐字渐显能力，但默认只给极短的标题用；位移和时长与整块一致 */
.reveal-char {
  display: inline-block;
  opacity: 0;
  animation: fade-in var(--dur-slow) var(--ease) both;
  animation-delay: calc(var(--i, 0) * var(--stagger, 16ms));
}

/* 后台任务新出现的步骤：轻一点，不打断阅读 */
.tl-line-enter {
  animation: fade-in var(--dur-base) var(--ease) both;
}
.tl-stream.stream-enter {
  animation: fade-in var(--dur-base) var(--ease) both;
}

/* 状态切换的弹性动效 */
.chip.active,
.option-item.weak {
  animation: pop-in var(--dur-spring) var(--ease);
}

/* 展开 / 收起按钮：和全站一致的吸附手感 */
.fold-btn {
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.fold-btn:active { transform: translateY(1px); }

/* 减少动态：直接显示，保留状态变化 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-char, .reveal-block, .tl-line-enter, .tl-stream.stream-enter, .view > * {
    opacity: 1;
    filter: none;
    transform: none;
  }
}