/*
 * motion.css — 博剪AI 交互动效层（低强度）
 *
 * 选型（≤3 型）：①状态过渡（stage 进入）· ②操作结束反馈（按压缩放回弹）· ⑥输入实时响应（聚焦高亮）
 * 铁约束：单动效 ≤300ms、无循环无装饰；prefers-reduced-motion 下动画与位移全关（颜色反馈保留）。
 * 令牌一律取自 tokens.css（本文件禁出现色值/字号字面量）；挂载点=工作台与首页 index.html，其他页面采用需另卡。
 */

/* ── ① 状态过渡：stage / 加工板进入（fade + 8px 上移，220ms ease-out）
 *    出向直切：.hidden 为 display:none，不做 JS 钩子（克制）；display 翻转时动画自动重播 */
@keyframes motion-stage-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2, 8px));
  }
}

.stage:not(.hidden),
.process-board:not(.hidden) {
  animation: motion-stage-in var(--motion-normal, 220ms) var(--motion-ease-out, ease-out);
}

/* ── ② 操作结束反馈：按压缩放 0.96（下压 120ms 动画，按住保持），松开走弹性回弹（总 ≤300ms）
 *    下压用 animation（不与页面既有 transition 规则冲突，全按钮覆盖）；
 *    回弹用 :where() 零特异性 transition——被既有规则占据的按钮瞬时回位（不影响其 hover 过渡）；
 *    .cta 保留页面既有按压习惯（hover 抬升/active 复位）显式排除 */
@keyframes motion-press {
  from {
    transform: scale(1);
  }
}

:where(button:not(.cta):not(:disabled)) {
  transition: transform var(--transition-spring);
}

:where(button:not(.cta):not(:disabled):active) {
  animation: motion-press 120ms var(--motion-ease-out, ease-out) forwards;
  transform: scale(var(--motion-press-scale, 0.96));
}

/* ── ⑥ 输入实时响应：文本类控件聚焦统一珊瑚描边+光晕（180ms）；
 *    checkbox/radio/file 保留系统焦点；类作用域旧 focus 规则自然优先 */
:where(input:not([type='checkbox']):not([type='radio']):not([type='file']):not(:disabled),
       select:not(:disabled),
       textarea:not(:disabled)):focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
  transition: border-color var(--motion-fast, 180ms) var(--motion-ease-out, ease-out),
              box-shadow var(--motion-fast, 180ms) var(--motion-ease-out, ease-out);
}

/* ── 铁约束②：系统「减弱动态效果」→ 本层动画与位移全关（聚焦颜色反馈保留，非运动） ── */
@media (prefers-reduced-motion: reduce) {
  .stage:not(.hidden),
  .process-board:not(.hidden) {
    animation: none;
  }

  :where(button:not(.cta):not(:disabled):active) {
    animation: none;
    transform: none;
  }
}