/* ============================================
   SECURR — MOTION / ANIMATION LAYER
   --------------------------------------------
   Khai báo bằng attribute trong markup:
     data-anim="fade-up"        fade | fade-up | fade-down | fade-left
                                fade-right | zoom-in | clip-up | blur-in | text
     data-anim-delay="200"      ms
     data-stagger               container → children tự động stagger
     data-parallax="0.15"       cường độ parallax (0.05 – 0.4)
     data-count="500"           đếm số khi vào viewport

   Trạng thái ẩn CHỈ áp dụng khi <html class="anim-ready"> (do JS gắn ở
   wp_head). Không JS → nội dung hiển thị bình thường, không bị mất.
   ============================================ */

/* ---------------------------------------------
   0. NÚM CHỈNH TỐC ĐỘ
   Muốn nhanh/chậm toàn site thì sửa 3 giá trị này là đủ.
   --------------------------------------------- */
:root {
  --anim-dur:     1.2s;    /* thời lượng fade / slide / clip   */
  --anim-dur-text: 1.3s;   /* thời lượng trượt từng dòng chữ   */
  --anim-step:    120ms;   /* khoảng cách giữa các dòng chữ    */

  --anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------
   1. BASE — trạng thái trước khi vào viewport
   --------------------------------------------- */
.anim-ready [data-anim] {
  opacity: 0;
  transition:
    opacity   var(--anim-dur) var(--anim-ease),
    transform var(--anim-dur) var(--anim-ease),
    filter    var(--anim-dur) var(--anim-ease);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}

.anim-ready [data-anim="fade-up"]    { transform: translate3d(0, 44px, 0); }
.anim-ready [data-anim="fade-down"]  { transform: translate3d(0, -36px, 0); }
.anim-ready [data-anim="fade-left"]  { transform: translate3d(56px, 0, 0); }
.anim-ready [data-anim="fade-right"] { transform: translate3d(-56px, 0, 0); }
.anim-ready [data-anim="zoom-in"]    { transform: scale(0.92); }
.anim-ready [data-anim="blur-in"]    { filter: blur(14px); transform: translate3d(0, 20px, 0); }

/* Clip reveal — dùng cho khung ảnh / khối lớn.
   ⚠ clip-path đặt lên phần tử CON, KHÔNG đặt lên chính phần tử mang data-anim.
   Chrome tính vùng giao của IntersectionObserver theo visual rect (đã trừ
   clip-path). Phần tử bị clip 100% sẽ luôn báo isIntersecting = false → không
   bao giờ nhận .is-in → nội dung mất hẳn. Vì vậy phần tử được observe phải
   luôn "nhìn thấy được", chỉ con của nó mới bị clip.
   → clip-up / clip-left cần một khung bọc có ít nhất 1 con (vd .feature-img > img). */
.anim-ready [data-anim="clip-up"],
.anim-ready [data-anim="clip-left"] { opacity: 1; }

.anim-ready [data-anim="clip-up"]   > *,
.anim-ready [data-anim="clip-left"] > * {
  transition: clip-path var(--anim-dur) var(--anim-ease);
  transition-delay: var(--anim-delay, 0ms);
}
.anim-ready [data-anim="clip-up"]   > * { clip-path: inset(100% 0 0 0); }
.anim-ready [data-anim="clip-left"] > * { clip-path: inset(0 100% 0 0); }

.anim-ready [data-anim="clip-up"].is-in   > *,
.anim-ready [data-anim="clip-left"].is-in > * { clip-path: inset(0 0 0 0); }

/* ---- Trạng thái đã vào viewport ---- */
.anim-ready [data-anim].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Bỏ will-change sau khi chạy xong để đỡ tốn GPU */
.anim-ready [data-anim].is-done { will-change: auto; }

/* ---------------------------------------------
   2. TEXT REVEAL — từng dòng trượt lên sau mask
   data-anim="text"  (JS tự bọc dòng)
   --------------------------------------------- */
.anim-ready [data-anim="text"] { opacity: 1; }

/* .hero-title đã có animation fadeUp trong main.css — tắt đi để không đè
   lên hiệu ứng mask từng dòng (nếu không sẽ bị nháy ở giây 0.45). */
.anim-ready .hero-title[data-anim="text"] {
  animation: none;
  opacity: 1;
}

.anim-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;   /* tránh cắt phần dưới của chữ có descender */
  margin-bottom: -0.08em;
}
.anim-line__i {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform var(--anim-dur-text) var(--anim-ease);
  transition-delay: calc(var(--anim-delay, 0ms) + var(--i, 0) * var(--anim-step));
}
.anim-ready [data-anim="text"].is-in .anim-line__i { transform: none; }

/* ---------------------------------------------
   3. STAGGER — container tự rải delay cho con
   --------------------------------------------- */
.anim-ready [data-stagger] > [data-anim] {
  transition-delay: calc(var(--anim-delay, 0ms) + var(--i, 0) * var(--stagger-step, 145ms));
}

/* ---------------------------------------------
   4. PARALLAX
   --------------------------------------------- */
[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* Khung chứa ảnh parallax: ảnh cao dư 32% (16% mỗi bên) để có chỗ trượt
   mà không hở mép. JS kẹp biên độ ở 15% nên luôn nằm trong vùng dư này. */
.parallax-media { position: relative; overflow: hidden; }
.parallax-media img {
  position: absolute;
  top: -16%; left: 0; right: 0;
  width: 100%; height: 132%;
  object-fit: cover;
}

/* Ảnh parallax KHÔNG transition transform (sẽ làm parallax trễ, giật),
   nhưng vẫn giữ transition cho clip-path để hiệu ứng clip-left chạy mượt.
   Cũng ghi đè hover-scale của main.css — parallax thay cho hiệu ứng đó. */
.parallax-media img[data-parallax] {
  transition: clip-path var(--anim-dur) var(--anim-ease);
}
.case-card:hover .case-img-wrap img[data-parallax],
.feature-img:hover img[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

/* ---------------------------------------------
   5. HERO / BANNER — chuyển động nền
   --------------------------------------------- */

/* Nhịp vào của hero — ghi đè timing gốc trong main.css cho khớp tốc độ chung.
   (main.css giữ nguyên, mọi thứ liên quan chuyển động gom về file này) */
.hero-eyebrow { animation: fadeUp 0.95s 0.35s forwards; }
.hero-desc    { animation: fadeUp 1.05s 0.85s forwards; }
.hero-actions { animation: fadeUp 1.05s 1.10s forwards; }
.hero-title   { --anim-delay: 450ms; }
.scroll-cue   { animation: fadeUp 1s 1.9s forwards; }

/* Lưới nền trôi chậm — dùng chung cho hero, page-header và contact hero */
.hero-left::before,
.page-header::before,
.contact-hero-left::before,
.contact-hero-right::before {
  animation: gridDrift 26s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 60px 60px, 60px 60px; }
}

/* Chữ chìm "CONTACT" ở banner trang liên hệ trôi nhẹ */
.contact-hero-left::after {
  animation: contactWatermark 20s ease-in-out infinite;
}
@keyframes contactWatermark {
  0%, 100% { transform: translate3d(0, 0, 0);      opacity: 1; }
  50%      { transform: translate3d(-22px, -12px, 0); opacity: 0.6; }
}

/* Quầng sáng đỏ thở nhẹ phía sau tiêu đề */
.hero-left::after {
  content: '';
  position: absolute;
  top: 12%; left: -10%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(176,28,46,0.28) 0%, transparent 62%);
  filter: blur(40px);
  pointer-events: none;
  animation: heroGlow 9s ease-in-out infinite;
}
@keyframes heroGlow {
  0%, 100% { opacity: 0.55; transform: translate3d(0, 0, 0) scale(1); }
  50%      { opacity: 1;    transform: translate3d(30px, -24px, 0) scale(1.16); }
}

/* Ảnh hero: ken burns chạy liên tục (thay cho zoom-on-hover) */
.hero-right img {
  animation: kenBurns 24s ease-in-out infinite alternate;
  transition: none;
}
.hero-right:hover img { transform: none; }
@keyframes kenBurns {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.5%, -1.5%, 0); }
}

/* Vạch quét kiểu camera an ninh chạy dọc ảnh hero */
.hero-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,0.10) 46%,
    rgba(176,28,46,0.34)   50%,
    rgba(255,255,255,0.10) 54%,
    transparent 100%
  );
  background-size: 100% 220px;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: heroScan 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  z-index: 1;
}
@keyframes heroScan {
  0%        { background-position: 0 -240px; opacity: 0; }
  12%       { opacity: 1; }
  88%       { opacity: 1; }
  100%      { background-position: 0 calc(100% + 240px); opacity: 0; }
}

/* Badge & live dot nổi lên trên vạch quét */
.hero-badge, .live-dot { z-index: 2; }

/* Badge số liệu trôi nhẹ */
.hero-badge { animation: slideRight 1s 1.35s forwards, badgeFloat 7s 2.4s ease-in-out infinite; }
@keyframes badgeFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

/* Mũi tên gợi ý cuộn xuống */
.scroll-cue {
  position: absolute;
  bottom: 28px; left: 80px;
  display: flex; align-items: center; gap: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  z-index: 2;
  opacity: 0;
  animation: fadeUp 0.8s 1.5s forwards;
}
.scroll-cue::after {
  content: '';
  width: 46px; height: 1px;
  background: var(--red);
  transform-origin: left;
  animation: cueSlide 2.2s var(--anim-ease) infinite;
}
@keyframes cueSlide {
  0%       { transform: scaleX(0.2); opacity: 0.3; }
  50%      { transform: scaleX(1);   opacity: 1; }
  100%     { transform: scaleX(0.2); opacity: 0.3; }
}

/* ---------------------------------------------
   6. MARQUEE — phản ứng với tốc độ cuộn
   --------------------------------------------- */
.marquee-track {
  animation-duration: var(--marquee-dur, 30s);
  animation-play-state: var(--marquee-state, running);
}
.marquee-wrap:hover .marquee-track { --marquee-state: paused; }

/* ---------------------------------------------
   7. CTA BANNER — nền chuyển động
   Lưu ý: .cta-banner::before đã được main.css dùng cho chữ chìm "SECURR",
   nên ở đây chỉ THÊM animation cho nó, phần sọc + vệt sáng dồn vào ::after.
   --------------------------------------------- */

/* Chữ chìm trôi & thở nhẹ */
.cta-banner::before {
  animation: watermarkDrift 22s ease-in-out infinite;
}
@keyframes watermarkDrift {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-46%, -50%) scale(1.06); opacity: 0.7; }
}

/* Sọc chéo trôi + vệt sáng quét ngang (gộp 1 pseudo-element) */
.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.10) 50%, transparent 62%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 22px);
  background-size: 300% 100%, 62px 62px;
  background-repeat: no-repeat, repeat;
  background-position: -200% 0, 0 0;
  animation: ctaMotion 12s linear infinite;
}
@keyframes ctaMotion {
  from { background-position: -200% 0, 0 0; }
  to   { background-position:  200% 0, 62px 62px; }
}

/* ---------------------------------------------
   8. SECTION — gạch đỏ kẻ ngang khi vào viewport
   Dùng ::after (::before đã bị .label và .cta-banner chiếm).
   Chỉ gắn lên phần tử block chưa dùng ::after.
   --------------------------------------------- */
[data-anim-rule] {
  position: relative;
  padding-top: 26px;
}
[data-anim-rule]::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 72px; height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--anim-ease) var(--anim-delay, 0ms);
}
[data-anim-rule].is-in::after { transform: scaleX(1); }

/* ---------------------------------------------
   9. CARD HOVER
   Lưu ý: .service-card, .info-card, .stat-cell… nằm trong grid dùng
   "gap 1px + background" để giả viền. KHÔNG dịch chuyển (translate) card
   khi hover — sẽ hở ra nền xám của grid. Chỉ đổi nội dung bên trong.
   --------------------------------------------- */

/* Ảnh bài viết phóng nhẹ */
.blog-card { overflow: hidden; }
.blog-card img { transition: transform 0.9s var(--anim-ease); }
.blog-card:hover img { transform: scale(1.06); }

/* Số thứ tự & icon của service card */
.service-card .service-num,
.service-card .service-icon {
  transition: transform 0.5s var(--anim-ease), color 0.4s ease;
}
.service-card:hover .service-num  { transform: translate3d(0, -6px, 0); }
.service-card:hover .service-icon { transform: translate3d(0, -4px, 0) scale(1.06); }

/* Card văn phòng (đứng riêng, không nằm trong grid viền) — nâng nhẹ được */
.office-card {
  transition: transform 0.5s var(--anim-ease), box-shadow 0.5s var(--anim-ease);
}
.office-card:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------
   10. COUNTER
   --------------------------------------------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------
   11. NAV — ẩn khi cuộn xuống, hiện khi cuộn lên
   --------------------------------------------- */
.nav {
  transition: transform 0.45s var(--anim-ease), box-shadow 0.3s ease, background 0.3s ease;
}
.nav.nav-hidden { transform: translate3d(0, -104%, 0); }

/* Thanh tiến trình đọc trang */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: var(--red);
  z-index: 1000;
  pointer-events: none;
}

/* ---------------------------------------------
   12. RESPONSIVE
   --------------------------------------------- */
@media (max-width: 1024px) {
  .scroll-cue { left: 32px; }
}
@media (max-width: 768px) {
  .scroll-cue { display: none; }
  .hero-right::after { animation-duration: 8s; }
  /* Giảm biên độ dịch chuyển trên mobile cho mượt */
  .anim-ready [data-anim="fade-up"]    { transform: translate3d(0, 26px, 0); }
  .anim-ready [data-anim="fade-left"]  { transform: translate3d(28px, 0, 0); }
  .anim-ready [data-anim="fade-right"] { transform: translate3d(-28px, 0, 0); }
  [data-parallax] { transform: none !important; }
}

/* ---------------------------------------------
   13. REDUCED MOTION — tắt toàn bộ chuyển động
   --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .anim-ready [data-anim],
  .anim-ready [data-anim="clip-up"]   > *,
  .anim-ready [data-anim="clip-left"] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .anim-line__i { transform: none !important; transition: none !important; }
  [data-anim-rule]::before { transform: scaleX(1) !important; }
  [data-parallax] { transform: none !important; }

  .hero-left::before,
  .hero-left::after,
  .hero-right img,
  .hero-right::after,
  .hero-badge,
  .scroll-cue,
  .scroll-cue::after,
  .page-header::before,
  .contact-hero-left::before,
  .contact-hero-left::after,
  .contact-hero-right::before,
  .cta-banner::before,
  .cta-banner::after,
  .marquee-track,
  .live-dot-circle {
    animation: none !important;
  }
  .scroll-cue { opacity: 1; }
  .nav.nav-hidden { transform: none; }
  html { scroll-behavior: auto; }
}