/* theme-v2.css — D 轮视觉层 (纯新增, 不覆盖 common.css 既有规则)
 * 动效 token / 入场动效 / 骨架屏 / 等宽数字 / 深色工作台 token 与组件 / 按压反馈 / 图标基样式
 * 依赖 common.css 的 --c-* token (accent / radius / shadow / font-mono)
 */

:root {
  /* ===== 动效 token ===== */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ===== 深色工作台 token (D2 用) ===== */
  --dk-bg: #0a0f1a;
  --dk-surface: #111827;
  --dk-surface2: #1a2332;
  --dk-border: rgba(255, 255, 255, .07);
  --dk-text: #e5e7eb;
  --dk-text2: #9ca3af;
  --dk-glass: rgba(17, 24, 39, .72);
}

/* ===== 入场动效 ===== */
@keyframes sq-motion-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.motion-in {
  animation: sq-motion-in var(--dur-3) var(--ease-out) both;
}
/* stagger 容器子元素初始隐藏, 由 motion.js 依序加 .motion-in 触发 */
[data-stagger] > * { opacity: 0; }
[data-stagger] > *.motion-in { opacity: 1; }

/* ===== 骨架屏 ===== */
@keyframes sq-skeleton-sweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.skeleton {
  border-radius: var(--c-radius-sm, 8px);
  background: linear-gradient(90deg,
    var(--c-fill, #f4f4f5) 25%,
    #ececf0 50%,
    var(--c-fill, #f4f4f5) 75%);
  background-size: 200% 100%;
  animation: sq-skeleton-sweep 1.4s var(--ease-out) infinite;
  color: transparent;
  user-select: none;
}
.skeleton-text {
  display: inline-block;
  height: .85em;
  min-width: 4em;
  vertical-align: -0.1em;
  border-radius: 4px;
}
.skeleton-card {
  display: block;
  min-height: 96px;
  border-radius: var(--c-radius-md, 12px);
}

/* ===== 等宽数字 ===== */
.num {
  font-variant-numeric: tabular-nums;
  font-family: var(--c-font-mono);
}

/* ===== 深色组件类 ===== */
.dk-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 40%),
              var(--dk-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--dk-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
              0 8px 30px rgba(0, 0, 0, .35);
  border-radius: var(--c-radius-lg, 16px);
  color: var(--dk-text);
  padding: 20px;
}
.dk-card .dk-card-title { color: var(--dk-text); }
.dk-card .dk-card-sub { color: var(--dk-text2); }

.dk-glow-text {
  background: linear-gradient(120deg, #60a5fa 0%, #a78bfa 50%, #34d399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 999px;
  color: var(--dk-text);
  background: rgba(37, 99, 235, .18);
  border: 1px solid rgba(59, 130, 246, .35);
}
.dk-badge--neutral {
  background: rgba(255, 255, 255, .06);
  border-color: var(--dk-border);
  color: var(--dk-text2);
}

/* ===== 按压反馈 ===== */
.btn-press {
  transition: transform var(--dur-1) var(--ease-out);
}
.btn-press:active {
  transform: scale(.97);
}

/* ===== 图标基样式 ===== */
.sq-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

/* ===== focus-visible: 保持 common.css 既有风格 ===== */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== 减弱动效偏好: 全部退化为立即完成 ===== */
@media (prefers-reduced-motion: reduce) {
  .motion-in { animation: none; }
  [data-stagger] > * { opacity: 1; }
  .skeleton { animation: none; }
  .btn-press { transition: none; }
  .btn-press:active { transform: none; }

  /* P2 补全: common.css 动效一并降级, 仅保留 opacity 类微过渡 */
  html { scroll-behavior: auto; }

  /* 入场/切换动画 → 立即完成 */
  .content-area, .tab-pane { animation: none; }

  /* loading 旋转 → 透明度脉冲 (保留"进行中"感知, 无旋转位移) */
  .c-loading::before,
  .c-loading-overlay .c-loading-card::before,
  .c-loading-inline { animation: sq-rm-pulse 1.2s ease-in-out infinite; }

  /* 导航下拉/飞出/遮罩: 去掉位移, 仅淡入淡出; 抽屉滑动改即时 */
  .global-nav .nav-dropdown, .global-nav .nav-flyout { transition: opacity .12s ease, visibility .12s; }
  .nav-mask { transition: opacity .12s ease, visibility .12s; }
  .nav-drawer { transition-duration: .01ms; }

  /* 其余微交互过渡时长归零 */
  .global-nav .home-link, .global-nav .nav-link, .global-nav .nav-caret,
  .nav-drawer .drawer-group-head .nav-caret, .nav-drawer .drawer-sub-toggle .nav-caret,
  .card, .stat-card, .feat-card, .perf-card, .wc-step, .sc, .c-card,
  .btn, .d-btn, .gr-bt-btn, .sb-run, .nav-item, .nav-link,
  a, .el-button, .el-input__wrapper,
  .c-btn, .c-nav-btn, .c-date-input, .c-presets .c-preset,
  .c-table tbody tr { transition-duration: .01ms; }
}
@keyframes sq-rm-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }