/* =========================================================
   Reseller Motion · 统一微交互/微动画
   通用前缀 .fx-* ；4 模板共用
   ========================================================= */

/* 尊重系统的"减少动画"偏好，所有动画 noop */
@media (prefers-reduced-motion: reduce){
  .fx-reveal, .fx-pulse, .fx-shimmer, .fx-stagger > *,
  .fx-lift, .fx-ripple .ripple, .fx-bg-decor{
    animation: none !important; transition: none !important; transform: none !important;
  }
  .fx-reveal{ opacity: 1 !important; }
  .fx-stagger > *{ opacity: 1 !important; }
}

/* ─── 1. Reveal · 进入视口 fade-in + slide-up ─── */
.fx-reveal{
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.7,.3,1),
              transform .55s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.fx-reveal.is-in{ opacity: 1; transform: translateY(0); }

/* ─── 2. Stagger · 子元素阶梯入场 ─── */
.fx-stagger > *{
  opacity: 0;
  animation: fx-stagger-in .55s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes fx-stagger-in{
  from{ opacity: 0; transform: translateY(12px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* ─── 3. Pulse · 紧急状态高亮（低库存等） ─── */
.fx-pulse{
  animation: fx-pulse 1.8s ease-in-out infinite;
}
@keyframes fx-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(220,38,38,.45); }
  50%     { box-shadow: 0 0 0 8px rgba(220,38,38,0);  }
}

/* ─── 4. Shimmer · 骨架/占位动态条纹 ─── */
.fx-shimmer{
  background: linear-gradient(90deg, #f3f4f6 0%, #fff 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: fx-shimmer 1.4s ease-in-out infinite;
}
@keyframes fx-shimmer{
  0%  { background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ─── 5. Ripple · 按钮涟漪 ─── */
.fx-ripple{ position: relative; overflow: hidden; }
.fx-ripple .ripple{
  position: absolute; border-radius: 50%;
  transform: scale(0);
  background: currentColor; opacity: .28;
  pointer-events: none;
  animation: fx-ripple .55s ease-out forwards;
}
@keyframes fx-ripple{ to{ transform: scale(2.4); opacity: 0; } }

/* ─── 6. Count · 数字滚到位时的微 scale 强调 ─── */
.fx-count{ display: inline-block; will-change: transform; }
.fx-count.tick{ animation: fx-count-tick .26s cubic-bezier(.2,.7,.3,1); }
@keyframes fx-count-tick{ 50%{ transform: scale(1.07); } }

/* ─── 7. Lift · 卡片 hover 上抬 + 阴影 ─── */
.fx-lift{
  transition: transform .22s cubic-bezier(.2,.7,.3,1),
              box-shadow .22s,
              border-color .22s;
  will-change: transform;
}
.fx-lift:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.07);
}
.fx-lift:active{ transform: translateY(-1px); transition-duration: .1s; }

/* ─── 8. Tilt · 鼠标方向微倾斜（更生动） ─── */
.fx-tilt{ transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.fx-tilt:hover{ transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-2px); }

/* ─── 9. 背景装饰 · 右上角缓慢旋转的渐变 ─── */
.fx-bg-decor{
  position: fixed; top: -180px; right: -180px; width: 460px; height: 460px;
  background: radial-gradient(circle, currentColor, transparent 65%);
  opacity: .035;
  pointer-events: none; z-index: 0;
  animation: fx-bg-spin 90s linear infinite;
  border-radius: 50%;
}
@keyframes fx-bg-spin{ to{ transform: rotate(360deg); } }

/* ─── 10. Underline-grow · 链接下划线生长 ─── */
.fx-underline{ position: relative; display: inline-block; }
.fx-underline::after{
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.fx-underline:hover::after{ transform: scaleX(1); transform-origin: left; }

/* ─── 11. Click-bounce · 卡片点击瞬时弹动 ─── */
.fx-bounce{ transition: transform .12s cubic-bezier(.34,1.56,.64,1); }
.fx-bounce:active{ transform: scale(.97); }

/* ─── 12. Dots · 极淡点状网格背景（hero 区） ─── */
.fx-dots{
  background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* table 上的 fx-reveal 会破坏 colgroup 列宽算法，禁止 transform 应用到 table */
table.fx-reveal{ transform:none !important; }