/* ============================================================================
   HIỆU ỨNG HIỆN DẦN KHI CUỘN TỚI — trang chủ và bốn trang app 2026

   Class .sr-reveal do assets/js/sr-reveal.js gắn vào lúc chạy, KHÔNG viết sẵn
   trong markup: nếu JS lỗi hoặc bị chặn thì nội dung vẫn hiện bình thường
   thay vì ẩn vĩnh viễn.

   Chỉ nhắm các khối NỘI DUNG (tiêu đề section, thẻ, ảnh minh hoạ, cột gói…),
   không đụng tới các cụm trang trí của bản export — nhiều cụm đã có
   transform: matrix() trong inline style, thêm translate vào là lệch chỗ.
   ========================================================================== */

.sr-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.sr-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Ảnh minh hoạ trượt ngang vào thay vì đi lên, cho khác nhịp với phần chữ. */
.sr-reveal--left {
    transform: translateX(-32px);
}

.sr-reveal--right {
    transform: translateX(32px);
}

/* Hết hiệu ứng thì bỏ will-change để không giữ layer thừa. */
.sr-reveal.is-done {
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .sr-reveal,
    .sr-reveal--left,
    .sr-reveal--right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}