/* Motion — token thời gian / easing và các hiệu ứng dùng chung.
   Hàm JS tương ứng ở js/motion.js (shimmer, slideIn, dissolve, countUp).
   Người bật "Giảm chuyển động" chỉ thấy mờ dần ngắn, không trượt, không nảy. */
:root{
  --motion-fast:150ms;     /* phản hồi nhấn, đổi trạng thái nhỏ */
  --motion-base:250ms;     /* dòng trượt vào, khoảng trống khép lại */
  --motion-pop:340ms;      /* bong bóng mới nảy vào */
  --motion-slow:600ms;     /* shimmer, tan thành bụi */
  --motion-count:800ms;    /* số chạy, khớp nhịp vòng donut */
  --ease-out:cubic-bezier(.2,0,0,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-spring:cubic-bezier(.2,.9,.25,1.3);   /* hơi vượt rồi dừng */
}

/* Bong bóng mới: trồi lên và nảy. Của người khác (bên trái) thì lệch vào từ trái. */
.expense-bubble.in{animation:slipIn var(--motion-pop) var(--ease-spring) both}
.expense-row.theirs .expense-bubble.in{animation-name:slipInLeft}
@keyframes slipIn{
  from{opacity:0; transform:translateY(16px) scale(.86)}
  55%{opacity:1}
  to{opacity:1; transform:none}
}
@keyframes slipInLeft{
  from{opacity:0; transform:translate(-12px, 12px) scale(.9)}
  55%{opacity:1}
  to{opacity:1; transform:none}
}

/* Shimmer — vệt sáng quét một lần qua container vừa sửa xong.
   Hai loại, motion.js tự chọn theo nền đang hiện:
     nền xám / trắng → xanh nhạt (accent 5%)
     nền có màu (vd. bong bóng xanh của mình) → --light, vệt trắng
   Container cần position:relative (List-Item đã có). Vệt nằm DƯỚI chữ, trên nền:
   z-index -1 trong container được cô lập (isolation).
   Dải sáng (__band) trượt bằng transform nên card đồ hoạ tự lo, không phải vẽ lại. */
.expense-bubble, .project-total-bar, .project-switcher{position:relative}
.expense-bubble, .project-total-bar, .project-switcher, .list-item{isolation:isolate}
.fx-shimmer{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit; overflow:hidden;
  --shimmer-color:color-mix(in srgb, var(--color-accent-primary) 5%, transparent);   /* accent 5% */
}
.fx-shimmer--light{--shimmer-color:rgb(255 255 255 / .7)}
.fx-shimmer__band{
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent, var(--shimmer-color) 50%, transparent);
  transform:translateX(-100%);   /* nằm ngoài mép trái; chạy tới 100% = ngoài mép phải */
  will-change:transform;
}