/* ==========================================================================
   motion.css — chuyển động của trang. Điều khiển bằng js/motion.js.
   Nguyên tắc:
   · Chỉ animate opacity + thuộc tính riêng `translate` / `scale` (không đụng `transform` có sẵn của phần tử).
   · Hover dùng `transform`; vòng lặp nhàn rỗi dùng `translate`/`opacity` → không đè nhau.
   · Hiệu ứng con (pop số, vẽ mũi tên, tick…) là @keyframes chạy khi phần tử cha có `.is-in`; cha đang ẩn (opacity 0)
     trước đó nên con không cần trạng thái ẩn riêng → tắt JS / giảm chuyển động thì mọi thứ vẫn hiện.
   · Mặc định chạy đủ hiệu ứng trên MỌI máy, kể cả máy bật "giảm chuyển động" của hệ điều hành (công tắc RESPECT_REDUCED_MOTION ở <head> index.html = false).
   · Chế độ êm (mục 3): khi bật công tắc đó trên máy giảm chuyển động, hoặc trình duyệt cũ chưa có `translate` → chỉ mờ-hiện nhẹ, không dịch chuyển/phóng to/vòng lặp.
   · Chuyển động đầy đủ cần `@supports (translate: 0)`.
   Chỉnh mạnh/nhẹ: --reveal-dist, --dur-reveal, --stagger trong css/tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hover / trạng thái tĩnh (không phụ thuộc JS)
   -------------------------------------------------------------------------- */
/* Header: bóng khi đã cuộn + thanh tiến độ + link đang xem */
.site-header { transition: box-shadow var(--duration-normal) var(--ease-standard); }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(11, 29, 71, 0.09); }
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--viai-orange), var(--viai-blue-bright));
  transform: scaleX(0); transform-origin: 0 50%;
}
.nav__menu a[aria-current] { color: var(--viai-blue-bright); }
.nav__menu a[aria-current]::after { transform: scaleX(1); }

/* Nút cam: vệt sáng quét + mũi tên nhích phải */
.btn--orange { position: relative; overflow: hidden; isolation: isolate; }
.btn--orange::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.34) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform 0.75s var(--ease-out-expo);
}
.btn--orange:hover::after { transform: translateX(130%); }
.btn .icon { transition: translate var(--duration-fast) var(--ease-standard); }
.btn:hover .icon:not(.btn__spinner) { translate: 3px 0; }

/* Dải số liệu (tabular-nums: chữ số cùng bề rộng nên số đang đếm không rung) */
.stat__num { font-variant-numeric: tabular-nums; }
.stat__ico { transition: transform 0.35s var(--ease-spring); }
.stat:hover .stat__ico { transform: scale(1.08); }

/* Thẻ nỗi đau: nâng lên + bóng đỏ đậm hơn; huy hiệu "!" lắc nhẹ (hover dùng `transform`, reveal/pop dùng `translate`/`scale` nên không đè nhau) */
.pain-card {
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal), border-color var(--duration-normal);
}
.pain-card:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(217, 45, 32, 0.2); border-color: #FDA29B; }
.pain-card__alert { transition: transform 0.35s var(--ease-spring); }
.pain-card:hover .pain-card__alert { transform: scale(1.12) rotate(-8deg); }

/* Từ giao việc → kết quả: thẻ nâng nhẹ, ảnh zoom bằng `scale` (ảnh lật dùng `transform: scaleX(-1)` nên không được đụng vào) */
.flow-card { transition: transform var(--duration-normal) var(--ease-standard); }
.flow-card:hover { transform: translateY(-4px); }
.flow-card__media > img { transition: scale 0.7s var(--ease-standard); }
.flow-card:hover .flow-card__media > img { scale: 1.03; }

/* Logo đối tác: nhấc nhẹ (marquee có padding-block để không bị cắt) */
.marquee__track img { transition: transform var(--duration-normal) var(--ease-standard), filter var(--duration-normal); }
.marquee__track li:hover img { transform: translateY(-3px); filter: drop-shadow(0 8px 12px rgba(11, 29, 71, 0.16)); }

/* Gói triển khai */
.plan { transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal); }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.plan--featured:hover { box-shadow: 0 28px 64px rgba(243, 107, 38, 0.26); }

/* Quy trình */
.step__num { transition: transform 0.35s var(--ease-spring); }
.step:hover .step__num { transform: scale(1.1); }
.step__arrow { transition: transform var(--duration-normal) var(--ease-standard); }
.step:hover .step__arrow { transform: translateX(4px); }

/* FAQ */
.faq-item:hover { border-color: #cdd9ee; }

/* Vòng lặp nằm ngoài màn hình thì dừng (js/motion.js gắn .is-off) — tiết kiệm GPU/pin */
.is-off, .is-off *, .is-off::before, .is-off::after, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* Khi công tắc tôn trọng giảm chuyển động bật (<html class="reduce-motion">): không animation lặp (base.css chỉ rút ngắn thời lượng nên vòng lặp vô hạn sẽ nhấp nháy) */
.reduce-motion .ui__spin { animation: none; }
.reduce-motion .scroll-progress { transition: none; }

/* In ra giấy / PDF: hiện đủ nội dung */
@media print {
  [data-anim] { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; transition: none !important; }
  .scroll-progress { display: none; }
}

/* --------------------------------------------------------------------------
   2. Chuyển động đầy đủ (cần trình duyệt hỗ trợ `translate`; nếu công tắc tôn trọng giảm chuyển động bật thì mục 3 tắt phần CSS thuần ở đây)
   -------------------------------------------------------------------------- */
/* Khung kết quả (mục "AI Agent trong quy trình thực tế"): viền sáng xoay + quầng sáng thở + vệt sáng quét. Luôn chạy (công tắc RESPECT_REDUCED_MOTION=false); tắt khi bật công tắc nhờ .reduce-motion; dừng khi khối ra khỏi màn hình (.is-off) */
@property --case-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes case-border { to { --case-a: 360deg; } }
@keyframes case-glow {
  0%, 100% { box-shadow: 0 14px 34px rgba(21, 83, 224, 0.16), 0 0 0 0 rgba(86, 170, 255, 0); }
  50% { box-shadow: 0 18px 46px rgba(21, 83, 224, 0.3), 0 0 32px 3px rgba(86, 170, 255, 0.42); }
}
@keyframes case-sheen { 0% { translate: -130% 0; } 40%, 100% { translate: 130% 0; } }
.case__result { animation: case-border 6s linear infinite, case-glow 3.6s ease-in-out infinite; }
.case__result::before { animation: case-sheen 7s ease-in-out 1.4s infinite; }

@supports (translate: 0) {

  /* ---- 2a. Reveal khi cuộn: js/motion.js gắn data-anim (ẩn) → thêm .is-in (hiện) → gỡ data-anim khi xong ---- */
  [data-anim] {
    opacity: 0;
    transition:
      opacity var(--dur-reveal) var(--ease-out-expo) var(--d, 0ms),
      translate var(--dur-reveal) var(--ease-out-expo) var(--d, 0ms),
      scale var(--dur-reveal) var(--ease-out-expo) var(--d, 0ms),
      filter var(--dur-reveal) var(--ease-out-expo) var(--d, 0ms);
  }
  [data-anim="up"], [data-anim="left"], [data-anim="right"] { translate: 0 var(--reveal-dist); }
  [data-anim="blur"] { translate: 0 16px; filter: blur(8px); }
  [data-anim="zoom"] { scale: 0.94; }
  @media (min-width: 901px) {
    /* Trượt ngang chỉ ở màn rộng (màn hẹp mà trượt ngang sẽ tràn trang) */
    [data-anim="left"] { translate: calc(var(--reveal-dist) * -1.4) 0; }
    [data-anim="right"] { translate: calc(var(--reveal-dist) * 1.4) 0; }
  }
  [data-anim].is-in { opacity: 1; translate: none; scale: none; filter: none; }

  /* ---- 2b. Keyframes dùng chung ---- */
  @keyframes m-pop { from { opacity: 0; scale: 0.5; } }
  @keyframes m-rise { from { opacity: 0; translate: 0 14px; } }
  @keyframes m-hero-up { from { opacity: 0; translate: 0 26px; } }
  @keyframes m-hero-side { from { opacity: 0; translate: 44px 0; } }
  @keyframes m-nav-in { from { opacity: 0; translate: 0 -14px; } }
  @keyframes m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes m-ring-white {
    from { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 0 rgba(255, 255, 255, 0.5); }
    to { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 20px rgba(255, 255, 255, 0); }
  }
  @keyframes m-line-y { from { scale: 1 0; } }
  @keyframes m-line-x { from { scale: 0 1; } }
  @keyframes m-arrow-wipe { from { clip-path: inset(-2px 100% -2px -2px); } to { clip-path: inset(-2px -2px -2px -2px); } }
  @keyframes m-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
  @keyframes m-waves { to { translate: 24px -10px; } }

  /* ---- 2c. Header + Hero: chạy ngay khi tải trang (CSS thuần, không chờ JS; fill backwards nên không kẹt ẩn) ---- */
  .js-ready .site-header { animation: m-nav-in 0.6s var(--ease-out-expo) backwards; }
  .js-ready .hero__copy h1 { animation: m-hero-up 0.7s var(--ease-out-expo) backwards; }
  .js-ready .hero__lead { animation: m-hero-up 0.8s var(--ease-out-expo) 0.12s backwards; }
  .js-ready .hero__actions .btn:nth-child(1) { animation: m-hero-up 0.8s var(--ease-out-expo) 0.24s backwards; }
  .js-ready .hero__actions .btn:nth-child(2) { animation: m-hero-up 0.8s var(--ease-out-expo) 0.32s backwards; }
  .js-ready .hero__trust li:nth-child(1) { animation: m-hero-up 0.8s var(--ease-out-expo) 0.44s backwards; }
  .js-ready .hero__trust li:nth-child(2) { animation: m-hero-up 0.8s var(--ease-out-expo) 0.52s backwards; }
  @media (min-width: 901px) {
    /* Khung demo vào từ phải. Animate .tg-wrap (không phải .hero__visual vì nó là container-query); không blur để khung demo không nặng */
    .js-ready .tg-wrap { animation: m-hero-side 0.95s var(--ease-out-expo) 0.3s backwards; }
  }
  /* Ghi chú viết tay hiện sau cùng, mũi tên tự vẽ (path có pathLength="1") */
  .js-ready .hero__note { animation: m-rise 0.6s var(--ease-out-expo) 1.1s backwards; }
  .js-ready .hero__note-arrow path { stroke-dasharray: 1 2; animation: m-draw 0.9s ease-out 1.35s backwards; }

  /* ---- 2d. Hiệu ứng con theo từng section ---- */
  /* Dải số liệu: icon pop + sóng trắng, đường kẻ mọc ra (số đếm do JS) */
  .stat.is-in .stat__ico {
    animation: m-pop 0.7s var(--ease-spring) calc(var(--d, 0ms) + 100ms) backwards, m-ring-white 1.1s ease-out calc(var(--d, 0ms) + 700ms);
  }
  .stat.is-in::before { animation: m-line-y 0.9s var(--ease-out-expo) calc(var(--d, 0ms) + 200ms) backwards; }
  @media (max-width: 760px) { .stat.is-in::before { animation-name: m-line-x; } }

  /* Nỗi đau: huy hiệu "!" pop rồi phát vòng sóng đỏ lặp lại (so le theo --i); dải sọc cảnh báo trên đầu mục chạy chậm (dừng khi .pain ngoài màn hình → .is-off) */
  @keyframes m-ring-alert {
    from { box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(217, 45, 32, 0.4), 0 0 0 3px rgba(217, 45, 32, 0.5); }
    70%, to { box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(217, 45, 32, 0.4), 0 0 0 18px rgba(217, 45, 32, 0); }
  }
  @keyframes m-tape { to { background-position: 24px 0; } }
  .pain-card.is-in .pain-card__alert {
    animation:
      m-pop 0.55s var(--ease-spring) calc(var(--d, 0ms) + 250ms) backwards,
      m-ring-alert 2.6s ease-out calc(var(--d, 0ms) + 900ms + var(--i, 0) * 350ms) infinite;
  }
  .pain::before { animation: m-tape 2.4s linear infinite; }

  /* Minh họa quy trình: bước "Trước đây" hiện lần lượt → mũi tên pop → bước "Với AI Agent" chạy lần lượt (như Agent đang xử lý) → thẻ kết quả nháp → nhân sự kiểm tra */
  .case.is-in .case__cost { animation: m-rise 0.5s var(--ease-out-expo) calc(var(--d, 0ms) + 850ms) backwards; }
  .case.is-in .case__before .case__steps li { animation: m-rise 0.5s var(--ease-out-expo) calc(var(--d, 0ms) + 350ms + var(--k, 0) * 110ms) backwards; }
  .case.is-in .case__arrow { animation: m-pop 0.5s var(--ease-spring) calc(var(--d, 0ms) + 850ms) backwards; }
  .case.is-in .case__steps--ai li { animation: m-rise 0.5s var(--ease-out-expo) calc(var(--d, 0ms) + 1050ms + var(--k, 0) * 140ms) backwards; }
  .case.is-in .case__result { animation: m-rise 0.6s var(--ease-out-expo) calc(var(--d, 0ms) + 1750ms) backwards, case-border 6s linear infinite, case-glow 3.6s ease-in-out infinite; }
  .case.is-in .case__review { animation: m-rise 0.5s var(--ease-out-expo) calc(var(--d, 0ms) + 2000ms) backwards; }

  /* Từ giao việc → kết quả: số, khung UI giả lập và từng dòng hiện lần lượt như đang xử lý */
  .flow-card.is-in .flow-card__num { animation: m-pop 0.6s var(--ease-spring) calc(var(--d, 0ms) + 450ms) backwards; }
  .flow-card.is-in .ui { animation: m-rise 0.6s var(--ease-out-expo) calc(var(--d, 0ms) + 350ms) backwards; }
  .flow-card.is-in .ui__rows li { animation: m-rise 0.5s var(--ease-out-expo) calc(var(--d, 0ms) + 650ms + var(--k, 0) * 140ms) backwards; }

  /* Gói triển khai: icon pop, danh sách tick lần lượt, badge nổi bật; gói nổi bật có vòng sáng cam thở nhẹ */
  .plan.is-in .plan__ico { animation: m-pop 0.6s var(--ease-spring) calc(var(--d, 0ms) + 150ms) backwards; }
  .plan.is-in .plan__badge { animation: m-rise 0.5s var(--ease-out-expo) calc(var(--d, 0ms) + 250ms) backwards; }
  .plan.is-in .plan__list li { animation: m-rise 0.45s var(--ease-out-expo) calc(var(--d, 0ms) + 320ms + var(--k, 0) * 80ms) backwards; }
  .plan--featured::before {
    content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 3px rgba(243, 107, 38, 0.22), 0 0 44px rgba(243, 107, 38, 0.38);
    animation: m-glow 3.8s ease-in-out infinite;
  }

  /* Quy trình: số bước pop lần lượt, mũi tên cam quét nối sang bước kế tiếp */
  .step.is-in .step__num { animation: m-pop 0.55s var(--ease-spring) calc(var(--d, 0ms) + 150ms) backwards; }
  .step.is-in .step__arrow { animation: m-arrow-wipe 0.6s var(--ease-out-expo) calc(var(--d, 0ms) + 420ms) backwards; }

  /* CTA: tick lần lượt, ô nhập vào lần lượt; sóng nền trôi qua lại (mở rộng khung để không lộ mép) */
  .cta__points.is-in li { animation: m-rise 0.5s var(--ease-out-expo) calc(var(--d, 0ms) + 250ms + var(--k, 0) * 90ms) backwards; }
  .lead-form.is-in .field { animation: m-rise 0.5s var(--ease-out-expo) calc(var(--d, 0ms) + 250ms + var(--k, 0) * 55ms) backwards; }
  .cta__waves { inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); animation: m-waves 18s ease-in-out infinite alternate; }

  /* Album: 3 ảnh vào lần lượt (trồi lên + phóng nhẹ), mũi tên pop, chấm hiện lần lượt; mỗi ảnh "thở" bằng zoom chậm lệch pha nhau
     (phóng từ góc trên-trái để giữ logo ViAI; hover dùng transform nên cộng dồn được); chấm đang xem được lấp dần theo thời gian tự chạy */
  @keyframes m-album-in { from { opacity: 0; translate: 0 28px; scale: 0.9; } }
  @keyframes album-kb { from { scale: 1; } to { scale: 1.07; } }
  @keyframes album-fill { from { scale: 0 1; } to { scale: 1 1; } }
  .album.is-in .album__item { animation: m-album-in 0.85s var(--ease-out-expo) calc(var(--d, 0ms) + 150ms + var(--k, 0) * 140ms) backwards; }
  .album.is-in .album__item img { animation: album-kb 9s ease-in-out infinite alternate; animation-delay: calc(var(--k, 0) * -3s); }
  .album.is-in .album__btn { animation: m-pop 0.55s var(--ease-spring) calc(var(--d, 0ms) + 700ms) backwards; }
  .album.is-in .album__dot { animation: m-rise 0.45s var(--ease-out-expo) calc(var(--d, 0ms) + 800ms + var(--k, 0) * 70ms) backwards; }
  .album:not(.no-auto) .album__dot[aria-current="true"]::before { background: #D3D9E8; }
  .album:not(.no-auto) .album__dot[aria-current="true"]::after { width: 32px; transform-origin: 0 50%; animation: album-fill var(--auto, 4.5s) linear forwards; }
  .album.is-paused:not(.no-auto) .album__dot[aria-current="true"]::after { animation-play-state: paused; }

}

/* --------------------------------------------------------------------------
   3. Chế độ êm (<html class="motion-calm">, do js/motion.js bật): trình duyệt chưa có `translate`, hoặc công tắc tôn trọng giảm chuyển động bật trên máy giảm chuyển động.
   Chỉ mờ-hiện — không dịch chuyển, phóng to, nảy, nổi lơ lửng hay vòng lặp — nên vẫn có nhịp xuất hiện mà không gây khó chịu.
   `!important`: để thắng luật rút ngắn mọi transition/animation về 0.01ms của base.css khi reduced-motion.
   -------------------------------------------------------------------------- */
.motion-calm [data-anim] {
  opacity: 0;
  transition: opacity 0.7s ease var(--d, 0ms) !important;
}
.motion-calm [data-anim].is-in { opacity: 1; }

/* Công tắc tôn trọng giảm chuyển động đang bật: tắt hết animation CSS thuần của mục 2, riêng phần mở đầu hero chỉ mờ-hiện.
   (.reduce-motion và .js-ready cùng nằm trên <html> nên viết liền nhau, không có dấu cách) */
@keyframes m-fade { from { opacity: 0; } }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; }
.reduce-motion.js-ready .site-header { animation: m-fade 0.6s ease backwards !important; }
.reduce-motion.js-ready .hero__copy h1 { animation: m-fade 0.8s ease backwards !important; }
.reduce-motion.js-ready .hero__lead { animation: m-fade 0.8s ease 0.15s backwards !important; }
.reduce-motion.js-ready .hero__actions .btn { animation: m-fade 0.8s ease 0.3s backwards !important; }
.reduce-motion.js-ready .hero__trust li { animation: m-fade 0.8s ease 0.45s backwards !important; }
.reduce-motion.js-ready .tg-wrap { animation: m-fade 0.9s ease 0.5s backwards !important; }