/* ============================================================
 * motion.css —— 全站统一动效
 * 曲线：spring/overshoot 弹性 · genie 精灵 · suck 吮吸
 * 用法：给元素加 .m-xxx 类；精灵/吮吸类可用 --gx/--gy 设置变换原点
 * ============================================================ */

/* ---------- 统一缓动曲线 ---------- */
:root {
  --ease-spring: cubic-bezier(.5, 1.6, .4, 1);    /* 弹性过冲 */
  --ease-genie: cubic-bezier(.32, .72, .35, 1);   /* 精灵收放 */
  --ease-suck: cubic-bezier(.55, -.1, .25, 1);    /* 吮吸吸入 */
  --ease-out: cubic-bezier(.16, 1, .3, 1);        /* 标准减速 */
}

/* ---------- 关键帧 ---------- */

/* 淡入/淡出 */
@keyframes m-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* 上浮淡入（页面/卡片进入） */
@keyframes m-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 弹性放大进入（弹窗） */
@keyframes m-pop-in {
  0% { opacity: 0; transform: scale(.82); }
  60% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* Genie 精灵：从点击位置生长/收回（--gx/--gy 为源点偏移） */
@keyframes m-genie-in {
  0% { opacity: 0; transform: translate(var(--gx, 0), var(--gy, 40px)) scale(.6, .4); }
  60% { opacity: 1; transform: translate(calc(var(--gx, 0px) * .1), calc(var(--gy, 40px) * .05)) scale(1.02); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes m-genie-out {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--gx, 0), var(--gy, 40px)) scale(.5, .3); }
}

/* Suck 吮吸：缩小吸入消失/弹出 */
@keyframes m-suck-in {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.1); }
}
@keyframes m-suck-out {
  0% { opacity: 0; transform: scale(.1); }
  70% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* 骨架屏扫光 */
@keyframes m-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 旋转（加载） */
@keyframes m-spin { to { transform: rotate(360deg); } }

/* 呼吸脉冲 */
@keyframes m-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* Toast 弹出/吸走 */
@keyframes m-toast-in {
  0% { opacity: 0; transform: translateY(-16px) scale(.9); }
  60% { opacity: 1; transform: translateY(2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes m-toast-out {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(.85); }
}

/* 下拉展开/收起 */
@keyframes m-drop-in {
  0% { opacity: 0; transform: scaleY(.6); }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes m-drop-out {
  0% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(.4); }
}

/* 页签内容淡入 */
@keyframes m-page-in {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 工具类 ---------- */
.m-fade-in { animation: m-fade-in .3s var(--ease-out) both; }
.m-fade-out { animation: m-fade-out .25s var(--ease-suck) both; }
.m-fade-up { animation: m-fade-up .45s var(--ease-out) both; }
.m-pop-in { animation: m-pop-in .38s var(--ease-spring) both; }
.m-genie-in { animation: m-genie-in .5s var(--ease-genie) both; }
.m-genie-out { animation: m-genie-out .4s var(--ease-suck) both; }
.m-suck-in { animation: m-suck-in .3s var(--ease-suck) both; }
.m-suck-out { animation: m-suck-out .35s var(--ease-spring) both; }
.m-toast-in { animation: m-toast-in .35s var(--ease-spring) both; }
.m-toast-out { animation: m-toast-out .28s var(--ease-suck) both; }
.m-drop-in { animation: m-drop-in .22s var(--ease-out) both; }
.m-drop-out { animation: m-drop-out .18s var(--ease-suck) both; }
.m-page-in { animation: m-page-in .35s var(--ease-out) both; }
.m-pulse { animation: m-pulse 1.6s ease-in-out infinite; }

/* 骨架屏逐行错峰 */
.skel-row:nth-child(2) .skel-cell { animation-delay: .08s; }
.skel-row:nth-child(3) .skel-cell { animation-delay: .16s; }
.skel-row:nth-child(4) .skel-cell { animation-delay: .24s; }
.skel-row:nth-child(5) .skel-cell { animation-delay: .32s; }
.skel-row:nth-child(6) .skel-cell { animation-delay: .4s; }

/* 尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}