/* ============================================================================
   ui-motion.css — 交互与动效层 v1
   ----------------------------------------------------------------------------
   只做三件低风险的事，不碰布局、不碰 transform（页面自己在用 transform 做定位）：
     ① 可点元素统一过渡时长与缓动
     ② 按下反馈用 filter 明度，不用 scale
     ③ 键盘焦点环统一（无障碍净增益）

   放在 ui-tokens.css / ui-alias.css 之后。全部元素级选择器（特异性 0,0,1），
   页面自己的类选择器依然优先——冲突时永远是页面赢，不会反过来。
   ========================================================================== */

/* ── ① 可点元素统一过渡 ─────────────────────────────────────────────────── */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[role="button"],
.btn {
  transition:
    background-color 150ms ease,
    border-color     150ms ease,
    box-shadow       150ms ease,
    color            150ms ease,
    filter           150ms ease;
}

a {
  transition: color 150ms ease, opacity 150ms ease, border-color 150ms ease;
}

input,
textarea,
select {
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

/* ── ② 按下反馈：明度 -5%，不做缩放 ─────────────────────────────────────── */
button:active:not(:disabled):not([disabled]),
.btn:active:not(:disabled):not([disabled]),
[role="button"]:active:not([aria-disabled="true"]) {
  filter: brightness(.95);
}

/* ── ③ 键盘焦点环：只在键盘操作时出现，鼠标点击不闪 ──────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ── ④ 加载/禁用：统一指针与透明度 ──────────────────────────────────────── */
button:disabled,
button[disabled],
.btn[disabled] {
  cursor: not-allowed;
}

/* ── ⑤ 选中文字统一品牌色 ───────────────────────────────────────────────── */
::selection {
  background: var(--ui-primary-light);
  color: var(--ui-ink-1);
}

/* ── ⑥ 页面滚动条（只作用于根滚动条，不动页内滚动容器） ─────────────────── */
html::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb {
  background: rgba(29, 33, 41, .18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover {
  background: rgba(29, 33, 41, .30);
  background-clip: padding-box;
}

/* ── ⑦ 可选动效工具类（页面里加 class 才生效，不会自己乱跑） ─────────────── */
.ui-fade-in  { animation: uiFadeIn  200ms var(--ui-e-out) both; }
.ui-fade-up  { animation: uiFadeUp  250ms var(--ui-e-out) both; }
.ui-pop-in   { animation: uiPopIn   200ms var(--ui-e-out) both; }

@keyframes uiFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes uiFadeUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes uiPopIn  { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } }

/* 列表依次进场：给容器加 .ui-stagger，子元素按 50ms 递进 */
.ui-stagger > * { animation: uiFadeUp 200ms var(--ui-e-out) both; }
.ui-stagger > *:nth-child(1) { animation-delay: 0ms }
.ui-stagger > *:nth-child(2) { animation-delay: 50ms }
.ui-stagger > *:nth-child(3) { animation-delay: 100ms }
.ui-stagger > *:nth-child(4) { animation-delay: 150ms }
.ui-stagger > *:nth-child(5) { animation-delay: 200ms }
.ui-stagger > *:nth-child(6) { animation-delay: 250ms }
.ui-stagger > *:nth-child(n+7) { animation-delay: 300ms }

/* ── ⑧ 尊重系统设置：用户关了动画就全关 ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  button,
  .btn,
  [role="button"],
  a,
  input,
  textarea,
  select,
  .ui-fade-in,
  .ui-fade-up,
  .ui-pop-in,
  .ui-stagger > * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
  button:active,
  .btn:active,
  [role="button"]:active {
    filter: none;
  }
}