/* Custom tweaks (Tailwind used for main UI) */

html,
body {
  scroll-behavior: smooth;
}

/* Lead form submit: loading (mờ, không click, spinner) */
button.lead-submit--loading {
  opacity: 0.65;
  cursor: not-allowed !important;
  pointer-events: none;
  filter: grayscale(0.12);
  box-shadow: none !important;
  animation: none !important;
}

button.lead-submit--loading:hover,
button.lead-submit--loading:focus,
button.lead-submit--loading:active {
  opacity: 0.65;
  filter: grayscale(0.12);
  animation: none !important;
}

.lead-submit-spinner {
  width: 1.125rem;
  height: 1.125rem;
  animation: lead-submit-spin 0.65s linear infinite;
}

@keyframes lead-submit-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lead-submit-spinner {
    animation: none;
  }
}

/* Tạm tắt rung thẻ form hero khi đang gửi */
#hero-lead-card:has(button.lead-submit--loading) {
  animation: none !important;
}

.tieudedautrang {
  font-size: 2.5rem;
  line-height: 1.4;
}

span.tieudephu {
  font-size: 2rem;
}

/* Đảm bảo sticky CTA ẩn trên màn hình lớn (fallback nếu class Tailwind không áp dụng) */
@media (min-width: 768px) {
  #sticky-cta {
    display: none !important;
  }
}

/* Sticky CTA (mobile) – show on scroll down with slide-up */
#sticky-cta.sticky-cta-anim {
  opacity: 0;
  transform: translate3d(0, 110%, 0);
  pointer-events: none;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease;
  will-change: transform, opacity;
}

#sticky-cta.sticky-cta-anim.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  #sticky-cta.sticky-cta-anim {
    transition: none !important;
  }
}

/* Fixed contact entry animation (mobile + desktop) */
[data-fixed-contact-root].fixed-contact-entry {
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease;
  will-change: transform, opacity;
}
[data-fixed-contact-root].fixed-contact-entry[data-fixed-contact-anim="bottom"] {
  transform: translate3d(0, 20px, 0);
}
[data-fixed-contact-root].fixed-contact-entry[data-fixed-contact-anim="left"] {
  transform: translate3d(-24px, 0, 0);
}
[data-fixed-contact-root].fixed-contact-entry[data-fixed-contact-anim="right"] {
  transform: translate3d(24px, 0, 0);
}
[data-fixed-contact-root].fixed-contact-entry[data-fixed-contact-anim="fade"] {
  transform: none;
}
[data-fixed-contact-root].fixed-contact-entry.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  [data-fixed-contact-root].fixed-contact-entry {
    transition: none !important;
    transform: none !important;
  }
}

/* Hiệu ứng background chuyển động nhẹ cho CTA chính */
@keyframes cta-gold-glow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.cta-animated {
  background-image: linear-gradient(
    120deg,
    #cfaf6e,
    #e3c78a,
    #cfaf6e
  );
  background-size: 200% 200%;
  animation: cta-gold-glow 4s ease-in-out infinite;
}

/* Nút đăng ký fixed contact: loading trước khi mở popup */
.cta-popup-loading {
  pointer-events: none !important;
  opacity: 0.96;
}
.cta-popup-loading .cta-popup-icon-spin {
  transform-origin: center;
  animation: cta-popup-icon-spin 0.7s linear infinite;
}
@keyframes cta-popup-icon-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta-popup-loading .cta-popup-icon-spin {
    animation: none !important;
  }
}

/* Checkmark animation (popup thanks) */
.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: 3px solid rgba(34, 197, 94, 0.35);
  position: relative;
  animation: checkmark-pop 420ms ease-out both;
}

.checkmark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 30px;
  border-right: 5px solid #22c55e;
  border-bottom: 5px solid #22c55e;
  /* Center the check visually */
  transform: translate(-50%, -62%) rotate(45deg) scale(0.2);
  transform-origin: center;
  animation: checkmark-draw 520ms 160ms ease-out both;
}

@keyframes checkmark-pop {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes checkmark-draw {
  0% {
    opacity: 0;
    transform: translate(-50%, -62%) rotate(45deg) scale(0.2);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -62%) rotate(45deg) scale(1);
  }
}

/* Floating CTA (desktop) – rung rinh nhẹ để nổi bật */
@keyframes float-cta-wiggle {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  35% {
    transform: translate3d(0, -3px, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
  75% {
    transform: translate3d(0, -1px, 0);
  }
}

.floating-cta-attn {
  transform: translate3d(0, 0, 0);
  animation: float-cta-wiggle 2.9s ease-in-out infinite;
  will-change: transform;
}

.floating-cta-attn:nth-child(2) {
  animation-delay: 180ms;
}
.floating-cta-attn:nth-child(3) {
  animation-delay: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta-attn {
    animation: none !important;
  }
}

/* Popup animation */
.popup-overlay {
  opacity: 0;
  transition: opacity 220ms ease;
}
.popup-overlay.is-open {
  opacity: 1;
}

.popup-panel {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.985);
  transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}
.popup-overlay.is-open .popup-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.popup-panel[data-anim="top"] {
  transform: translate3d(0, -36px, 0);
}
.popup-panel[data-anim="bottom"] {
  transform: translate3d(0, 36px, 0);
}

@media (prefers-reduced-motion: reduce) {
  .popup-overlay,
  .popup-panel {
    transition: none !important;
    animation: none !important;
  }
}

/* Location map animated path */
.animated-path {
  stroke-dasharray: 10 10;
  animation: location-dash 1400ms linear infinite;
}

@keyframes location-dash {
  to {
    stroke-dashoffset: -20;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated-path {
    animation: none !important;
  }
}

/* Location icon subtle zoom */
@keyframes location-icon-zoom {
  0%,
  100% {
    transform: translateZ(0) scale(1);
  }
  50% {
    transform: translateZ(0) scale(1.06);
  }
}

.location-icon-zoom {
  animation: location-icon-zoom 1400ms ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .location-icon-zoom {
    animation: none !important;
  }
}

/* Location timeline dot – fine alignment */
span.absolute.left-0.top-2.h-5.w-5.rounded-full.bg-white.ring-2.ring-primary\/40 {
  width: 7px;
  height: 7px;
  margin-left: -17px;
  margin-top: -3px;
}

/* Scroll reveal (fade-in) */
.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition-property: opacity, transform;
  transition-duration: var(--reveal-duration, 600ms);
  transition-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal[data-reveal="fade"] {
  transform: none;
}

.reveal[data-reveal="left"] {
  transform: translate3d(-20px, 0, 0);
}
.reveal[data-reveal="right"] {
  transform: translate3d(20px, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Reasons cards: keep equal height + clamp text for balance */
.reasons-card {
  height: 100%;
}
.reasons-title,
.reasons-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reasons-title {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.reasons-desc {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

@media (max-width: 640px) {
  .reasons-desc {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}


/* Parallax banner */
#parallax-banner {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  background: #f8fafc;
}

#parallax-banner img {
  display: block;
  width: 100%;
  height: auto;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

#parallax-banner .parallax-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.24) 100%
  );
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #parallax-banner img {
    transform: none !important;
  }
}

/* Hero stacking context (divider overlaps into hero) */
#hero {
  position: relative;
  z-index: 1;
  margin-top: -2px;
}

/* Wave divider between parallax banner and hero */
#wave-divider {
  position: relative;
  z-index: 30;
  height: 90px;
  margin-top: -85px; /* overlap slightly into hero */
  pointer-events: none;
}

#wave-divider .wave-divider-svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 640px) {
  #wave-divider {
    height: 40px;
    margin-top: -55px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #wave-divider .wave-divider-svg {
    transform: none !important;
  }
}

/* Bottom wave divider (hero -> next section) */
#wave-divider-bottom {
  position: relative;
  z-index: 20;
  height: 80px;
  margin-top: -40px; /* overlap into hero bottom */
  pointer-events: none;
}

#wave-divider-bottom .wave-divider-svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 640px) {
  #wave-divider-bottom {
    height: 70px;
    margin-top: -35px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #wave-divider-bottom .wave-divider-svg {
    transform: none !important;
  }
}

/* Amenities cards: min height requirement */
#amenities article {
  min-height: 300px;
}

#amenities article > img {
  height: 100%;
  object-fit: cover;
}

/* Hero lead form subtle shake */
#hero-lead-card {
  animation: hero-lead-shake 3.2s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

#hero-lead-card:hover,
#hero-lead-card:focus-within,
#hero-lead-card:active {
  animation-play-state: paused;
}

@keyframes hero-lead-shake {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, -3px, 0) rotate(-0.2deg);
  }
  60% {
    transform: translate3d(0, -1px, 0) rotate(0.15deg);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero-lead-card {
    animation: none !important;
  }
}

/* Popup CTA subtle shake */
.popup-cta-shake {
  animation: popup-cta-shake 2.8s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

.popup-cta-shake:hover,
.popup-cta-shake:focus-within,
.popup-cta-shake:active {
  animation-play-state: paused;
}

@keyframes popup-cta-shake {
  0% {
    transform: translate3d(0, 0, 0);
  }
  45% {
    transform: translate3d(0, -2px, 0) rotate(-0.12deg);
  }
  65% {
    transform: translate3d(0, -0.8px, 0) rotate(0.1deg);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .popup-cta-shake {
    animation: none !important;
  }
}

/* Apply animation without needing to edit HTML */
[data-cta="hero-primary"],
[data-cta="reasons-cta"],
[data-cta="reasons-cta-mobile"],
[data-cta="amenities-cta"],
[data-cta="location-cta"],
[data-cta="location-cta-secondary"],
[data-cta="overview-cta"],
[data-cta="overview-cta-mobile"],
[data-cta="floorplan-cta"],
[data-cta="floorplan-cta-secondary"],
[data-cta="pricing-cta-primary"],
[data-cta="pricing-cta-secondary"],
[data-cta="investment-cta"],
[data-cta="footer-cta"],
[data-cta="sticky-price"],
[data-cta="sticky-price-desktop"] {
  animation: popup-cta-shake 2.8s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

[data-cta="hero-primary"]:hover,
[data-cta="hero-primary"]:focus-within,
[data-cta="hero-primary"]:active,
[data-cta="reasons-cta"]:hover,
[data-cta="reasons-cta"]:focus-within,
[data-cta="reasons-cta"]:active,
[data-cta="reasons-cta-mobile"]:hover,
[data-cta="reasons-cta-mobile"]:focus-within,
[data-cta="reasons-cta-mobile"]:active,
[data-cta="amenities-cta"]:hover,
[data-cta="amenities-cta"]:focus-within,
[data-cta="amenities-cta"]:active,
[data-cta="location-cta"]:hover,
[data-cta="location-cta"]:focus-within,
[data-cta="location-cta"]:active,
[data-cta="location-cta-secondary"]:hover,
[data-cta="location-cta-secondary"]:focus-within,
[data-cta="location-cta-secondary"]:active,
[data-cta="overview-cta"]:hover,
[data-cta="overview-cta"]:focus-within,
[data-cta="overview-cta"]:active,
[data-cta="overview-cta-mobile"]:hover,
[data-cta="overview-cta-mobile"]:focus-within,
[data-cta="overview-cta-mobile"]:active,
[data-cta="floorplan-cta"]:hover,
[data-cta="floorplan-cta"]:focus-within,
[data-cta="floorplan-cta"]:active,
[data-cta="floorplan-cta-secondary"]:hover,
[data-cta="floorplan-cta-secondary"]:focus-within,
[data-cta="floorplan-cta-secondary"]:active,
[data-cta="pricing-cta-primary"]:hover,
[data-cta="pricing-cta-primary"]:focus-within,
[data-cta="pricing-cta-primary"]:active,
[data-cta="pricing-cta-secondary"]:hover,
[data-cta="pricing-cta-secondary"]:focus-within,
[data-cta="pricing-cta-secondary"]:active,
[data-cta="investment-cta"]:hover,
[data-cta="investment-cta"]:focus-within,
[data-cta="investment-cta"]:active,
[data-cta="footer-cta"]:hover,
[data-cta="footer-cta"]:focus-within,
[data-cta="footer-cta"]:active,
[data-cta="sticky-price"]:hover,
[data-cta="sticky-price"]:focus-within,
[data-cta="sticky-price"]:active,
[data-cta="sticky-price-desktop"]:hover,
[data-cta="sticky-price-desktop"]:focus-within,
[data-cta="sticky-price-desktop"]:active {
  animation-play-state: paused;
}

/* Fake lead notification – góc trái dưới */
.fake-lead-root {
  position: fixed;
  left: 16px;
  bottom: 20px;
  z-index: 9998;
  max-width: min(320px, calc(100vw - 32px));
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-24px, 0, 0);
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fake-lead-root.fake-lead-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.fake-lead-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(30, 41, 59, 0.95) 100%);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
}

.fake-lead-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  background: linear-gradient(145deg, #CFAF6E 0%, #b89550 100%);
  border-radius: 10px;
}

.fake-lead-body {
  flex: 1;
  min-width: 0;
}

.fake-lead-title {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.4;
  margin: 0 0 2px 0;
}

.fake-lead-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 768px) {
  .fake-lead-root {
    left: 12px;
    bottom: 100px;
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 480px) {
  .fake-lead-root {
    left: 12px;
    bottom: 100px;
    max-width: calc(100vw - 24px);
  }
  .fake-lead-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .fake-lead-avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
  .fake-lead-title {
    font-size: 11px;
  }
  .fake-lead-desc {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fake-lead-root {
    transition: none;
  }
}