/* ============================================================
   home-hero.css — Layout hero-visual (xe chạy 3D) cho trang chủ.
   Port nguyên bản từ dự án "BUILDING HIRRING 3D" (trang tuyển dụng Hyundai),
   theo yêu cầu người dùng 2026-10-07. Xem CLAUDE.md mục "Quyết định kiến
   trúc" — GSAP là thư viện ngoài đầu tiên được chấp nhận, CHỈ dùng ở đây.

   Nền lưới navy+glow (trước đây .bg-grid-navy riêng ở đây) đã dọn vào
   .bg-blueprint (base.css) để dùng chung toàn site theo yêu cầu 2026-10-07 —
   không định nghĩa lại ở đây nữa, tránh trùng.
   ============================================================ */

/* ── Layout 2 cột: chữ trái — hero-visual phải (sập 1 cột ở mobile,
   khớp cách index.html đã responsive các section khác) ── */
.hero-grid-2col {
  display: grid;
  gap: var(--gap-xl);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid-2col {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--gap-2xl);
  }
}

/* ── Hero visual — khung SVG xe chạy, nghiêng nhẹ theo con trỏ (biến
   --tilt-x/--tilt-y do hero-visual.js set qua JS khi pointer di chuyển) ── */
.hero__visual {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 480px);
  margin-inline: auto;
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .4s ease;
}
.hero__visual svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (max-width: 899px) {
  .hero__visual { width: min(100%, 360px); margin-top: var(--gap-lg); }
}

/* Section cảnh 3D bàn tay (cuối trang chủ) — js/modules/home/hand-scene.js */
.hand-section { position: relative; height: min(100svh, 760px); background: var(--ink); overflow: hidden; }
.hand-section.is-static { height: auto; }
.hand-section.is-static .hand-stage { display: none; }
.hand-stage { position: absolute; inset: 0; }
.hand-stage canvas { opacity: 0; transition: opacity .8s ease; }
.hand-stage.is-ready canvas { opacity: 1; }
.hand-hud { position: absolute; left: 16px; top: 12px; font-size: 13px; color: var(--panel); opacity: .8; pointer-events: none; }

/* Chân trang đặt chồng lên cảnh 3D */
.hand-footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 0 18px;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 85%, transparent), transparent); }
.hand-section.is-static .hand-footer { position: relative; padding: 18px 0; background: none; }
.hand-footer-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hand-footer p { margin: 0; font-size: var(--fs-footer); line-height: 1.6; color: var(--panel); }
.hand-footer a { color: var(--panel); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hand-footer a:hover { color: var(--brand-soft); }
@media (max-width: 480px) { .hand-footer-inner { flex-direction: column; align-items: flex-start; } }