/* ==========================================================================
   Suncity Monarch — Premium Motion
   Transform + opacity only · IO once · prefers-reduced-motion safe
   ========================================================================== */

:root {
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.5s;
  --dur-mid: 0.7s;
  --dur-slow: 0.9s;
  --reveal-y: 50px;
  --title-y: 25px;
  --text-y: 18px;
  --btn-y: 16px;
  --card-y: 30px;
}

/* --------------------------------------------------------------------------
   Base scroll reveals
   -------------------------------------------------------------------------- */
html.js-motion [data-animate] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--dur-mid) var(--ease-lux),
    transform var(--dur-mid) var(--ease-lux);
  transition-delay: 0.1s;
}

html.js-motion [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

html.js-motion [data-animate="fade-up"] {
  transform: translate3d(0, var(--reveal-y), 0);
}

html.js-motion [data-animate="fade-down"] {
  transform: translate3d(0, calc(var(--reveal-y) * -0.5), 0);
}

html.js-motion [data-animate="fade-left"] {
  transform: translate3d(40px, 0, 0);
}

html.js-motion [data-animate="fade-right"] {
  transform: translate3d(-40px, 0, 0);
}

html.js-motion [data-animate="scale"] {
  transform: scale(0.96);
}

html.js-motion [data-animate="map"] {
  transform: translate3d(0, 24px, 0) scale(0.98);
}

/* Header containers: no parent motion — children stagger */
html.js-motion [data-animate="header"] {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

/* Card groups: parent stays put; children reveal */
html.js-motion [data-animate="cards"] {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

/* --------------------------------------------------------------------------
   Section titles — Divider → Heading → Subtitle
   -------------------------------------------------------------------------- */
html.js-motion [data-animate="header"] [class$="__accent"],
html.js-motion [data-animate="header"] [class*="__accent"] {
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: center;
  transition:
    opacity var(--dur-fast) var(--ease-lux),
    transform var(--dur-mid) var(--ease-lux);
}

html.js-motion [data-animate="header"] [class$="__title"],
html.js-motion [data-animate="header"] [class*="__title"] {
  opacity: 0;
  transform: translate3d(0, var(--title-y), 0);
  transition:
    opacity var(--dur-mid) var(--ease-lux),
    transform var(--dur-mid) var(--ease-lux);
}

html.js-motion [data-animate="header"] [class$="__subtitle"],
html.js-motion [data-animate="header"] [class*="__subtitle"] {
  opacity: 0;
  transform: translate3d(0, var(--text-y), 0);
  transition:
    opacity var(--dur-mid) var(--ease-lux),
    transform var(--dur-mid) var(--ease-lux);
}

html.js-motion [data-animate="header"].is-visible [class$="__accent"],
html.js-motion [data-animate="header"].is-visible [class*="__accent"] {
  opacity: 1;
  transform: scaleX(1);
  transition-delay: 0.1s;
}

html.js-motion [data-animate="header"].is-visible [class$="__title"],
html.js-motion [data-animate="header"].is-visible [class*="__title"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.22s;
}

html.js-motion [data-animate="header"].is-visible [class$="__subtitle"],
html.js-motion [data-animate="header"].is-visible [class*="__subtitle"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.34s;
}

/* --------------------------------------------------------------------------
   Stagger children (lists / grids)
   -------------------------------------------------------------------------- */
html.js-motion [data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, var(--text-y), 0);
  transition:
    opacity 0.6s var(--ease-lux),
    transform 0.6s var(--ease-lux);
}

html.js-motion [data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

html.js-motion [data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.08s; }
html.js-motion [data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.16s; }
html.js-motion [data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.24s; }
html.js-motion [data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.32s; }
html.js-motion [data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.4s; }
html.js-motion [data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.48s; }
html.js-motion [data-stagger].is-visible > *:nth-child(7) { transition-delay: 0.56s; }
html.js-motion [data-stagger].is-visible > *:nth-child(8) { transition-delay: 0.64s; }
html.js-motion [data-stagger].is-visible > *:nth-child(9) { transition-delay: 0.72s; }
html.js-motion [data-stagger].is-visible > *:nth-child(10) { transition-delay: 0.8s; }
html.js-motion [data-stagger].is-visible > *:nth-child(11) { transition-delay: 0.88s; }
html.js-motion [data-stagger].is-visible > *:nth-child(12) { transition-delay: 0.96s; }

/* --------------------------------------------------------------------------
   Highlight / amenity / floorplan cards
   -------------------------------------------------------------------------- */
html.js-motion [data-animate="cards"] .highlight-card,
html.js-motion [data-animate="cards"] .amenity-card,
html.js-motion [data-animate="cards"] .floorplan-card {
  opacity: 0;
  transform: translate3d(0, var(--card-y), 0);
  transition:
    opacity 0.6s var(--ease-lux),
    transform 0.6s var(--ease-lux),
    box-shadow 0.4s var(--ease-lux),
    border-color 0.4s var(--ease-lux);
}

html.js-motion [data-animate="cards"].is-visible .highlight-card,
html.js-motion [data-animate="cards"].is-visible .amenity-card,
html.js-motion [data-animate="cards"].is-visible .floorplan-card {
  opacity: 1;
  transform: none;
}

html.js-motion [data-animate="cards"].is-visible .highlight-card:nth-child(1),
html.js-motion [data-animate="cards"].is-visible .swiper-slide:nth-child(1) .amenity-card,
html.js-motion [data-animate="cards"].is-visible .floorplan-card:nth-child(1) { transition-delay: 0.1s; }
html.js-motion [data-animate="cards"].is-visible .highlight-card:nth-child(2),
html.js-motion [data-animate="cards"].is-visible .swiper-slide:nth-child(2) .amenity-card,
html.js-motion [data-animate="cards"].is-visible .floorplan-card:nth-child(2) { transition-delay: 0.17s; }
html.js-motion [data-animate="cards"].is-visible .highlight-card:nth-child(3),
html.js-motion [data-animate="cards"].is-visible .swiper-slide:nth-child(3) .amenity-card,
html.js-motion [data-animate="cards"].is-visible .floorplan-card:nth-child(3) { transition-delay: 0.24s; }
html.js-motion [data-animate="cards"].is-visible .highlight-card:nth-child(4),
html.js-motion [data-animate="cards"].is-visible .swiper-slide:nth-child(4) .amenity-card,
html.js-motion [data-animate="cards"].is-visible .floorplan-card:nth-child(4) { transition-delay: 0.31s; }
html.js-motion [data-animate="cards"].is-visible .highlight-card:nth-child(5),
html.js-motion [data-animate="cards"].is-visible .swiper-slide:nth-child(5) .amenity-card,
html.js-motion [data-animate="cards"].is-visible .floorplan-card:nth-child(5) { transition-delay: 0.38s; }
html.js-motion [data-animate="cards"].is-visible .highlight-card:nth-child(6),
html.js-motion [data-animate="cards"].is-visible .swiper-slide:nth-child(6) .amenity-card,
html.js-motion [data-animate="cards"].is-visible .floorplan-card:nth-child(6) { transition-delay: 0.45s; }
html.js-motion [data-animate="cards"].is-visible .highlight-card:nth-child(7),
html.js-motion [data-animate="cards"].is-visible .swiper-slide:nth-child(7) .amenity-card,
html.js-motion [data-animate="cards"].is-visible .floorplan-card:nth-child(7) { transition-delay: 0.52s; }
html.js-motion [data-animate="cards"].is-visible .highlight-card:nth-child(8),
html.js-motion [data-animate="cards"].is-visible .swiper-slide:nth-child(8) .amenity-card,
html.js-motion [data-animate="cards"].is-visible .floorplan-card:nth-child(8) { transition-delay: 0.59s; }

html.js-motion [data-animate="cards"].is-visible .highlights-swiper__slide-grid .highlight-card:nth-child(1) { transition-delay: 0.1s; }
html.js-motion [data-animate="cards"].is-visible .highlights-swiper__slide-grid .highlight-card:nth-child(2) { transition-delay: 0.17s; }
html.js-motion [data-animate="cards"].is-visible .highlights-swiper__slide-grid .highlight-card:nth-child(3) { transition-delay: 0.24s; }
html.js-motion [data-animate="cards"].is-visible .highlights-swiper__slide-grid .highlight-card:nth-child(4) { transition-delay: 0.31s; }
html.js-motion [data-animate="cards"].is-visible .highlights-swiper__slide-grid .highlight-card:nth-child(5) { transition-delay: 0.38s; }
html.js-motion [data-animate="cards"].is-visible .highlights-swiper__slide-grid .highlight-card:nth-child(6) { transition-delay: 0.45s; }
html.js-motion [data-animate="cards"].is-visible .highlights-swiper__slide-grid .highlight-card:nth-child(7) { transition-delay: 0.52s; }
html.js-motion [data-animate="cards"].is-visible .highlights-swiper__slide-grid .highlight-card:nth-child(8) { transition-delay: 0.59s; }

/* --------------------------------------------------------------------------
   Gallery media reveal
   -------------------------------------------------------------------------- */
html.js-motion [data-animate="gallery"] {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

html.js-motion [data-animate="gallery"] .gallery-swiper .swiper-slide .gallery-slide__media,
html.js-motion [data-animate="gallery"] .gallery-swiper .swiper-slide img {
  opacity: 0;
  transform: translate3d(0, 25px, 0) scale(0.96);
  transition:
    opacity 0.7s var(--ease-lux),
    transform 0.7s var(--ease-lux);
}

html.js-motion [data-animate="gallery"].is-visible .gallery-swiper .swiper-slide .gallery-slide__media,
html.js-motion [data-animate="gallery"].is-visible .gallery-swiper .swiper-slide img {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}

html.js-motion [data-animate="gallery"].is-visible .gallery-swiper .swiper-slide:nth-child(2) img,
html.js-motion [data-animate="gallery"].is-visible .gallery-swiper .swiper-slide:nth-child(2) .gallery-slide__media {
  transition-delay: 0.2s;
}

html.js-motion [data-animate="gallery"].is-visible .gallery-swiper .swiper-slide:nth-child(3) img,
html.js-motion [data-animate="gallery"].is-visible .gallery-swiper .swiper-slide:nth-child(3) .gallery-slide__media {
  transition-delay: 0.28s;
}

.gallery-swiper .swiper-slide img {
  transition:
    opacity 0.7s var(--ease-lux),
    transform 0.55s var(--ease-lux);
}

.gallery-swiper .swiper-slide:hover img {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   Text blocks
   -------------------------------------------------------------------------- */
[data-animate] p,
[data-animate] .about__text p {
  /* inherited from parent reveal — avoid double fade */
}

html.js-motion .about__text[data-animate] > * {
  opacity: 0;
  transform: translate3d(0, var(--text-y), 0);
  transition:
    opacity 0.65s var(--ease-lux),
    transform 0.65s var(--ease-lux);
}

html.js-motion .about__text[data-animate].is-visible > * {
  opacity: 1;
  transform: none;
}

html.js-motion .about__text[data-animate].is-visible > *:nth-child(1) { transition-delay: 0.12s; }
html.js-motion .about__text[data-animate].is-visible > *:nth-child(2) { transition-delay: 0.2s; }
html.js-motion .about__text[data-animate].is-visible > *:nth-child(3) { transition-delay: 0.28s; }

/* --------------------------------------------------------------------------
   Buttons — reveal + hover lift
   -------------------------------------------------------------------------- */
[data-animate] .btn--magnetic,
[data-animate] .hero__btn,
[data-animate] .gallery__cta-btn,
[data-animate] .price-table__btn,
[data-animate] .floorplan-card__btn {
  transition:
    opacity 0.55s var(--ease-lux),
    transform 0.4s var(--ease-lux),
    box-shadow 0.4s var(--ease-lux),
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}

.btn--magnetic,
.hero__btn,
.gallery__cta-btn,
.header__cta,
.price-table__btn,
.floorplan-card__btn,
.popup__cta {
  transition:
    transform 0.4s var(--ease-lux),
    box-shadow 0.4s var(--ease-lux),
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    opacity 0.4s var(--ease-lux);
}

.btn--magnetic:hover,
.hero__btn:hover,
.gallery__cta-btn:hover,
.header__cta:hover,
.price-table__btn:hover,
.floorplan-card__btn:hover {
  transform: translate3d(0, -2px, 0);
}

.floorplan-card:hover {
  transform: translate3d(0, -6px, 0);
}

.floorplan-card__btn {
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux), background 0.35s ease;
}

.floorplan-card:hover .floorplan-card__btn {
  transform: translate3d(0, -2px, 0);
}

/* Remove continuous bounce on floorplan CTA */
.floorplan-card__content .floorplan-card__btn {
  animation: none;
}

/* --------------------------------------------------------------------------
   Page load — Hero cinematic sequence (after window.load)
   -------------------------------------------------------------------------- */
html.js-motion .hero {
  transition: opacity 0.7s var(--ease-lux);
}

html.js-motion:not(.is-page-ready) .hero::before {
  opacity: 0;
}

html.js-motion .hero::before {
  transition: opacity 0.85s var(--ease-lux) 0.15s;
}

html.is-page-ready .hero::before {
  opacity: 1;
}

/* Image layer for Ken Burns — swaps in after load (LCP keeps CSS bg until then) */
html.js-motion .hero__bg {
  display: none;
}

html.is-page-ready.js-motion .hero__bg {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

html.is-page-ready.js-motion .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.04);
  will-change: transform;
  animation: heroBgSettle 1.15s var(--ease-lux) forwards;
}

html.is-page-ready.js-motion .hero {
  background-image: none;
}

@keyframes heroBgSettle {
  to {
    transform: scale(1);
  }
}

html.js-motion:not(.is-page-ready) .hero__project,
html.js-motion:not(.is-page-ready) .hero__config,
html.js-motion:not(.is-page-ready) .hero__tagline,
html.js-motion:not(.is-page-ready) .hero__location,
html.js-motion:not(.is-page-ready) .hero__price,
html.js-motion:not(.is-page-ready) .hero__meta-bar,
html.js-motion:not(.is-page-ready) .hero__scroll,
html.js-motion:not(.is-page-ready) .hero__ctas .hero__btn {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

html.js-motion:not(.is-page-ready) .hero__ctas .hero__btn {
  transform: translate3d(0, 16px, 0);
}

html.is-page-ready .hero__project {
  animation: luxEnter 0.75s var(--ease-lux) 0.2s forwards;
}

html.is-page-ready .hero__config {
  animation: luxEnter 0.75s var(--ease-lux) 0.36s forwards;
}

html.is-page-ready .hero__tagline {
  animation: luxEnter 0.7s var(--ease-lux) 0.42s forwards;
}

html.is-page-ready .hero__location {
  animation: luxEnter 0.7s var(--ease-lux) 0.52s forwards;
}

html.is-page-ready .hero__price {
  animation: luxEnter 0.7s var(--ease-lux) 0.6s forwards;
}

html.is-page-ready .hero__ctas .hero__btn:nth-child(1) {
  animation: luxEnter 0.65s var(--ease-lux) 0.76s forwards;
}

html.is-page-ready .hero__ctas .hero__btn:nth-child(2) {
  animation: luxEnter 0.65s var(--ease-lux) 0.88s forwards;
}

html.is-page-ready .hero__meta-bar {
  animation: luxEnter 0.65s var(--ease-lux) 1s forwards;
}

html.is-page-ready .hero__scroll {
  animation: luxEnter 0.65s var(--ease-lux) 1.12s forwards;
}

@keyframes luxEnter {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* --------------------------------------------------------------------------
   Header — fade from top on load + smooth scrolled state
   -------------------------------------------------------------------------- */
html.js-motion .header {
  transition:
    background 0.45s var(--ease-lux),
    box-shadow 0.45s var(--ease-lux),
    backdrop-filter 0.45s var(--ease-lux),
    -webkit-backdrop-filter 0.45s var(--ease-lux),
    opacity 0.7s var(--ease-lux),
    transform 0.7s var(--ease-lux);
}

html.js-motion:not(.is-page-ready) .header {
  opacity: 0;
  transform: translate3d(0, -16px, 0);
}

html.is-page-ready .header {
  opacity: 1;
  transform: none;
}

html.js-motion:not(.is-page-ready) .header__link,
html.js-motion:not(.is-page-ready) .header__logo,
html.js-motion:not(.is-page-ready) .header__actions {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
}

html.is-page-ready .header__link {
  animation: luxEnter 0.55s var(--ease-lux) forwards;
}

html.is-page-ready .header__link:nth-child(1) { animation-delay: 0.25s; }
html.is-page-ready .header__link:nth-child(2) { animation-delay: 0.32s; }
html.is-page-ready .header__link:nth-child(3) { animation-delay: 0.39s; }
html.is-page-ready .header__link:nth-child(4) { animation-delay: 0.46s; }
html.is-page-ready .header__link:nth-child(5) { animation-delay: 0.53s; }
html.is-page-ready .header__link:nth-child(6) { animation-delay: 0.6s; }
html.is-page-ready .header__link:nth-child(7) { animation-delay: 0.67s; }
html.is-page-ready .header__link:nth-child(8) { animation-delay: 0.74s; }

html.is-page-ready .header__logo {
  animation: luxEnter 0.65s var(--ease-lux) 0.15s forwards;
}

html.is-page-ready .header__actions {
  animation: luxEnter 0.65s var(--ease-lux) 0.35s forwards;
}

/* --------------------------------------------------------------------------
   Floating actions — slide from right
   -------------------------------------------------------------------------- */
html.js-motion .float-actions {
  transition:
    opacity 0.65s var(--ease-lux),
    transform 0.65s var(--ease-lux);
  transition-delay: 1.1s;
}

html.js-motion:not(.is-page-ready) .float-actions {
  opacity: 0;
  transform: translate3d(24px, 0, 0);
}

html.is-page-ready .float-actions {
  opacity: 1;
  transform: none;
}

.float-btn {
  transition:
    transform 0.35s var(--ease-lux),
    box-shadow 0.35s var(--ease-lux),
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.float-btn:hover {
  transform: translate3d(0, -3px, 0) scale(1.04);
}

/* --------------------------------------------------------------------------
   Video play — soft pulse every 4s (not continuous throb)
   -------------------------------------------------------------------------- */






@media (max-width: 1023px) {
  

  

  
}

.briefing__media {
  transition: transform 0.6s var(--ease-lux);
}

[data-animate].is-visible .briefing__media,
.briefing__video.is-visible .briefing__media {
  /* keep layout */
}

/* --------------------------------------------------------------------------
   Popup — open / close (functionality unchanged)
   -------------------------------------------------------------------------- */
.popup {
  transition:
    opacity 0.45s var(--ease-lux),
    visibility 0.45s var(--ease-lux);
}

.popup__dialog {
  transform: translate3d(0, 30px, 0) scale(0.97);
  opacity: 0;
  transition:
    transform 0.45s var(--ease-lux),
    opacity 0.45s var(--ease-lux);
}

.popup.is-open .popup__dialog {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

.popup__backdrop {
  opacity: 0;
  transition: opacity 0.45s var(--ease-lux);
}

.popup.is-open .popup__backdrop {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Lazy images — soft fade only (no skeletons)
   -------------------------------------------------------------------------- */
html.js-motion img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.6s var(--ease-lux);
  background: none;
  content-visibility: auto;
}

html.js-motion img[loading="lazy"].is-loaded {
  opacity: 1;
  background: none;
  animation: none;
}

/* --------------------------------------------------------------------------
   Parallax helper
   -------------------------------------------------------------------------- */
[data-parallax] {
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Mobile — reduced travel & duration
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --reveal-y: 20px;
    --title-y: 16px;
    --text-y: 14px;
    --btn-y: 12px;
    --card-y: 20px;
  }

  [data-animate] {
    transition-duration: 0.5s;
  }

  [data-stagger] > *,
  [data-animate="cards"] .highlight-card,
  [data-animate="cards"] .amenity-card,
  [data-animate="cards"] .floorplan-card {
    transition-duration: 0.5s;
  }

  html.is-page-ready .hero__project,
  html.is-page-ready .hero__config,
  html.is-page-ready .hero__location,
  html.is-page-ready .hero__price,
  html.is-page-ready .hero__ctas .hero__btn,
  html.is-page-ready .hero__meta-bar {
    animation-duration: 0.5s;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --reveal-y: 0px;
    --title-y: 0px;
    --text-y: 0px;
    --btn-y: 0px;
    --card-y: 0px;
  }

  html.is-page-ready .hero,
  html.is-page-ready .hero::before,
  html.is-page-ready .header,
  html.is-page-ready .float-actions,
  [data-animate],
  [data-animate].is-visible,
  [data-stagger] > *,
  [data-stagger].is-visible > *,
  [data-animate="header"] [class$="__accent"],
  [data-animate="header"] [class*="__accent"],
  [data-animate="header"] [class$="__title"],
  [data-animate="header"] [class*="__title"],
  [data-animate="header"] [class$="__subtitle"],
  [data-animate="header"] [class*="__subtitle"],
  [data-animate="cards"] .highlight-card,
  [data-animate="cards"] .amenity-card,
  [data-animate="cards"] .floorplan-card,
  .hero__project,
  .hero__config,
  .hero__tagline,
  .hero__location,
  .hero__price,
  .hero__meta-bar,
  .hero__scroll,
  .hero__ctas .hero__btn,
  .header__link,
  .header__logo,
  .header__actions,
  .hero__bg img,
  .popup,
  .popup__dialog,
  .popup__backdrop,
  img[loading="lazy"] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  

  .highlight-card:hover,
  .amenity-card:hover,
  .floorplan-card:hover,
  .btn--magnetic:hover,
  .float-btn:hover {
    transform: none !important;
  }
}