/* ============================================================ KHI — LỚP CHUYỂN ĐỘNG 2 (thử trên trang chủ, 30/07) Nguyên tắc an toàn: mọi thứ ẩn/biến dạng đều nằm dưới `.anim` — class này do JS gắn vào . JS chết = trang hiện bình thường. Tôn trọng prefers-reduced-motion ở cuối file. ============================================================ */ /* 1 · thanh điều hướng co lại khi cuộn */ .nav { transition: height .34s var(--ease), padding .34s var(--ease), background .34s var(--ease); } .nav .brand img { transition: height .34s var(--ease); } .anim .nav.compact { height: 52px; padding-left: 18px; background: rgba(255,255,255,.96); } .anim .nav.compact .brand img { height: 22px; } .anim .nav.compact .btn { height: 36px; font-size: .88rem; } /* 2 · ảnh lộ dần từ dưới lên + đẩy nhẹ ngược chiều cuộn */ .anim .reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease); /* KryUI motion: slow <= 600ms */ } .anim .reveal-img.in { clip-path: inset(0 0 0 0); } .anim .reveal-img img { transform: scale(1.14); transition: transform .8s var(--ease); } .anim .reveal-img.in img { transform: scale(1); } /* mọi chuyển động chỉ dùng transform/opacity/clip-path — không animate width/left/top */ /* khung có parallax: ảnh cao hơn khung để còn chỗ trượt */ .anim .par { overflow: hidden; } .anim .par img { will-change: transform; } /* 3 · tiêu đề hé lên theo từng chữ */ .anim [data-anim="lines"] .w { display: inline-block; overflow: hidden; vertical-align: bottom; } .anim [data-anim="lines"] .w > i { display: inline-block; font-style: normal; transform: translateY(110%); transition: transform .5s var(--ease); } .anim [data-anim="lines"].in .w > i { transform: none; } /* 4 · đoạn văn sáng dần theo độ cuộn */ .anim [data-anim="words"] { color: var(--ink); } .anim [data-anim="words"] .k { color: color-mix(in srgb, var(--ink) 38%, transparent); /* đủ đọc ngay cả khi chưa cuộn tới */ transition: color .5s var(--ease); } .anim [data-anim="words"] .k.on { color: var(--ink-soft); } /* 5 · khối vào màn: thêm chút mờ để cảm giác "lấy nét" */ .anim .stagger > * { filter: blur(5px); transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); } .anim .stagger.in > * { filter: none; } .anim .rise { transition: opacity .65s var(--ease), transform .65s var(--ease), filter .65s var(--ease); filter: blur(4px); } .anim .rise.in { filter: none; } /* 6 · nút chính hút nhẹ theo con trỏ + vệt sáng quét qua */ .anim .btn { will-change: transform; } .anim .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s var(--ease); } .anim .btn:hover::before { transform: translateX(120%); } /* 7 · dải số — Dang bỏ vạch chân 31/07 (KryMark note wfmhi8tg0m7lw9d): thừa, không cần thiết. */ /* 8 · nền đổi tông rất nhẹ theo section đang xem */ body { transition: background-color 1.1s var(--ease); } .anim body.tone-wash { background: #F1EFE6; } /* 9 · con trỏ ở băng ảnh: gợi ý kéo được */ .anim .rail { cursor: grab; } .anim .rail:active { cursor: grabbing; } @media (prefers-reduced-motion: reduce) { .anim .reveal-img { clip-path: none; } .anim .reveal-img img { transform: none; } .anim [data-anim="lines"] .w > i { transform: none; } .anim [data-anim="words"] .k { color: var(--ink-soft); } .anim .stagger > *, .anim .rise { filter: none; } .anim .btn::before { display: none; } }