@media (prefers-reduced-motion: no-preference) {
  @keyframes bs-fade-in { from { opacity: 0 } to { opacity: 1 } }
  @keyframes bs-slide-up { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
  @keyframes bs-shimmer { 0% { background-position: -480px 0 } 100% { background-position: 480px 0 } }

  .anim-fade { animation: bs-fade-in .28s ease both; }
  .anim-slide-up { animation: bs-slide-up .34s cubic-bezier(.2,.8,.2,1) both; }
  /* backwards (not both): giữ trạng thái ẩn trước delay cho stagger, nhưng KHÔNG giữ
     transform:none sau khi chạy → trả lại hover-lift của .card-hover (tránh regression). */
  .anim-stagger > * { animation: bs-slide-up .34s cubic-bezier(.2,.8,.2,1) backwards;
    animation-delay: calc(var(--i, 0) * 28ms); }
  .modal-enter { animation: bs-slide-up .22s ease both; }

  .skeleton { background: linear-gradient(90deg, var(--sunken) 25%, var(--line-soft) 37%, var(--sunken) 63%);
    background-size: 960px 100%; animation: bs-shimmer 1.3s linear infinite; border-radius: var(--r-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .anim-fade, .anim-slide-up, .anim-stagger > *, .modal-enter { animation: none !important; }
  .skeleton { background: var(--sunken); }
}
.tx { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }