/* [db8dd01c] BỘ CHUYỂN ĐỘNG CHUNG (Ken: "toàn bộ site thiếu UIX và sự sống … thêm những hiệu ứng UIX tinh tế") — dùng chung 3 vùng.
   Cách dùng: gắn thuộc tính vào phần tử, KHÔNG viết keyframe riêng cho cùng việc. Cách gắn + ví dụ: Documents/motion-guide.md.
   Quy tắc: chỉ animate opacity + translate/scale (thuộc tính riêng, KHÔNG đè `transform` đang có của trang); tắt hết khi prefers-reduced-motion. */
/* [db8dd01c] Ken: "hiệu ứng chương 2 … đang mượt giờ thành giật cục": [data-reveal] khai `transition` gộp → đè `transition: flex-grow` của vòm 02.
   Gốc rễ: bọc cả bộ trong @layer motion — CSS KHÔNG thuộc layer (của trang) LUÔN thắng → bộ chuyển động không thể đè transition/translate/scale/opacity có sẵn,
   chỉ lấp chỗ trống. Bỏ con trỏ vòng vàng (Ken: "sao chuột lại có chấm tròn"). */
@layer motion {
:root {
  --m-ease: cubic-bezier(.22, 1, .36, 1);     /* ra nhanh, hạ mềm — mọi chuyển động */
  --m-ease-io: cubic-bezier(.65, 0, .35, 1);  /* chuyển cảnh qua lại */
  --m-fast: 200ms; --m-mid: 400ms; --m-slow: 700ms;
  --m-stagger: 80ms;                           /* trễ so le giữa phần tử cùng nhóm */
  --m-gold: #E9B866;
}

/* 1 · Vào khung khi cuộn tới: data-reveal (="up" mặc định | "img" | "fade" | "words"); data-reveal-group trên cha → con so le theo --i */
[data-reveal] { opacity: 0; translate: 0 18px; transition: opacity var(--m-slow) var(--m-ease), translate var(--m-slow) var(--m-ease), scale var(--m-slow) var(--m-ease);
  transition-delay: calc(var(--i, 0) * var(--m-stagger) + var(--m-delay, 0ms)); }
[data-reveal="fade"] { translate: none; }
[data-reveal="img"] { translate: 0 14px; scale: 1.04; }
[data-reveal].is-in-view { opacity: 1; translate: none; scale: none; }
/* chữ hiện từng từ qua mặt nạ (JS bọc từng từ) */
[data-reveal="words"] { opacity: 1; translate: none; }
/* mặt nạ = clip-path nới ra ngoài khung dòng (dấu chồng ố/ẩ, chân g/y, nét nghiêng vượt khung dòng — overflow:hidden cũ cắt chân chữ);
   clip-path không đổi bố cục (padding/margin làm tụt dòng); hiện xong bỏ mặt nạ (.m-done, motion.js) */
.m-w { display: inline-block; clip-path: inset(-.4em -.2em -.3em); }
.m-done .m-w { clip-path: none; }
.m-w > span { display: inline-block; translate: 0 150%; transition: translate var(--m-slow) var(--m-ease); transition-delay: calc(var(--w, 0) * 45ms + var(--m-delay, 0ms)); }
[data-reveal="words"].is-in-view .m-w > span { translate: none; }

/* 2 · Hover tinh tế (chỉ chuột) */
@media (hover: hover) and (pointer: fine) {
  /* ánh vàng chạy qua nút: data-shine (phần tử chưa dùng ::after) */
  [data-shine] { position: relative; overflow: hidden; isolation: isolate; }
  [data-shine]::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 238, 200, .55) 50%, transparent 70%); translate: -130% 0; transition: translate var(--m-slow) var(--m-ease); }
  [data-shine]:hover::after { translate: 130% 0; }
  /* ảnh/vòm: zoom chậm + viền sáng — data-zoom trên khung, ảnh là con trực tiếp img/picture */
  [data-zoom] { transition: box-shadow var(--m-slow) var(--m-ease); }
  [data-zoom] > :is(img, picture) { transition: scale 1.2s var(--m-ease); }
  [data-zoom]:hover > :is(img, picture) { scale: 1.05; }
  [data-zoom]:hover { box-shadow: 0 0 0 1px rgba(233, 184, 102, .55), 0 0 26px rgba(233, 184, 102, .28); }
  /* nút nam châm: JS đặt --mx/--my (px) */
  [data-magnetic] { translate: var(--mx, 0) var(--my, 0); transition: translate var(--m-mid) var(--m-ease); }
}

/* 3 · Nhấn trên cảm ứng (không phụ thuộc hover): co nhẹ + gợn sáng (data-press; gợn cần data-ripple) */
@media (hover: none) {
  [data-press], [data-ripple] { transition: scale var(--m-fast) var(--m-ease); }
  [data-press]:active, [data-ripple]:active { scale: .97; }
}
[data-ripple] { position: relative; overflow: hidden; }
.m-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 238, 200, .45), rgba(255, 238, 200, 0) 70%);
  scale: 0; opacity: 1; animation: m-ripple 600ms var(--m-ease) forwards; }
@keyframes m-ripple { to { scale: 1; opacity: 0; } }

/* 4 · Parallax (data-parallax="tốc độ cuộn", data-parallax-mouse="px") — JS ghi translate */
[data-parallax], [data-parallax-mouse] { will-change: translate; }

/* 5 · Thanh tiến trình cuộn mảnh vàng đồng (motion.js tạo .m-progress) */
.m-progress { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 2px; pointer-events: none; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(233, 184, 102, .2), #E9B866 60%, #F8E1A6); scale: var(--p, 0) 1; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .m-w > span { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
  [data-magnetic], [data-parallax], [data-parallax-mouse] { translate: none !important; }
  .m-ripple { display: none !important; }
  [data-zoom] > :is(img, picture), [data-shine]::after { transition: none !important; }
}

}