/* ============================================================ Scroll Reveal — hiệu ứng xuất hiện khi cuộn (fade-up / trái / phải / zoom). Lấy cảm hứng từ hiệu ứng "fadeInUp on scroll". Chỉ kích hoạt khi có class .reveal-active (JS thêm vào khi trình duyệt hỗ trợ IntersectionObserver và không bật giảm chuyển động). Nếu JS lỗi -> nội dung vẫn hiển thị bình thường. ============================================================ */ html.reveal-active [data-reveal] { opacity: 0; transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; backface-visibility: hidden; } /* Trạng thái ẩn ban đầu theo từng hướng */ html.reveal-active [data-reveal="up"] { transform: translate3d(0, 42px, 0); } html.reveal-active [data-reveal="down"] { transform: translate3d(0, -42px, 0); } html.reveal-active [data-reveal="left"] { transform: translate3d(-48px, 0, 0); } html.reveal-active [data-reveal="right"] { transform: translate3d(48px, 0, 0); } html.reveal-active [data-reveal="zoom"] { transform: scale(.92); } html.reveal-active [data-reveal="fade"] { transform: none; } /* Trạng thái hiện (đã cuộn tới) */ html.reveal-active [data-reveal].is-visible { opacity: 1; transform: none; } /* Trên mobile/tablet, thẻ thường chiếm hết chiều ngang nên hiệu ứng trượt ngang (trái/phải) dễ đẩy phần tử ra ngoài khung -> sinh cuộn ngang, lệch giao diện. Chuyển trái/phải thành fade-up (chỉ trượt dọc) để không tràn ngang. */ @media (max-width: 991px) { html.reveal-active [data-reveal="left"], html.reveal-active [data-reveal="right"] { transform: translate3d(0, 40px, 0); } } /* Tôn trọng người dùng bật "giảm chuyển động" */ @media (prefers-reduced-motion: reduce) { html.reveal-active [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }