/* ========================================================================= HIỆU ỨNG CHUYỂN ĐỘNG — Eco Terra Pack Nguyên tắc: - Chỉ dùng transform/opacity (GPU), không animate kích thước → không giật, không gây CLS. - Nội dung KHÔNG BAO GIỜ bị ẩn nếu JS lỗi: trạng thái "chờ hiện" chỉ áp dụng khi có class .etp-motion (do assets/motion.js gắn). - Toàn bộ nằm trong @media (prefers-reduced-motion: no-preference): ai bật "giảm chuyển động" trong hệ điều hành sẽ thấy trang tĩnh hoàn toàn. ========================================================================= */ @media (prefers-reduced-motion: no-preference) { /* --------------------------------------------------------------------- 1) BANNER — nội dung slide đang hiện chạy vào lần lượt, mỗi lần đổi slide lại chạy lại (class .is-current do motion.js gắn). --------------------------------------------------------------------- */ @keyframes etp-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } } @keyframes etp-pop { from { opacity: 0; transform: translate3d(28px, 0, 0) scale(.96); } to { opacity: 1; transform: none; } } @keyframes etp-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -9px, 0); } } @keyframes etp-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.86); opacity: .7; } } @keyframes etp-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-56px, -32px, 0); } } @keyframes etp-breathe { 0%, 100% { opacity: .75; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-50%) scale(1.06); } } .etp-hero__slide.is-current .etp-hero__copy > * { animation: etp-rise .7s cubic-bezier(.2, .7, .2, 1) both; } .etp-hero__slide.is-current .etp-hero__copy > :nth-child(1) { animation-delay: .05s; } .etp-hero__slide.is-current .etp-hero__copy > :nth-child(2) { animation-delay: .15s; } .etp-hero__slide.is-current .etp-hero__copy > :nth-child(3) { animation-delay: .27s; } .etp-hero__slide.is-current .etp-hero__copy > :nth-child(4) { animation-delay: .39s; } .etp-hero__slide.is-current .etp-hero__copy > :nth-child(5) { animation-delay: .51s; } .etp-hero__slide.is-current .etp-hero__panel { animation: etp-pop .85s cubic-bezier(.2, .7, .2, 1) .2s both; } /* Sản phẩm trong thẻ lơ lửng nhẹ, bóng đổ co giãn theo */ .etp-hero__art svg > :not(ellipse):not(defs) { animation: etp-float 6s ease-in-out infinite; } .etp-hero__art svg ellipse { transform-box: fill-box; transform-origin: center; animation: etp-shadow 6s ease-in-out infinite; } /* Nền lục giác trôi rất chậm, quầng sáng "thở" */ .etp-hero .etp-hero__bg svg { animation: etp-drift 40s linear infinite alternate; will-change: transform; width: calc(100% + 56px); height: calc(100% + 32px); } .etp-hero .etp-hero__visual::before { animation: etp-breathe 7s ease-in-out infinite; } /* --------------------------------------------------------------------- 2) HIỆN DẦN KHI CUỘN — thẻ trong cùng một lưới hiện nối tiếp nhau thay vì bật ra cùng lúc. Dùng animation (không phải transition) với fill-mode "backwards" để không giữ transform sau khi chạy xong — nhờ vậy hiệu ứng nhấc thẻ khi rê chuột của theme vẫn hoạt động. --------------------------------------------------------------------- */ .js .vs-grid > .vs-reveal.is-visible { animation: etp-rise .65s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--etp-i, 0) * 90ms); } .vs-grid > .vs-reveal:nth-child(2) { --etp-i: 1; } .vs-grid > .vs-reveal:nth-child(3) { --etp-i: 2; } .vs-grid > .vs-reveal:nth-child(4) { --etp-i: 3; } .vs-grid > .vs-reveal:nth-child(5) { --etp-i: 4; } .vs-grid > .vs-reveal:nth-child(6) { --etp-i: 5; } .vs-grid > .vs-reveal:nth-child(7) { --etp-i: 6; } .vs-grid > .vs-reveal:nth-child(8) { --etp-i: 7; } .vs-grid > .vs-reveal:nth-child(9) { --etp-i: 8; } /* Gạch vàng dưới tiêu đề khối kéo dài khi khối hiện ra (kiểu tĩnh ở cuối file) */ .etp-motion .vs-section-head h2::after { transform: scaleX(.001); transition: transform .8s cubic-bezier(.2, .7, .2, 1) .25s; } .etp-motion .vs-section-head.is-visible h2::after { transform: scaleX(1); } /* Các khối KHÔNG có sẵn .vs-reveal của theme (FAQ, form, CTA...) — motion.js gắn .etp-rv rồi thêm .is-in khi cuộn tới. */ .etp-motion .etp-rv { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--etp-i, 0) * 70ms); } .etp-motion .etp-rv.is-in { opacity: 1; transform: none; } /* --------------------------------------------------------------------- 3) TƯƠNG TÁC KHI RÊ CHUỘT --------------------------------------------------------------------- */ /* Vệt sáng lướt qua nút chính */ .etp-btn--solid, .vs-btn--primary, .vs-footer-cta__btn--solid, .etp-about__btn--solid { position: relative; overflow: hidden; isolation: isolate; } .etp-btn--solid::after, .vs-btn--primary::after, .vs-footer-cta__btn--solid::after, .etp-about__btn--solid::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg) translate3d(0, 0, 0); pointer-events: none; } /* Nút nền trắng: vệt sáng đổi sang xanh nhạt mới nhìn thấy */ .etp-btn--solid::after, .vs-footer-cta__btn--solid::after { background: linear-gradient(100deg, transparent, rgba(0, 166, 81, .18), transparent); } .etp-btn--solid:hover::after, .vs-btn--primary:hover::after, .vs-footer-cta__btn--solid:hover::after, .etp-about__btn--solid:hover::after { transition: transform .75s ease; transform: skewX(-20deg) translate3d(420%, 0, 0); } /* Thẻ: chip icon nảy nhẹ khi rê chuột vào thẻ */ .vs-card .vs-ico-chip, .vs-card .etp-about__chip { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); } .vs-card:hover .vs-ico-chip { transform: translateY(-3px) rotate(-6deg) scale(1.06); } /* Mũi tên trong liên kết "Xem ..." trượt sang phải */ .vs-service a .vs-ico, .etp-hero__cta .etp-btn--line .vs-ico { transition: transform .25s ease; } .vs-service a:hover .vs-ico, .etp-hero__cta .etp-btn--line:hover .vs-ico { transform: translateX(4px); } /* Câu hỏi thường gặp: câu trả lời trượt xuống mượt khi mở */ .vs-faq__item[open] .vs-faq__a { animation: etp-rise .45s cubic-bezier(.2, .7, .2, 1) both; } /* --------------------------------------------------------------------- 4) THANH MENU DÍNH — trượt xuống thay vì bật ra đột ngột --------------------------------------------------------------------- */ @keyframes etp-drop { from { transform: translate3d(0, -100%, 0); } to { transform: none; } } #vs-bar.is-stuck { animation: etp-drop .38s cubic-bezier(.2, .7, .2, 1); } } /* Gạch vàng dưới tiêu đề khối — luôn hiện (kể cả khi tắt hiệu ứng) */ .vs-section-head h2::after { content: ""; display: block; width: 56px; height: 3px; margin: .7rem auto 0; border-radius: 3px; background: var(--vs-accent); } .vs-section-head--left h2::after { margin-left: 0; transform-origin: left; } /* Khi in trang (Ctrl+P): hiện toàn bộ nội dung, bỏ mọi trạng thái "chờ hiện" — kể cả .vs-reveal của theme cha, vốn in ra sẽ bị trống nếu chưa cuộn tới. */ @media print { .etp-rv, .vs-reveal, .etp-hero__copy > *, .etp-hero__panel { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } }