/* =========================================================
   DS · Motion
   动效语义：进入 / 列表 / 展开 / 离场 / 反馈。
   时长与缓动来自 tokens，尊重 prefers-reduced-motion。
   ========================================================= */

@keyframes ds-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ds-rise-in {
    from { opacity: 0; transform: translateY(var(--ds-motion-distance)); }
    to { opacity: 1; transform: none; }
}

@keyframes ds-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes ds-slide-in-right {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes ds-fade-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-4px); }
}

@keyframes ds-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes ds-collapse-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* 页面/模块进入 */
.ds-enter-page {
    animation: ds-rise-in var(--ds-motion-slow) var(--ds-ease-emphasized) both;
}

.ds-enter {
    animation: ds-rise-in var(--ds-motion-base) var(--ds-ease-emphasized) both;
}

.ds-enter-fade {
    animation: ds-fade-in var(--ds-motion-base) var(--ds-ease-standard) both;
}

.ds-enter-scale {
    animation: ds-scale-in var(--ds-motion-slow) var(--ds-ease-spring) both;
}

.ds-enter-right {
    animation: ds-slide-in-right var(--ds-motion-slow) var(--ds-ease-emphasized) both;
}

/* 列表行进入：由 JS 设置 --ds-i，限制在前 N 行 */
.ds-stagger > .ds-stagger-item {
    animation: ds-row-in var(--ds-motion-base) var(--ds-ease-emphasized) both;
    animation-delay: calc(var(--ds-i, 0) * var(--ds-motion-stagger));
}

/* 展开内容 */
.ds-collapse-enter {
    animation: ds-collapse-in var(--ds-motion-base) var(--ds-ease-standard) both;
    transform-origin: top center;
}

/* 离场 */
.ds-leave {
    animation: ds-fade-out var(--ds-motion-fast) var(--ds-ease-standard) both;
    pointer-events: none;
}

/* 数据更新高亮 */
@keyframes ds-flash {
    0% { background: var(--ds-color-primary-soft); }
    100% { background: transparent; }
}

.ds-flash {
    animation: ds-flash var(--ds-motion-slow) var(--ds-ease-standard);
}

/* 数字滚动由 JS 使用 requestAnimationFrame，无 CSS 依赖 */

@media (prefers-reduced-motion: reduce) {
    .ds-enter-page,
    .ds-enter,
    .ds-enter-fade,
    .ds-enter-scale,
    .ds-enter-right,
    .ds-stagger > .ds-stagger-item,
    .ds-collapse-enter,
    .ds-leave,
    .ds-flash,
    .ds-skeleton {
        animation: none !important;
    }
}