/* ============================================================
   HIGRO — motion.css
   Hệ thống motion theo motion-concept mục 3.0–3.1.
   Nguyên tắc: chỉ transform/opacity; reveal chạy 1 lần;
   mọi nội dung vẫn đọc được khi tắt JS (trạng thái ẩn chỉ được
   áp khi JS đã chạy — html có class .js).
   ============================================================ */

/* ---------- Reveal on scroll ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 80ms);
}
html.js [data-reveal].in { opacity: 1; transform: translateY(0); }

/* ---------- Hero: headline hiện theo từng dòng (mặt nạ) ---------- */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line-mask > span {
  display: block;
  transform: translateY(0);
}
html.js .line-mask > span {
  transform: translateY(112%);
  transition: transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms + 80ms);
}
html.js body.loaded .line-mask > span { transform: translateY(0); }
html.js .hero-fade { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
html.js body.loaded .hero-fade { opacity: 1; transform: translateY(0); }
html.js .hero-fade.d1 { transition-delay: 420ms; }
html.js .hero-fade.d2 { transition-delay: 540ms; }
html.js .hero-fade.d3 { transition-delay: 660ms; }

/* Hero growth-line tự vẽ khi load */
.hero-growth .hg-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.js .hero-growth .hg-draw { stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease-out) 250ms; }
html.js body.loaded .hero-growth .hg-draw { stroke-dashoffset: 0; }

/* Thẻ pillars: icon SVG phát sáng khi hover */
.card:hover .ic-draw { filter: drop-shadow(0 0 6px rgba(184, 255, 79, 0.45)); }
.ic-draw { width: 40px; height: 40px; margin-bottom: 16px; transition: filter var(--dur-micro); }

/* ---------- Dịch vụ: mô tả trong hàng (mobile accordion) ---------- */
.svc-row .svc-desc-m {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 350ms var(--ease-out), opacity 300ms var(--ease-out);
}
@media (max-width: 900px) {
  .svc-row.active .svc-desc-m { max-height: 340px; opacity: 1; }
  .svc-row .svc-desc-m {
    display: block; text-align: left; padding-top: 0;
  }
  .svc-row.active .svc-desc-m { padding-top: 12px; }
  .svc-row .svc-desc-m p { font-size: 15px; line-height: 1.6; color: var(--gray-soft); font-weight: 400; }
  .svc-row.active .svc-desc-m p { color: rgba(14, 15, 18, 0.85); }
}

/* ---------- GROW: đường line tự vẽ theo section ---------- */
.grow-line .gl-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.js .grow-line .gl-draw { stroke-dashoffset: 1; transition: stroke-dashoffset 1300ms var(--ease-out) 150ms; }
html.js .grow-section.active .gl-draw { stroke-dashoffset: 0; }

/* ---------- O–mũi tên ở CTA cuối ---------- */
.o-arrow .o-arrow-head { transition: none; will-change: transform; }

/* ---------- Magnetic (JS gán transform; tắt mượt khi nhả chuột) ---------- */
.magnetic { transition: transform 500ms var(--ease-spring); }
.magnetic.grabbing { transition: transform 120ms ease-out; }

/* ---------- Marquee: tôn trọng người dùng ít chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js [data-reveal], html.js .hero-fade { opacity: 1 !important; transform: none !important; }
  html.js .line-mask > span { transform: none !important; }
  html.js .hero-growth .hg-draw, html.js .grow-line .gl-draw { stroke-dashoffset: 0 !important; }
  .marquee-track, .footer-marquee .fm-track { animation: none !important; }
  .scroll-hint .track::after { animation: none !important; }
}