/* ============================================================
   Dubai Realty -- Luxury Motion Design (P4.3)
   Tokens used: var(--ease-luxury), var(--ease-quiet), var(--dur-*)
   Reduced motion respected globally.
   ============================================================ */

/* --- Scroll fade-in / reveal (IntersectionObserver hook) ----- */
[data-reveal],
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 700ms var(--ease-luxury, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 700ms var(--ease-luxury, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-revealed,
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Light/strong variants for fine-tuning a single section */
[data-reveal="fade"] { transform: none; }
[data-reveal="fade"].is-revealed { transform: none; }

[data-reveal="up-strong"] { transform: translateY(32px); }
[data-reveal="up-strong"].is-revealed { transform: translateY(0); }

/* --- Page transition (lite fade-out before navigation) ------- */
.is-page-leaving main,
.is-page-leaving [role="main"] {
  opacity: 0;
  transition: opacity 200ms var(--ease-quiet, cubic-bezier(0.4, 0, 0.2, 1));
}

/* --- Reduced motion: no-op everything ------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .is-page-leaving main,
  .is-page-leaving [role="main"] {
    opacity: 1 !important;
    transition: none !important;
  }
}