/* ==========================================================================
   Chuyển động – chỉ animate transform/opacity (mượt 60fps).
   Thông số lấy từ timeline Motion trong Figma.
   ========================================================================== */

/* ---- Hiện dần khi cuộn: chỉ ẩn khi JS đã chạy (class .js trên <html>) ---- */
.js [data-reveal] {
  opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity .45s ease-out, transform .45s var(--ease-out);
  transition-delay: calc(min(var(--i, 0), 4) * 40ms);
}
.js [data-reveal="left"] { transform: translate3d(-14px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(14px, 0, 0); }
.js [data-reveal="zoom"] { transform: scale(.985); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Vào trang (hero): chạy bằng CSS, không chờ JS → không ảnh hưởng LCP ---- */
@keyframes st-rise { from { opacity: 0; transform: translate3d(0, var(--_y, 24px), 0); } to { opacity: 1; transform: none; } }
/* Tiêu đề H1 là phần tử LCP: không bắt đầu từ opacity 0 (trình duyệt bỏ qua phần tử vô hình khi đo LCP) */
@keyframes st-word { from { opacity: .12; transform: translate3d(0, 14px, 0); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes st-in-left { from { opacity: 0; transform: translate3d(-24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes st-in-right { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } }
.anim-rise { animation: st-rise .55s var(--ease-out) both; animation-delay: var(--d, 0s); }
.anim-in-left { animation: st-in-left .8s var(--ease-out) both; animation-delay: var(--d, .3s); }
.anim-in-right { animation: st-in-right .8s var(--ease-out) both; animation-delay: var(--d, .4s); }
/* Tiêu đề hiện từng từ: PHP bọc mỗi từ trong <span class="w" style="--i:n"> */
.words .w { display: inline-block; animation: st-word .6s var(--ease-out) both; animation-delay: calc(.25s + var(--i, 0) * 70ms); }

/* ---- Lơ lửng (robot, video 3D, thẻ danh mục) ---- */
@keyframes st-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(0, -16px, 0) rotate(2deg); } }
@keyframes st-float-alt { 0%, 100% { transform: translate3d(0, 8px, 0) rotate(0); } 50% { transform: translate3d(0, -12px, 0) rotate(-3deg); } }
@keyframes st-bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, var(--_bob, 10px), 0); } }
.anim-float { animation: st-float 2.4s ease-in-out infinite; }
.anim-float-alt { animation: st-float-alt 2.4s ease-in-out infinite; animation-delay: -.6s; }
.anim-bob { animation: st-bob 3s ease-in-out infinite; animation-delay: var(--d, 0s); }

/* ---- "Thở": đổi opacity lớp phát sáng ::after (không animate box-shadow) ---- */
@keyframes st-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.anim-breathe::after { animation: st-breathe 2.4s ease-in-out infinite; }

/* ---- Nảy nhẹ cho nút CTA ---- */
@keyframes st-pulse { 0%, 82%, 100% { transform: scale(1); } 88% { transform: scale(1.06); } 94% { transform: scale(1); } }
.anim-pulse { animation: st-pulse 4.4s var(--ease-out) infinite; animation-delay: 2.2s; }

/* ---- Dải chữ chạy: track nhân đôi nội dung, dịch -50% ---- */
@keyframes st-marquee { to { transform: translate3d(-50%, 0, 0); } }
.marquee__track { animation: st-marquee 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ---- Thanh/cột mọc lên ---- */
.js [data-grow] { transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 100ms); }
.js [data-grow="x"] { transform: scaleX(0); transform-origin: left; }
.js .is-visible [data-grow], .js [data-grow].is-visible { transform: none; }

/* ---- Tạm dừng vòng lặp khi section ra khỏi màn hình (JS gắn .is-paused) ---- */
.is-paused .anim-float, .is-paused .anim-float-alt, .is-paused .anim-bob,
.is-paused .anim-pulse, .is-paused .anim-breathe::after, .is-paused .marquee__track,
.is-paused.marquee .marquee__track { animation-play-state: paused; }

/* ---- Người dùng bật "giảm chuyển động" ---- */
@media (prefers-reduced-motion: reduce) {
  .anim-float, .anim-float-alt, .anim-bob, .anim-pulse, .anim-breathe::after, .marquee__track { animation: none !important; }
  .words .w, .anim-rise, .anim-in-left, .anim-in-right { animation: none !important; opacity: 1; transform: none; filter: none; }
  .js [data-reveal], .js [data-grow] { opacity: 1; transform: none; transition: none; }
}