/* ========================================================================== HIỆU ỨNG ANIMATION — Long Biên Ford - Scroll-reveal (cuộn tới đâu hiện tới đó) qua IntersectionObserver + CSS - Hover micro-interactions (zoom ảnh, nâng card) - Đếm số (150+), stagger từng card Chỉ kích hoạt khi JS thêm class .js-anim vào -> nếu JS lỗi/tắt, nội dung vẫn hiện bình thường (không bị ẩn). ========================================================================== */ /* Trạng thái ẩn ban đầu (chỉ khi có .js-anim) */ .js-anim .anim { opacity: 0; transform: translateY(36px); } .js-anim .anim.anim-zoom { transform: scale(0.9); } .js-anim .anim.anim-left { transform: translateX(-44px); } .js-anim .anim.anim-right { transform: translateX(44px); } /* Chuyển động khi hiện ra */ .anim { transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .js-anim .anim.anim-in { opacity: 1; transform: none; } /* Tôn trọng người dùng tắt hiệu ứng chuyển động */ @media (prefers-reduced-motion: reduce) { .js-anim .anim { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- Hover: zoom ảnh trong card ---------- */ .home-products .hp-card-media img, .home-news .hn-card-media img, .home-news .hnp-hero-media img, .home-news .hnp-scard-media img, .home-news .hnp-litem-thumb img, .menu-post-item .img-cover, .menu-post-item .img-post, .post-item .img-cover { transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } .home-products .hp-card:hover .hp-card-media img, .home-news .hn-card:hover .hn-card-media img, .home-news .hnp-hero:hover .hnp-hero-media img, .home-news .hnp-scard:hover .hnp-scard-media img, .home-news .hnp-litem:hover .hnp-litem-thumb img, .menu-post-item:hover .img-cover, .menu-post-item:hover .img-post, .post-item:hover .img-cover { transform: scale(1.07); } /* Nút bấm mượt hơn */ .home-products .hp-btn-detail, .home-products .hp-btn-call, .home-products .hp-chip, .home-about .ab-card-cta { transition: all 0.22s ease, transform 0.22s ease; } .home-products .hp-btn-detail:hover { transform: translateY(-2px); } .home-products .hp-btn-call:hover { transform: translateY(-2px); } /* Thẻ số liệu nhấn nhẹ khi hover */ .home-about .ab-stat { transition: transform 0.3s ease; } .home-about .ab-stat:hover { transform: translateY(-4px); }