/* Hiện dần khi cuộn tới — đi cùng static/js/hien-dan.js (trang chủ, /su-kien).

   Phần tử có data-hien-dan CHỈ bị ẩn khi <html> có class hd-js (do hien-dan.js
   gắn, chỉ khi trình duyệt có IntersectionObserver) VÀ khách không chọn giảm
   chuyển động. Không JS / giảm chuyển động: luôn hiện, không hiệu ứng.
   Chỉ đổi transform + opacity: không đẩy bố cục.

   Luật ẩn viết ở dạng :not(.hd-hien) (không có luật "đã hiện") để sau khi
   hiện, transform của chính thẻ (nhấc thẻ khi rê chuột) không bị đè.
   Transition riêng của hiệu ứng này bỏ khi JS gắn hd-xong. */
@media (prefers-reduced-motion: no-preference) {
  .hd-js [data-hien-dan]:not(.hd-hien) {
    opacity: 0;
    transform: translateY(16px) scale(.94);
  }
  .hd-js [data-hien-dan]:not(.hd-xong) {
    transition: opacity .5s ease var(--hd-tre, 0s), transform .5s ease var(--hd-tre, 0s);
  }
}