/* ========================================================= TRUONG NGHIA ARCHITECTURE — lớp chuyển động riêng cho TRANG CHỦ Chỉ index.html nạp tệp này. Các trang khác không bị ảnh hưởng. Nguyên tắc: mọi trạng thái "ẩn ban đầu" chỉ áp dụng khi có class .js-anim (do home.js gắn ngay khi chạy). Nếu JS lỗi hoặc bị tắt, trang vẫn hiện đầy đủ nội dung. ========================================================= */ /* --------------------------------------------------------- 1. MÀN MỞ ĐẦU --------------------------------------------------------- */ .intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--black); clip-path: inset(0 0 0 0); transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1); pointer-events: none; } html:not(.js-anim) .intro, .intro.is-done { display: none; } .intro.is-leaving { clip-path: inset(0 0 100% 0); } /* Khoá cuộn trong lúc chạy màn mở đầu (class riêng, không đụng tới body.style) */ html.intro-lock, html.intro-lock body { overflow: hidden; } .intro__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; } .intro__mark { width: 54px; height: 54px; } .intro__mark path { stroke: var(--white); stroke-dasharray: 120; stroke-dashoffset: 120; animation: introDraw 0.85s cubic-bezier(0.65, 0, 0.35, 1) forwards; } .intro__mark path:nth-child(2) { animation-delay: 0.25s; } @keyframes introDraw { to { stroke-dashoffset: 0; } } .intro__word { font-family: var(--serif); font-size: 13px; letter-spacing: 0.5em; text-indent: 0.5em; text-transform: uppercase; color: var(--grey); opacity: 0; animation: introWord 0.8s var(--ease) 0.5s forwards; } @keyframes introWord { to { opacity: 1; } } /* --------------------------------------------------------- 2. THANH TIẾN ĐỘ CUỘN --------------------------------------------------------- */ .progress { position: fixed; top: 0; left: 0; z-index: 120; width: 100%; height: 2px; background: transparent; pointer-events: none; } .progress__bar { height: 100%; width: 0; background: var(--white); transform-origin: left; } /* --------------------------------------------------------- 3. HEADER — ẩn khi cuộn xuống, hiện khi cuộn lên --------------------------------------------------------- */ .site-header { transition: background 0.5s var(--ease), height 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.55s var(--ease); } .site-header.is-tucked { transform: translateY(-100%); } /* --------------------------------------------------------- 4. TÁCH DÒNG & LỘ CHỮ THEO MẶT NẠ --------------------------------------------------------- */ .ln { display: block; overflow: hidden; } .ln > i { display: block; font-style: inherit; } .js-anim .ln > i { transform: translateY(115%); transition: transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--ln, 0) * 110ms); } .js-anim .is-lit .ln > i { transform: none; } /* Chữ phụ đi kèm tiêu đề: mờ dần lên */ .js-anim .fade-up { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); } .js-anim .fade-up.is-lit { opacity: 1; transform: none; } /* --------------------------------------------------------- 5. HERO --------------------------------------------------------- */ /* Ken Burns: ảnh nền phóng rất chậm, tạo cảm giác sống */ .js-anim .hero__media img { animation: kenburns 30s cubic-bezier(0.33, 0, 0.2, 1) forwards; } /* Biến thể AB — hero video: phóng nhẹ ban đầu, video tự có chuyển động riêng */ .js-anim .hero__video { animation: kenburns 40s cubic-bezier(0.33, 0, 0.2, 1) forwards; } @media (prefers-reduced-motion: reduce) { .hero__video { animation: none !important; } } @keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14); } } /* Lớp bọc để chạy parallax mà không hở mép */ .hero__media, .bg-media { will-change: transform; } .js-anim .hero__scroll { opacity: 0; transition: opacity 1s var(--ease) 0.5s; } .js-anim .is-lit .hero__scroll, .js-anim .hero.is-lit .hero__scroll { opacity: 1; } /* Vạch dọc dưới tiêu đề: kéo dài ra thay vì hiện sẵn */ .js-anim .hero__rule { transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease) 0.45s; } .js-anim .hero.is-lit .hero__rule { transform: scaleY(1); } /* --------------------------------------------------------- 6. THẺ DỰ ÁN — quét lộ dần + ảnh lùi tỉ lệ --------------------------------------------------------- */ /* QUAN TRỌNG — trạng thái clip-path phải đặt trên THẺ CON, còn lớp quan sát IntersectionObserver là KHUNG LƯỚI `.anim-cards`. Lý do: phần tử có clip-path bị IntersectionObserver tính là diện tích 0 (ratio luôn = 0), nên nếu quan sát chính thẻ đang tự ẩn bằng clip-path thì observer không bao giờ kích hoạt và thẻ ẩn vĩnh viễn. */ .js-anim .anim-cards .anim-card { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s cubic-bezier(0.76, 0, 0.24, 1); transition-delay: calc(var(--i, 0) * 130ms); } .js-anim .anim-cards.is-lit .anim-card { clip-path: inset(0 0 0 0); } .js-anim .anim-cards .anim-card img { transform: scale(1.22); transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--i, 0) * 130ms); } .js-anim .anim-cards.is-lit .anim-card img { transform: scale(1.02); } /* Giữ nguyên hiệu ứng phóng khi rê chuột (độ ưu tiên phải thắng luật trên) */ .js-anim .anim-cards.is-lit .anim-card:hover img { transform: scale(1.09); transition-delay: 0s; } /* Lớp phủ mạnh hơn: ảnh chụp thật sáng hơn nhiều so với ảnh placeholder, nếu giữ nguyên lớp phủ cũ thì nhãn danh mục sẽ chìm vào nền. */ .anim-card::after { background: linear-gradient( to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 22%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.18) 78%, rgba(0, 0, 0, 0.42) 100% ); } .anim-card:hover::after { opacity: 0.88; } .anim-card .project__cat { color: rgba(255, 255, 255, 0.86); } .anim-card .project__meta { color: rgba(255, 255, 255, 0.92); } /* Dấu mũi tên hiện ra khi rê chuột */ .project__go { position: absolute; z-index: 3; top: clamp(20px, 2.4vw, 32px); right: clamp(20px, 2.4vw, 32px); display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--white); opacity: 0; transform: translate(10px, -10px) scale(0.85); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease); } .project:hover .project__go { opacity: 1; transform: none; } .project:hover .project__go { background: var(--white); color: var(--black); } .project__go svg { width: 16px; height: 16px; } /* --------------------------------------------------------- 7. XẾP TẦNG CHO LƯỚI DỊCH VỤ / QUY TRÌNH / SỐ LIỆU --------------------------------------------------------- */ .js-anim .stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } .js-anim .stagger.is-lit > * { opacity: 1; transform: none; } /* Vạch trên mỗi bước quy trình tự kéo dài */ .js-anim .stagger.is-lit .step { position: relative; } .js-anim .process .step { border-top-color: transparent; } .js-anim .process .step::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background: var(--line); transition: width 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 200ms); } .js-anim .process.is-lit .step::before { width: 100%; } /* --------------------------------------------------------- 8. NÚT CÓ LỰC HÚT NHẸ THEO CON TRỎ --------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { .btn { transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.35s var(--ease); } } /* --------------------------------------------------------- 9. TÔN TRỌNG LỰA CHỌN GIẢM CHUYỂN ĐỘNG --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .intro { display: none; } .js-anim .ln > i, .js-anim .fade-up, .js-anim .anim-cards .anim-card, .js-anim .anim-cards .anim-card img, .js-anim .stagger > *, .js-anim .hero__rule, .js-anim .hero__scroll { opacity: 1; transform: none; clip-path: none; transition: none; } .js-anim .hero__media img { animation: none; } .js-anim .process .step { border-top-color: var(--line); } .js-anim .process .step::before { display: none; } .site-header.is-tucked { transform: none; } }