/* ============================================================
   BDS Vinhomes — Hệ motion
   Nguyên tắc: chỉ animate transform & opacity (GPU), thời lượng 400–900ms,
   easing "expo-out" cho cảm giác sang, stagger nhẹ, luôn bật kể cả khi giảm chuyển động.
   ============================================================ */
:root {
  --m-fast: 220ms;
  --m-base: 520ms;
  --m-slow: 900ms;
  --m-ease: cubic-bezier(.22, 1, .36, 1);        /* expo-out: nhanh rồi lắng dịu */
  --m-ease-io: cubic-bezier(.65, 0, .35, 1);     /* in-out mềm */
  --m-lift: -6px;
  --m-stagger: 70ms;
}

/* ---------- Vào trang: fade nhẹ, chỉ khi JS chạy ---------- */
html.js body { opacity: 0; }
html.js body.is-ready { opacity: 1; transition: opacity 420ms var(--m-ease); }
html.js body.is-leaving { opacity: 0; transition: opacity 180ms ease; }

/* ---------- Reveal khi cuộn (thay cho .reveal cũ) ---------- */
/* Reveal trái/phải dịch phần tử ra ngoài mép -> cắt tràn ngang ở main (clip không phá sticky) */
main { overflow-x: clip; }
@supports not (overflow: clip) { main { overflow-x: hidden; } }
html.js [data-reveal] { opacity: 0; will-change: transform, opacity; }
html.js [data-reveal="up"]    { transform: translate3d(0, 28px, 0); }
html.js [data-reveal="down"]  { transform: translate3d(0, -20px, 0); }
html.js [data-reveal="left"]  { transform: translate3d(32px, 0, 0); }
html.js [data-reveal="right"] { transform: translate3d(-32px, 0, 0); }
html.js [data-reveal="scale"] { transform: scale(.94); }
html.js [data-reveal="fade"]  { transform: none; }
html.js [data-reveal].is-in {
  opacity: 1; transform: none; will-change: auto;
  transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease);
  transition-delay: calc(var(--i, 0) * var(--m-stagger));
}
/* Tiêu đề: lộ dần theo mặt nạ từ dưới lên */
html.js [data-reveal="clip"] { clip-path: inset(0 0 100% 0); transform: translate3d(0, 12px, 0); }
html.js [data-reveal="clip"].is-in { clip-path: inset(0 0 -10% 0); transition: opacity var(--m-base) var(--m-ease), transform var(--m-slow) var(--m-ease), clip-path var(--m-slow) var(--m-ease); }
/* Tương thích .reveal cũ trong main.js */
.reveal { opacity: 1; transform: none; transition: none; }

/* ---------- Hero ---------- */
.hero-media img { transform: scale(1.06); transition: transform 2400ms var(--m-ease); will-change: transform; }
body.is-ready .hero-media img { transform: scale(1); }
.hero-media.parallax img { transform: translate3d(0, var(--py, 0px), 0) scale(1.06); transition: none; }
.hero .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.hero .w > span { display: inline-block; transform: translate3d(0, 110%, 0); }
body.is-ready .hero .w > span { transform: none; transition: transform 900ms var(--m-ease); transition-delay: calc(140ms + var(--i, 0) * 60ms); }
.hero p, .hero-ctas, .hero-tagline { opacity: 0; transform: translate3d(0, 18px, 0); }
body.is-ready .hero p { opacity: 1; transform: none; transition: opacity 700ms var(--m-ease) 520ms, transform 700ms var(--m-ease) 520ms; }
body.is-ready .hero-ctas { opacity: 1; transform: none; transition: opacity 700ms var(--m-ease) 680ms, transform 700ms var(--m-ease) 680ms; }
body.is-ready .hero-tagline { opacity: 1; transform: rotate(-6deg); transition: opacity 1200ms var(--m-ease) 1100ms, transform 1200ms var(--m-ease) 1100ms; }
.search-box { opacity: 0; transform: translate3d(0, 32px, 0); }
body.is-ready .search-box { opacity: 1; transform: none; transition: opacity 800ms var(--m-ease) 780ms, transform 800ms var(--m-ease) 780ms; }
.consign-media img { will-change: transform; }
.consign-media.parallax img { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); }

/* ---------- Header ---------- */
.header { transition: box-shadow var(--m-base) var(--m-ease), background-color var(--m-base) var(--m-ease); }
.header.is-scrolled { box-shadow: 0 8px 30px rgba(16, 43, 67, .08); }
.nav a { position: relative; transition: color var(--m-fast) ease; background: none !important; }
.nav a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--m-ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { box-shadow: none; border-radius: var(--radius-ui); }
.logo svg { transition: transform 500ms var(--m-ease); }
.logo:hover svg { transform: translateY(-2px) rotate(-4deg); }

/* ---------- Nút: sheen vàng quét qua, nhấn lún nhẹ ---------- */
.btn { position: relative; overflow: hidden; transform: translateZ(0); transition: transform 280ms var(--m-ease), background-color var(--m-fast) ease, color var(--m-fast) ease, border-color var(--m-fast) ease; }
.btn::after { content: ''; position: absolute; top: -50%; bottom: -50%; left: -30%; width: 40%; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%); transform: translate3d(-120%, 0, 0) skewX(-18deg); pointer-events: none; }
.btn:hover::after { transform: translate3d(360%, 0, 0) skewX(-18deg); transition: transform 720ms var(--m-ease); }
.btn-outline::after, .btn-ghost::after, .btn-outline-light::after { background: linear-gradient(105deg, rgba(0,102,255,0) 0%, rgba(0,102,255,.28) 50%, rgba(0,102,255,0) 100%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: 90ms; }
.btn svg { transition: transform 320ms var(--m-ease); }
.btn:hover svg { transform: translateX(3px); }
.icon-btn { transition: transform 280ms var(--m-ease), border-color var(--m-fast) ease, color var(--m-fast) ease; }
.icon-btn:hover { transform: translateY(-2px); }
.link-more svg { transition: transform 320ms var(--m-ease); }
.link-more:hover svg { transform: translateX(4px); }
.link-more { transition: color var(--m-fast) ease; }

/* ---------- Card: nâng nhẹ + bóng bloom bằng lớp phủ opacity ---------- */
.card, .post-card, .project-card { position: relative; transform: translateZ(0); transition: transform 480ms var(--m-ease), border-color 320ms ease; }
.card::before, .post-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 26px 50px -18px rgba(16, 43, 67, .28), 0 0 0 1px rgba(184, 152, 98, .35); opacity: 0; transition: opacity 480ms var(--m-ease); pointer-events: none; z-index: 2; }
.card:hover, .post-card:hover { transform: translateY(var(--m-lift)); }
.card:hover::before, .post-card:hover::before { opacity: 1; }
.card-media img, .post-card img { transition: transform 900ms var(--m-ease); }
.card:hover .card-media img, .post-card:hover img { transform: scale(1.04); }
.card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,39,72,0) 55%, rgba(16,39,72,.22) 100%); opacity: 0; transition: opacity 480ms var(--m-ease); pointer-events: none; }
.card:hover .card-media::after { opacity: 1; }
.card-price { transition: transform 400ms var(--m-ease); transform-origin: left; }
.card:hover .card-price { transform: translateX(2px); }

/* Project card: caption trượt lên, ánh vàng viền */
.project-card img { transition: transform 1100ms var(--m-ease); }
.project-card::after { transition: opacity 480ms var(--m-ease); }
.project-card .cap { transform: translate3d(0, 6px, 0); transition: transform 480ms var(--m-ease); }
.project-card .cap span { opacity: .8; transform: translate3d(0, 6px, 0); transition: opacity 480ms var(--m-ease), transform 480ms var(--m-ease); }
.project-card:hover { transform: translateY(-4px); }
.project-card:hover img { transform: scale(1.06); }
.project-card:hover .cap { transform: none; }
.project-card:hover .cap span { opacity: 1; transform: none; }
.project-card .cap::before { content: ''; display: block; width: 28px; height: 2px; margin-bottom: 10px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--m-ease) 60ms; }
.project-card:hover .cap::before { transform: scaleX(1); }

/* ---------- Chip / tab ---------- */
.chip { transition: background-color var(--m-fast) ease, color var(--m-fast) ease, border-color var(--m-fast) ease, transform 240ms var(--m-ease); }
.chip:hover { transform: translateY(-1px); border-color: var(--navy); }
.search-tabs { position: relative; }
.search-tabs button { transition: color var(--m-fast) ease; border-bottom-color: transparent !important; }
.search-tabs .tab-ind { position: absolute; bottom: -1px; left: 0; height: 2px; width: 60px; background: var(--gold); transform: translate3d(var(--x, 24px), 0, 0) scaleX(var(--sx, 1)); transform-origin: left; transition: transform 420ms var(--m-ease); pointer-events: none; }

/* ---------- Trust strip & steps: icon nảy nhẹ, đường nối vẽ ---------- */
.trust-item svg, .points svg, .benefits svg { transition: transform 420ms var(--m-ease); }
.trust-item:hover svg, .points li:hover svg, .benefits li:hover svg { transform: translateY(-3px) scale(1.06); }
.step-icon { transition: transform 420ms var(--m-ease), background-color var(--m-fast) ease, color var(--m-fast) ease; }
.step:hover .step-icon { transform: rotate(-8deg) scale(1.06); background: var(--gold); color: #fff; }
html.js .step:not(:last-child)::after { transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--m-ease) calc(var(--i, 0) * var(--m-stagger) + 300ms); }
html.js .step.is-in:not(:last-child)::after { transform: scaleX(1); }

/* ---------- FAQ: mở bằng grid-rows, không đo chiều cao ---------- */
.faq-a { display: grid !important; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--m-ease); }
.faq-a.open { grid-template-rows: 1fr; }
.faq-a > * { overflow: hidden; min-height: 0; opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity 320ms ease, transform 420ms var(--m-ease); }
.faq-a.open > * { opacity: 1; transform: none; transition-delay: 80ms; }
.faq-q { transition: color var(--m-fast) ease, padding-left 320ms var(--m-ease); }
.faq-q:hover { color: var(--gold-600); }
.faq-q svg { transition: transform 420ms var(--m-ease), color var(--m-fast) ease; }
.faq-q[aria-expanded="true"] svg { color: var(--gold); }

/* ---------- Form ---------- */
.field input, .field select, .field textarea, .control { transition: border-color var(--m-fast) ease, box-shadow 280ms var(--m-ease), transform 280ms var(--m-ease); }
.field input:focus, .field select:focus, .field textarea:focus { transform: translateY(-1px); }
.field.invalid input, .field.invalid select { animation: m-shake 420ms var(--m-ease-io); }
@keyframes m-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.form-status { transform: translate3d(0, -6px, 0); opacity: 0; transition: opacity 320ms ease, transform 420ms var(--m-ease); }
.form-status.show { transform: none; opacity: 1; }
.segmented label { transition: background-color var(--m-fast) ease, color var(--m-fast) ease; }
.upload { transition: border-color var(--m-fast) ease, background-color var(--m-fast) ease, transform 280ms var(--m-ease); }
.upload:hover { border-color: var(--gold); transform: translateY(-1px); }

/* ---------- Modal & menu di động ---------- */
.modal { display: flex !important; pointer-events: none; }
.modal .backdrop { opacity: 0; transition: opacity 320ms ease; backdrop-filter: blur(0); }
.modal-card { opacity: 0; transform: translate3d(0, 24px, 0) scale(.97); transition: opacity 320ms ease, transform 520ms var(--m-ease); }
.modal.open { pointer-events: auto; }
.modal.open .backdrop { opacity: 1; }
.modal.open .modal-card { opacity: 1; transform: none; }
.mobile-nav { display: block !important; pointer-events: none; }
.mobile-nav .backdrop { opacity: 0; transition: opacity 320ms ease; }
.mobile-nav .panel { transform: translate3d(100%, 0, 0); transition: transform 520ms var(--m-ease); }
.mobile-nav nav a { opacity: 0; transform: translate3d(16px, 0, 0); transition: opacity 320ms ease, transform 420ms var(--m-ease); }
.mobile-nav.open { pointer-events: auto; }
.mobile-nav.open .backdrop { opacity: 1; }
.mobile-nav.open .panel { transform: none; }
.mobile-nav.open nav a { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i, 0) * 45ms); }

/* ---------- Liên hệ nhanh: pop vào + vòng sóng nhẹ ở nút gọi ---------- */
.quick a, .quick button { transition: transform 320ms var(--m-ease), opacity 320ms ease; }
.quick a:hover, .quick button:hover { transform: translateY(-2px) scale(1.06); }
/* Cụm nút chỉ hiện sau khi cuộn qua banner; từng nút pop vào theo nhịp */
.quick { pointer-events: none; }
.quick.show { pointer-events: auto; }
.quick > * { opacity: 0; transform: translate3d(0, 16px, 0) scale(.6); }
.quick.show > * { opacity: 1; transform: none; transition: opacity 420ms ease, transform 640ms var(--m-ease); }
.quick.show > *:nth-child(1) { transition-delay: 0ms; }
.quick.show > *:nth-child(2) { transition-delay: 70ms; }
.quick.show > *:nth-child(3) { transition-delay: 140ms; }
.quick.show > *:nth-child(4) { transition-delay: 210ms; }
.quick.show .q-top { opacity: 0; transform: translateY(8px); transition: opacity 320ms ease, transform 420ms var(--m-ease), max-height 320ms var(--m-ease), margin 320ms var(--m-ease); }
.quick.show .q-top.show { opacity: 1; transform: none; }
.quick:not(.show) > * { transition: opacity 260ms ease, transform 320ms var(--m-ease); }
/* Chỉ nút Zalo có vòng sóng, đúng 2 giây một nhịp; nút gọi để yên cho đỡ rối */
.quick .q-zalo { position: relative; }
.quick .q-zalo::before { content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 2px solid var(--q-zalo); opacity: 0; pointer-events: none;
  animation: m-ring 2000ms var(--m-ease) infinite; }
@keyframes m-ring { 0% { transform: scale(1); opacity: .55; } 60% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } }
.mobile-bar a, .mobile-bar button { transition: background-color var(--m-fast) ease, transform 200ms var(--m-ease); }
.mobile-bar a:active, .mobile-bar button:active { transform: scale(.96); }

/* ---------- Ảnh: hiện dần khi tải xong, tránh nhảy ---------- */
html.js img.m-img { opacity: 0; transition: opacity 600ms var(--m-ease); }
html.js img.m-img.is-loaded { opacity: 1; }

/* ---------- Gallery trang chi tiết ---------- */
.gallery figure { overflow: hidden; }
.gallery img { transition: transform 1100ms var(--m-ease); }
.gallery figure:hover img { transform: scale(1.04); }
.spec { transition: transform 320ms var(--m-ease), background-color var(--m-fast) ease; }
.spec:hover { transform: translateY(-2px); background: var(--gold-100); }

/* ---------- CTA band & footer ---------- */
.footer li a { transition: color var(--m-fast) ease, transform 320ms var(--m-ease); }
.footer li a:hover { transform: translateX(4px); }
.footer-social a { transition: border-color var(--m-fast) ease, color var(--m-fast) ease, transform 320ms var(--m-ease); }
.footer-social a:hover { transform: translateY(-3px); }

/* ---------- Giảm chuyển động / thiết bị yếu ---------- */
@media (hover: none) {
  .btn::after { display: none; }
  .card:hover, .post-card:hover, .project-card:hover, .btn:hover, .icon-btn:hover { transform: none; }
}