/* ============================================================
   animations.css — Bộ hiệu ứng cho nganhangquangngai.com
   Cảm hứng: Originkit (originkit.dev) — viết lại CSS thuần,
   tuân thủ DESIGN_SYSTEM.md v1.3 (Forbes editorial minimalist).

   Nguyên tắc:
   - Chỉ animate opacity + transform (GPU-composited, không reflow
     → mượt trên mobile 3G, không layout thrashing).
   - Không glow, không gradient trang trí, shadow ≤ 8px blur.
   - Tôn trọng prefers-reduced-motion (tắt toàn bộ motion).

   Dùng kèm animations.js (IntersectionObserver + counter + parallax).
   Nạp SAU Tailwind CDN để thắng specificity khi cần.
   ============================================================ */

:root {
  /* Fallback nếu trang chưa khai báo token từ DESIGN_SYSTEM.md */
  --anim-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --anim-duration: 600ms;        /* reveal khi cuộn — chậm hơn hover */
  --anim-duration-hover: 250ms;  /* = --duration-normal */
  --anim-distance: 24px;         /* quãng dịch chuyển khi reveal */
  --anim-accent: var(--accent, #E8825A);
  --anim-ink: var(--ink, #1A1A1A);
}

/* ============================================================
   1. SCROLL REVEAL — [data-anim]
   Dùng ở đâu: mọi section, heading, card, đoạn văn cần xuất hiện
   mượt khi cuộn tới. JS thêm class .anim-in khi element vào viewport.

   Cách dùng:
     <h2 data-anim="fade-up">Lãi suất tháng này</h2>
     <div data-anim="fade">…</div>
     <aside data-anim="slide-left">…</aside>

   Stagger (con xuất hiện lần lượt): đặt data-anim-stagger="80"
   (ms giữa các con) lên PARENT, các con vẫn mang data-anim:
     <div class="grid" data-anim-stagger="80">
       <article data-anim="fade-up">card 1</article>
       <article data-anim="fade-up">card 2</article>
     </div>
   ============================================================ */

[data-anim] {
  opacity: 0;
  transition:
    opacity var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}

[data-anim="fade-up"]     { transform: translateY(var(--anim-distance)); }
[data-anim="fade-down"]   { transform: translateY(calc(var(--anim-distance) * -1)); }
[data-anim="slide-left"]  { transform: translateX(calc(var(--anim-distance) * -1)); }
[data-anim="slide-right"] { transform: translateX(var(--anim-distance)); }
[data-anim="zoom"]        { transform: scale(0.96); }
/* data-anim="fade" và data-anim="words" giữ transform mặc định (none) */

[data-anim].anim-in {
  opacity: 1;
  transform: none;
}

/* Sau khi hiện xong, bỏ will-change để trả bộ nhớ compositor (JS xử lý,
   selector này là fallback an toàn khi transition kết thúc) */
[data-anim].anim-done {
  will-change: auto;
}

/* ============================================================
   1b. HEADLINE WORDS — data-anim="words"
   Dùng ở đâu: H1 hero, H2 section quan trọng. JS tách text thành
   từng từ, mỗi từ trượt lên lần lượt — hiệu ứng "editorial masthead".
   CHỈ dùng cho element chứa text thuần (không có thẻ con).

     <h1 data-anim="words">Tài chính Quảng Ngãi nhìn từ dữ liệu</h1>
   ============================================================ */

[data-anim="words"] { opacity: 1; }              /* parent luôn hiện */
[data-anim="words"] .anim-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 500ms var(--anim-ease),
    transform 500ms var(--anim-ease);
  transition-delay: calc(var(--word-i, 0) * 60ms);
}
[data-anim="words"].anim-in .anim-word {
  opacity: 1;
  transform: none;
}

/* ============================================================
   2. HOVER CARD — .anim-card
   Dùng ở đâu: card lãi suất, card dịch vụ, card báo cáo PDF.
   Lift nhẹ 4px + border đậm lên + shadow đúng chuẩn design system
   (0 2px 8px rgba(0,0,0,0.06) → hover nhích lên 12px blur, vẫn nhẹ).

     <article class="anim-card">…</article>

   Con số trong card muốn đổi màu cam khi hover card:
     <span class="anim-card-number">8,5%</span>
   ============================================================ */

.anim-card {
  border: 1px solid rgba(26, 26, 26, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition:
    transform var(--anim-duration-hover) var(--anim-ease),
    border-color var(--anim-duration-hover) var(--anim-ease),
    box-shadow var(--anim-duration-hover) var(--anim-ease);
}

@media (hover: hover) {
  /* Chỉ áp dụng trên thiết bị có chuột — tránh sticky hover trên mobile */
  .anim-card:hover {
    transform: translateY(-4px);
    border-color: rgba(26, 26, 26, 0.2);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.07);
  }
  .anim-card:hover .anim-card-number {
    color: var(--anim-accent);
  }
}

.anim-card-number {
  transition: color var(--anim-duration-hover) var(--anim-ease);
}

/* Biến thế accent: card nổi bật (VD hàng SHB trong bảng so sánh)
   hover hiện border-left cam 3px — đúng pattern highlight của site */
.anim-card--accent {
  border-left: 3px solid transparent;
}
@media (hover: hover) {
  .anim-card--accent:hover {
    border-left-color: var(--anim-accent);
  }
}

/* ============================================================
   2b. LINK UNDERLINE SWEEP — .anim-link
   Dùng ở đâu: link "Xem chi tiết →", link điều hướng trong bài.
   Gạch chân quét từ trái sang — typography-first, không icon.

     <a class="anim-link" href="…">Xem bảng lãi suất đầy đủ →</a>
   ============================================================ */

.anim-link {
  background-image: linear-gradient(currentColor, currentColor);
  /* gradient ở đây là kỹ thuật vẽ gạch chân 1px, không phải trang trí */
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 300ms var(--anim-ease);
  text-decoration: none;
  padding-bottom: 2px;
}
@media (hover: hover) {
  .anim-link:hover {
    background-size: 100% 1px;
  }
}

/* ============================================================
   3. COUNTER — [data-count-to]
   Dùng ở đâu: số liệu thống kê (số ngân hàng so sánh, lãi suất,
   lượt tải báo cáo…). JS đếm từ 0 lên khi element vào viewport,
   format kiểu Việt (4.200 · 8,5). CSS chỉ lo phần tabular-nums
   để số không nhảy chiều rộng khi đếm.

     <span class="number" data-count-to="18">0</span>
     <span class="number" data-count-to="8.5" data-count-decimals="1">0</span>
   ============================================================ */

[data-count-to] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 1ch; /* tránh giật layout khi từ "0" nở ra số dài */
}

/* ============================================================
   4. PARALLAX NHẸ — [data-parallax]
   Dùng ở đâu: khối trang trí trong hero đầu trang (ảnh mờ, khối màu,
   chart minh họa). JS dịch translate3d theo scroll, tốc độ chậm hơn
   nội dung → tạo chiều sâu. Tự TẮT trên mobile <768px và khi user
   bật reduced-motion (JS xử lý) — mobile 3G không tốn một frame nào.

     <section class="anim-parallax-wrap">
       <div data-parallax data-parallax-speed="0.2">…khối nền…</div>
       <div>…nội dung hero bình thường…</div>
     </section>
   ============================================================ */

.anim-parallax-wrap {
  overflow: hidden; /* che phần element bị dịch ra ngoài */
  position: relative;
}

[data-parallax] {
  will-change: transform;
}

/* ============================================================
   6. HIỆU ỨNG 3D — nhóm mới (v2)
   Tất cả vẫn chỉ dùng transform (GPU-composited). Các hiệu ứng
   theo con trỏ (tilt, depth) chỉ chạy trên thiết bị có chuột
   (hover:hover + pointer:fine) — JS kiểm tra, mobile không tốn gì.
   ============================================================ */

/* ------------------------------------------------------------
   6a. TILT CARD — [data-tilt]
   Dùng ở đâu: card sản phẩm/lãi suất muốn "nghiêng theo chuột"
   kèm vệt sáng specular chạy theo con trỏ (cảm giác thẻ bank vật lý).

     <article class="card" data-tilt data-tilt-max="10">
       <div data-tilt-child>…nội dung nổi lên 30px…</div>
     </article>

   data-tilt-max: độ nghiêng tối đa (độ), mặc định 10.
   data-tilt-child: phần tử con muốn nổi hẳn lên khỏi mặt card.
   ------------------------------------------------------------ */

[data-tilt] {
  position: relative;
  transform-style: preserve-3d;
  /* JS ghi transform trực tiếp khi rê; transition này lo lượt "về 0" */
  transition: transform 500ms var(--anim-ease);
  will-change: transform;
}
[data-tilt].is-tilting {
  transition: none; /* bám chuột tức thì, không lag đuôi */
}

/* Vệt sáng specular — vị trí theo --gx/--gy do JS set */
[data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle 320px at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, 0.14),
    transparent 60%
  );
  opacity: var(--glare, 0);
  transition: opacity 300ms var(--anim-ease);
  z-index: 2;
}

[data-tilt] [data-tilt-child] {
  transform: translateZ(30px);
}

/* ------------------------------------------------------------
   6b. FLIP CARD — .anim-flip
   Dùng ở đâu: card 2 mặt — mặt trước là con số/sản phẩm, mặt sau
   là chi tiết + CTA. Desktop: hover để lật. Touch: JS gắn tap.

     <div class="anim-flip" style="height:260px">
       <div class="anim-flip-inner">
         <div class="anim-flip-front">…</div>
         <div class="anim-flip-back">…</div>
       </div>
     </div>
   ------------------------------------------------------------ */

.anim-flip {
  perspective: 1200px;
}
.anim-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 650ms var(--anim-ease);
}
@media (hover: hover) {
  .anim-flip:hover .anim-flip-inner { transform: rotateY(180deg); }
}
.anim-flip.is-flipped .anim-flip-inner { transform: rotateY(180deg); }

.anim-flip-front,
.anim-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.anim-flip-back {
  transform: rotateY(180deg);
}

/* ------------------------------------------------------------
   6c. RISE 3D — data-anim="rise-3d"
   Dùng ở đâu: biến thể scroll-reveal mới — element "dựng dậy" từ
   mặt phẳng nghiêng như slide keynote. Parent cần class
   .anim-3d-stage để có phối cảnh chung (các con dựng cùng 1 sân khấu).

     <div class="grid anim-3d-stage" data-anim-stagger="110">
       <article data-anim="rise-3d">…</article>
     </div>
   ------------------------------------------------------------ */

.anim-3d-stage {
  perspective: 1100px;
}
[data-anim="rise-3d"] {
  transform: rotateX(22deg) translateY(48px) scale(0.96);
  transform-origin: 50% 100%;
  transition-duration: 800ms; /* chậm hơn reveal thường — thấy rõ chiều sâu */
}

/* ------------------------------------------------------------
   6d. DEPTH SCENE — [data-depth-scene] + [data-depth]
   Dùng ở đâu: hero đầu trang. Các layer trôi ngược chiều con trỏ
   theo hệ số depth → cảm giác không gian nhiều lớp.

     <section class="hero" data-depth-scene>
       <div data-depth="0.4">…layer xa, trôi ít…</div>
       <div data-depth="1">…layer gần, trôi nhiều…</div>
     </section>

   depth 0.2–1.2 hợp lý. JS rAF-throttle, desktop only.
   ------------------------------------------------------------ */

[data-depth-scene] {
  transform-style: preserve-3d;
}
[data-depth] {
  will-change: transform;
  transition: transform 400ms var(--anim-ease); /* mượt khi chuột rời scene */
}
[data-depth-scene].is-tracking [data-depth] {
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  /* khi đang bám chuột: transition dài + rAF liên tục = trôi kiểu "nước" */
}

/* ============================================================
   5. REDUCED MOTION — tôn trọng cài đặt hệ điều hành
   Tắt toàn bộ transition/transform, mọi thứ hiện ngay lập tức.
   JS cũng tự kiểm tra và bỏ qua parallax + counter animation.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim="words"] .anim-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .anim-card,
  .anim-card .anim-card-number,
  .anim-link {
    transition: none !important;
  }
  [data-parallax],
  [data-tilt],
  [data-depth] {
    transform: none !important;
    will-change: auto;
  }
  [data-tilt]::after { display: none; }
  .anim-flip-inner { transition: none !important; }
  /* Flip vẫn dùng được (tap/hover lật tức thì) — chỉ bỏ chuyển động */
}