/* =====================================================================
   GTL Academy — motion.css (nạp SAU theme.css) · khách yêu cầu 15/09: "thêm animation cho toàn web"
   Nguyên tắc: chuyển động nhẹ, một lần, phục vụ nhịp đọc — không nhún, không lặp, không parallax.
   1. Vào trang: hero trang chủ và banner trang con hiện theo thứ tự (keyframes, không cần JS).
   2. Cuộn tới: tiêu đề section, lưới thẻ (so le 80ms), ảnh (lộ dần + thu nhỏ nhẹ) — site.js bindMotion()
      tự gắn .reveal / .reveal--media rồi bindReveal() thêm .in bằng IntersectionObserver.
   3. Giảm chuyển động (prefers-reduced-motion): tắt hết, hiện ngay.
   ===================================================================== */

/* ---------- Reveal: đặt transition trên trạng thái .in để thắng transition hover của thẻ trong theme.css ---------- */
.reveal.in { transition: opacity .7s var(--ease), transform .8s var(--ease), border-color var(--fill-fade, .7s), background-color var(--fill-fade, .7s), color var(--fill-fade, .7s); }
.reveal[data-d="1"].in { transition-delay: .08s; }
.reveal[data-d="2"].in { transition-delay: .16s; }
.reveal[data-d="3"].in { transition-delay: .24s; }

/* ---------- Ảnh lộ dần: khung mở từ giữa ra, ảnh thu từ 1.08 về 1 ---------- */
.reveal--media { opacity: 1; transform: none; clip-path: inset(10% 6% 10% 6% round 12px); transition: clip-path 1.1s var(--ease); }
.reveal--media img { transform: scale(1.08); transition: transform 1.4s var(--ease); }
.reveal--media.in { clip-path: inset(0 0 0 0 round 12px); }
.reveal--media.in img { transform: none; }

/* ---------- Hero trang chủ: ảnh thu nhẹ, chữ lên từng dòng, vệt vàng dưới từ khoá chạy từ trái ---------- */
@keyframes mUp { from { opacity: 0; transform: translateY(24px); } }
@keyframes mFade { from { opacity: 0; } }
@keyframes mZoom { from { transform: scale(1.08); } }
@keyframes mBar { from { background-size: 0% 100%; } }
.hero--bleed .hero__bg img { animation: mZoom 2.2s var(--ease) both; }
.hero--bleed .hero__line, .hero--bleed .hero__tag, .hero--bleed .hero__sub, .hero--bleed .hero__cta { animation: mUp .9s var(--ease) both; }
.hero--bleed .hero__line:nth-child(1) { animation-delay: .15s; }
.hero--bleed .hero__line:nth-child(2) { animation-delay: .27s; }
.hero--bleed .hero__tag { animation-delay: .4s; }
.hero--bleed .hero__sub { animation-delay: .52s; }
.hero--bleed .hero__cta { animation-delay: .64s; }
.hero--bleed h1 em { background-repeat: no-repeat; background-position: left center; background-size: 100% 100%; animation: mBar .8s cubic-bezier(.4, 0, .2, 1) both; }
.hero--bleed .hero__line:nth-child(1) em { animation-delay: .75s; }
.hero--bleed .hero__line:nth-child(2) em { animation-delay: .9s; }

/* ---------- Banner trang con: nhãn → tiêu đề → mô tả, ảnh lộ dần ---------- */
.page-hero .page-hero__badge, .page-hero h1, .page-hero .page-hero__text > * { animation: mUp .8s var(--ease) both; }
.page-hero .page-hero__badge { animation-delay: .05s; }
.page-hero h1 { animation-delay: .14s; }
.page-hero .page-hero__text > :nth-child(1) { animation-delay: .24s; }
.page-hero .page-hero__text > :nth-child(2) { animation-delay: .32s; }
.page-hero .page-hero__text > :nth-child(3) { animation-delay: .4s; }
.page-hero .page-hero__text > :nth-child(n+4) { animation-delay: .48s; }
.page-hero .page-hero__visual { animation: mClip 1.2s var(--ease) .2s both; }
.page-hero .page-hero__visual img { animation: mZoom 1.6s var(--ease) .2s both; }
.page-hero .cutout-frame__arch, .page-hero .cutout-frame__block { animation: mFade .9s var(--ease) .3s both; }
.page-hero .page-hero__cutout img { animation: mUp 1s var(--ease) .2s both; }
@keyframes mClip { from { clip-path: inset(12% 8% 12% 8% round 12px); opacity: .2; } to { clip-path: inset(0 round 12px); opacity: 1; } }

/* ---------- Nút: mũi tên trượt nhẹ khi rê (đã có), thêm nhấn xuống khi bấm ---------- */
.btn { transition: background-color var(--dur), color var(--dur), border-color var(--dur), transform .15s var(--ease); }
.btn:active { transform: scale(.98); }

/* ---------- Link gạch chân: gạch chạy từ trái khi rê ---------- */
.link-arrow { background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat; background-position: left 100%; background-size: 0% 1.5px; transition: background-size .35s var(--ease); }
.link-arrow:hover { background-size: 100% 1.5px; border-bottom-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .hero--bleed *, .page-hero, .page-hero * { animation: none !important; }
  .reveal--media, .reveal--media img { clip-path: none; transform: none; transition: none; }
  .btn:active { transform: none; }
}

/* ---------- Mobile + tablet (khách 21/09): không hiện dần khi cuộn — chữ và ảnh có sẵn ngay ----------
   Đặt bằng CSS để không nháy trống trước khi site.js chạy. Cùng truy vấn với LITE_Q trong site.js.
   Hover được gỡ ở site.js stripHover(). Hiệu ứng vào trang của hero/banner vẫn giữ (chạy một lần, không theo cuộn). */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .reveal--media, .reveal--media.in, .reveal--media img { clip-path: none; transform: none; transition: none; }
}