/* =========================================================================
   animations.css — CHUYEN DONG DUNG CHUNG

   HAI LOAI o day:
     1. Hien dan khi cuon toi (.reveal)  -> js/reveal.js gan .is-in
     2. Chay lien tuc (troi, xoay, nhap nhay) -> thuan CSS

   QUY TAC BAT BUOC: moi thu trong file nay phai TAT khi may bao
   prefers-reduced-motion. Khoi @media o cuoi file lo viec do — dung xoa.
   Chi dung transform + opacity (GPU lo), tranh animate width/top/left.
   ========================================================================= */

/* ── 1. Hien dan khi cuon toi ────────────────────────────────
   Mac dinh la mo + day xuong 24px; them .is-in thi ve cho.
   Doi huong bang .reveal--left / --right / --zoom. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity .7s var(--ease-out),
    transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal--left  { transform: translate3d(-32px, 0, 0); }
.reveal--right { transform: translate3d(32px, 0, 0); }
.reveal--zoom  { transform: scale(.94); }
.reveal--none  { transform: none; }

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Hien lan luot tung cai mot. --i do js/reveal.js dat theo thu tu con
   trong nhom [data-reveal-group]. */
.reveal { transition-delay: calc(var(--i, 0) * 80ms); }

/* ── 2. Chay lien tuc ───────────────────────────────────────── */

/* Troi len xuong — dung cho the noi quanh anh hero. */
@keyframes mt-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.anim-float { animation: mt-float 6s var(--ease) infinite; }
.anim-float--slow { animation-duration: 9s; }
.anim-float--delay { animation-delay: -3s; }

/* Nhip thoi — dung cho cham "dang hoat dong". */
@keyframes mt-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.anim-pulse { animation: mt-pulse 2.4s var(--ease) infinite; }

/* Vong tron lan ra — nut Play tren video. */
@keyframes mt-ripple {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Xoay cham — banh rang trang tri. */
@keyframes mt-spin { to { transform: rotate(360deg); } }
.anim-spin     { animation: mt-spin 26s linear infinite; }
.anim-spin--rev { animation: mt-spin 20s linear infinite reverse; }

/* Chay ngang khong ngat — dai logo/phien ban. Doan noi dung duoc nhan doi
   trong HTML nen dich -50% la ve dung cho cu. */
@keyframes mt-marquee { to { transform: translateX(-50%); } }

/* Nhap nhay con tro chu. */
@keyframes mt-caret { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } }

/* Duong sang chay doc — vien khoi CTA. */
@keyframes mt-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── 3. Ton trong "giam chuyen dong" ─────────────────────────
   Nguoi dat may che do nay thuong bi chong mat khi trang tu chay. Tat het,
   nhung van phai cho .reveal HIEN RA — neu khong ca trang se trang tron. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================================
   VET SANG CHAY TREN CHU VANG (anh kim)

   Chu do mau chuyen vang; day cho vet sang chay ngang cham cham la ra chat
   "kim loai danh bong" giong logo. Lam bang cach keo dai anh nen ra 300% roi
   dich background-position — KHONG dung filter, vi filter tren chu lam mo net.

   Chay CHAM (6 giay) va chi tren MOT dong tieu de: nhanh hon hoac nhieu cho
   hon la thanh bien quang cao.
   ========================================================================= */
@keyframes mt-shine {
  0%   { background-position: 200% center; }
  100% { background-position: -80% center; }
}

.shine {
  background-size: 300% auto;
  animation: mt-shine 6s linear infinite;
}

/* Vet sang quet ngang mot lan khi tro chuot — dung cho the noi bat. */
@keyframes mt-glint {
  0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  35%  { opacity: .55; }
  100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}