/* ============================================================
   AGERO CLONE — animations.css
   ------------------------------------------------------------
   Tách RIÊNG mọi thứ liên quan chuyển động:
     1. Keyframes dùng chung (marquee scroll, float, spin)
     2. Scroll-reveal  (phần tử hiện dần khi cuộn tới)
        -> điều khiển bởi js/reveal.js qua IntersectionObserver
     3. Hỗ trợ stagger (các phần tử con hiện lần lượt)
     4. Tôn trọng prefers-reduced-motion (tắt animation nếu user yêu cầu)
   ============================================================ */

/* ===== 1. KEYFRAMES ===== */
@keyframes scroll{ to{ transform:translateX(-50%); } }      /* marquee chạy ngang */
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ảnh nổi ở hero "thở" nhẹ lên xuống */
.hero__float{ animation:floaty 6s ease-in-out infinite; }
.hero__float.right{ animation-delay:-3s; }

/* ===== 2. SCROLL REVEAL ===== */
/* Trạng thái ẩn ban đầu — gắn data-reveal vào phần tử muốn xuất hiện */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
/* JS thêm class này khi phần tử lọt vào màn hình */
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Biến thể hướng vào */
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="scale"].is-visible{ transform:none; }

/* ===== 3. STAGGER ===== */
/* Đặt data-stagger lên container; các con sẽ trễ dần nhau */
[data-stagger] > *{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),
             transform .6s cubic-bezier(.16,1,.3,1);
}
[data-stagger].is-visible > *{ opacity:1; transform:none; }
[data-stagger].is-visible > *:nth-child(1){ transition-delay:.00s; }
[data-stagger].is-visible > *:nth-child(2){ transition-delay:.08s; }
[data-stagger].is-visible > *:nth-child(3){ transition-delay:.16s; }
[data-stagger].is-visible > *:nth-child(4){ transition-delay:.24s; }
[data-stagger].is-visible > *:nth-child(5){ transition-delay:.32s; }
[data-stagger].is-visible > *:nth-child(6){ transition-delay:.40s; }

/* ===== 4. GIẢM CHUYỂN ĐỘNG NẾU NGƯỜI DÙNG YÊU CẦU ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  [data-reveal], [data-stagger] > *{ opacity:1 !important; transform:none !important; }
}