/* ================================================================ GIANGHIALAND — SCROLL REVEAL (gated) Lớp "mạch dẫn dắt khi cuộn" dùng chung toàn site. NGUYÊN TẮC AN TOÀN (rút từ foundation mục 11 — bài học card BĐS): - MẶC ĐỊNH mọi khối HIỆN ĐẦY ĐỦ (opacity:1). KHÔNG giấu gì. - Chỉ khi (JS bật SAU khi xác nhận có IntersectionObserver + KHÔNG prefers-reduced-motion) thì khối mới được "arm" để trôi lên nhẹ lúc vào viewport. - Crawler / không-JS / screenshot / reduced-motion: luôn thấy nội dung. Dùng đúng nhịp easing trang chủ để cả site cảm giác cùng một khối. KHÔNG áp cho .trang-chu-v7 (đã có hệ panel riêng) và .the-bds (đã chốt HIỆN NGAY ở foundation mục 11). ================================================================ */ :root { --reveal-ease: cubic-bezier(.22, .61, .36, 1); --reveal-dur: 720ms; --reveal-rise: 26px; } /* ── ARM: chỉ chạy khi JS đã xác nhận đủ điều kiện ── Selector yêu cầu html.reveal-on => không có JS thì rule này vô hiệu, khối giữ nguyên opacity mặc định (1). */ html.reveal-on body.pages-v7:not(.trang-chu-v7) [data-reveal] { opacity: 0; transform: translateY(var(--reveal-rise)); transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); will-change: opacity, transform; } /* Đã vào viewport (JS gắn .reveal-in) → trôi về vị trí thật. Nhả will-change về auto: khối đã hiện không giữ lớp compositor vĩnh viễn (tránh áp lực bộ nhớ GPU trên các section rất cao, vd lưới khu-vực ~5000px). Transition vẫn chạy bình thường — will-change chỉ là gợi ý tối ưu. */ html.reveal-on body.pages-v7:not(.trang-chu-v7) [data-reveal].reveal-in { opacity: 1; transform: none; will-change: auto; } /* Stagger nhẹ cho các khối liền kề trong cùng hàng/lưới. JS set biến --reveal-i theo thứ tự xuất hiện trong nhóm. */ html.reveal-on body.pages-v7:not(.trang-chu-v7) [data-reveal] { transition-delay: calc(var(--reveal-i, 0) * 70ms); } /* An toàn tuyệt đối: nếu ai đó bật reduced-motion sau khi JS chạy, bỏ mọi ẩn/chuyển động — hiện ngay. */ @media (prefers-reduced-motion: reduce) { html.reveal-on body.pages-v7:not(.trang-chu-v7) [data-reveal], html.reveal-on body.pages-v7:not(.trang-chu-v7) [data-reveal].reveal-in { opacity: 1 !important; transform: none !important; transition: none !important; } }