/* ==========================================================================
   micro.css — 点击级微交互（第 1 项：点赞爆粒子）
   --------------------------------------------------------------------------
   规格（Docs/App交互效果-方案-20261115.md 效果清单 01）：
     按下 → 图标 0.8 再弹到 1.2 再回 1（弹簧曲线）；灰色变红色；
     周围炸开 8 个彩色小圆点向外飞散并淡出；右侧数字向上滚 +1。总时长 ~600ms。

   纪律（沿用 motion.css 的报告口径）：
     · 只在**交互时刻**动，静止态不改变任何像素；
     · 粒子是纯装饰，`pointer-events:none` + `aria-hidden`，不影响点击；
     · `prefers-reduced-motion: reduce` 时整组退化为"直接到位"，不炸粒子。
   ========================================================================== */

.review-like-button { position: relative; }

/* 图标：按下先缩到 .8，再弹到 1.2，回到 1（弹簧） */
@keyframes qs-like-pop {
  0%   { transform: scale(1); }
  22%  { transform: scale(.8); }
  58%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.qs-like-pop .ui-icon,
.qs-like-pop > svg {
  animation: qs-like-pop 420ms cubic-bezier(.34, 1.56, .64, 1) both;
}

/* 已赞的红色反馈：只在这一下里变红，状态色仍由 .is-liked 决定 */
.qs-like-pop .ui-icon {
  color: #e0484f;
  transition: color 120ms ease;
}

/* 数字向上滚 +1：旧值上移淡出，新值从下方顶上来 */
@keyframes qs-count-roll {
  0%   { transform: translateY(0); opacity: 1; }
  45%  { transform: translateY(-9px); opacity: 0; }
  46%  { transform: translateY(9px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.qs-like-pop b { animation: qs-count-roll 460ms cubic-bezier(.22, 1, .36, 1) both; }

/* 粒子容器：盖在图标上，不接收指针事件 */
.qs-burst {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}

.qs-burst i {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--qs-burst-color, #e0484f);
  opacity: 0;
  animation: qs-burst-fly 520ms cubic-bezier(.16, .84, .44, 1) forwards;
}

@keyframes qs-burst-fly {
  0%   { transform: translate(0, 0) scale(.5); opacity: .95; }
  60%  { opacity: .85; }
  100% { transform: translate(var(--qs-dx, 0), var(--qs-dy, 0)) scale(1); opacity: 0; }
}

/* 减弱动效：不炸、不弹、不滚，只保留颜色变化 */
@media (prefers-reduced-motion: reduce) {
  .qs-like-pop .ui-icon,
  .qs-like-pop > svg,
  .qs-like-pop b { animation: none !important; }
  .qs-burst { display: none !important; }
}