/* ==========================================================================
   ANIMATIONS — hiệu ứng thu hút chú ý và chuyển cảnh khi cuộn trang

   Nguyên tắc để KHÔNG làm chậm trang:
   - Chỉ animate `transform` và `opacity`. Hai thuộc tính này chạy trên GPU,
     trình duyệt không phải tính lại bố cục hay vẽ lại pixel.
     (Animate box-shadow / width / top là nguyên nhân chính gây giật.)
   - Không dùng thư viện ngoài. Toàn bộ là CSS thuần + IntersectionObserver.
   - Hiệu ứng cuộn chạy một lần rồi ngắt theo dõi, không bám sự kiện scroll.
   - Tôn trọng tuỳ chọn "giảm chuyển động" của hệ điều hành (cuối file base.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NÚT CTA — "RUNG RỒI PHÓNG TO", lặp vô hạn

   Một chu kỳ 2.8 giây gồm 3 đoạn:
     0%  → 55%   đứng yên (nghỉ ~1.5s, tránh làm rối mắt khi đang đọc)
     55% → 70%   rung ngang 4 nhịp, biên độ giảm dần
     70% → 100%  phóng to 7% rồi về chỗ cũ

   Rung bằng translateX chứ không xoay: nút dài (nhất là khi full chiều rộng
   trên điện thoại) mà xoay thì hai đầu nhảy rất mạnh, nhìn gãy.
   -------------------------------------------------------------------------- */
@keyframes cta-attention {
  0%, 55%   { transform: translateX(0) scale(1); }
  58%       { transform: translateX(-6px) scale(1); }
  61%       { transform: translateX(6px) scale(1); }
  64%       { transform: translateX(-4px) scale(1); }
  67%       { transform: translateX(4px) scale(1); }
  70%       { transform: translateX(0) scale(1); }
  82%       { transform: translateX(0) scale(1.07); }
  100%      { transform: translateX(0) scale(1); }
}

.btn--pulse {
  animation: cta-attention 2.8s ease-in-out infinite;
  /* Báo trình duyệt chuẩn bị sẵn lớp GPU cho phần tử này */
  will-change: transform;
}
/* Rê chuột vào thì dừng, nhường cho hiệu ứng hover */
.btn--pulse:hover { animation-play-state: paused; }

/* Lệch nhịp giữa các nút để không rung đồng loạt — nhìn sẽ rối */
.btn--pulse[data-cta-delay="1"] { animation-delay: .5s; }
.btn--pulse[data-cta-delay="2"] { animation-delay: 1s; }
.btn--pulse[data-cta-delay="3"] { animation-delay: 1.5s; }

/* Quầng sáng bung ra đúng lúc nút phóng to */
.btn--pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: cta-halo 2.8s ease-out infinite;
  animation-delay: inherit;
  pointer-events: none;
}
@keyframes cta-halo {
  0%, 68% { box-shadow: 0 0 0 0 rgba(255, 218, 0, .6); }
  88%     { box-shadow: 0 0 0 18px rgba(255, 218, 0, 0); }
  100%    { box-shadow: 0 0 0 0 rgba(255, 218, 0, 0); }
}
/* Nút đỏ thì quầng sáng cũng màu đỏ cho hợp */
.btn--primary.btn--pulse::after { animation-name: cta-halo-red; }
@keyframes cta-halo-red {
  0%, 68% { box-shadow: 0 0 0 0 rgba(190, 30, 45, .6); }
  88%     { box-shadow: 0 0 0 18px rgba(190, 30, 45, 0); }
  100%    { box-shadow: 0 0 0 0 rgba(190, 30, 45, 0); }
}

/* .btn mặc định position tĩnh — cần relative để ::after bám đúng */
.btn { position: relative; }

/* --------------------------------------------------------------------------
   1b. NÚT LIÊN HỆ NỔI — rung nhẹ hơn, lệch nhịp nhau
   Nút tròn nhỏ nên dùng xoay + phóng, biên độ nhỏ để không che nội dung.
   -------------------------------------------------------------------------- */
@keyframes fab-attention {
  0%, 60%  { transform: rotate(0) scale(1); }
  64%      { transform: rotate(-9deg) scale(1); }
  68%      { transform: rotate(9deg) scale(1); }
  72%      { transform: rotate(-6deg) scale(1); }
  76%      { transform: rotate(6deg) scale(1); }
  80%      { transform: rotate(0) scale(1); }
  88%      { transform: rotate(0) scale(1.14); }
  100%     { transform: rotate(0) scale(1); }
}

.floating-contact a {
  animation: fab-attention 3.2s ease-in-out infinite;
  will-change: transform;
}
.floating-contact a:nth-child(2) { animation-delay: .4s; }
.floating-contact a:nth-child(3) { animation-delay: .8s; }
/* Rê chuột thì dừng rung, dùng hiệu ứng phóng to của hover */
.floating-contact a:hover { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   2. CHUYỂN CẢNH KHI CUỘN
   Nội dung mặc định LUÔN HIỆN. Chỉ khi JS chạy được mới gắn .js-reveal lên
   thẻ html, lúc đó mới ẩn đi để chờ hiệu ứng. Nhờ vậy nếu JS lỗi hoặc bị
   chặn, trang vẫn đọc được bình thường — không bao giờ trắng nội dung.
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease-out, transform .55s ease-out;
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Hiện lần lượt từng thẻ trong một lưới, tạo cảm giác trôi chảy.
   Độ trễ tối đa 240ms để người cuộn nhanh không phải chờ. */
.js-reveal [data-reveal-delay="1"] { transition-delay: .08s; }
.js-reveal [data-reveal-delay="2"] { transition-delay: .16s; }
.js-reveal [data-reveal-delay="3"] { transition-delay: .24s; }

/* --------------------------------------------------------------------------
   3. TƯƠNG TÁC NHẸ KHI RÊ CHUỘT
   -------------------------------------------------------------------------- */
.teacher-card,
.quote-card,
.gift-card,
.pain-item {
  transition: transform .25s ease, box-shadow .25s ease;
}
.teacher-card:hover,
.quote-card:hover,
.gift-card:hover,
.pain-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Ảnh phóng nhẹ trong khung, khung giữ nguyên kích thước */
.program-photos img,
.score-gallery img,
.result-photo img {
  transition: transform .4s ease;
}
.program-photos img:hover,
.score-gallery img:hover,
.result-photo img:hover {
  transform: scale(1.03);
}
.program-photos, .score-gallery figure, .result-photo { overflow: hidden; border-radius: 12px; }

/* --------------------------------------------------------------------------
   4. SỐ LIỆU Ở TRUST BAR — đếm lên khi cuộn tới (JS lo phần số)
   -------------------------------------------------------------------------- */
.trust-item b { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. CHẾ ĐỘ GIẢM CHUYỂN ĐỘNG
   Khi người dùng bật "Giảm chuyển động" trong cài đặt máy:
   - Bỏ nhịp thở và quầng sáng ở nút (hiệu ứng lặp vô hạn, dễ gây khó chịu)
   - Bỏ chuyển động trượt lên, CHỈ GIỮ mờ dần — không di chuyển nên vô hại
   - Bù lại cho nút CTA một viền sáng tĩnh để vẫn nổi bật
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn--pulse { animation: none; }
  .btn--pulse::after { animation: none; box-shadow: 0 0 0 3px rgba(255, 218, 0, .45); }
  .btn--primary.btn--pulse::after { box-shadow: 0 0 0 3px rgba(190, 30, 45, .45); }

  /* Vẫn mờ dần khi cuộn tới, chỉ bỏ phần trượt lên */
  .js-reveal [data-reveal] { transform: none; }

  /* Thẻ không nhấc lên nữa, đổi sang đổi viền cho biết đang trỏ vào */
  .teacher-card:hover, .quote-card:hover, .gift-card:hover, .pain-item:hover {
    transform: none;
    border-color: var(--red);
  }
  .program-photos img:hover, .score-gallery img:hover, .result-photo img:hover {
    transform: none;
  }
}