/* ============================================================
   GURGAON LUXE PROPERTIES — motion.css
   Signature homepage choreography.
   Luxury motion = slow, deliberate, fluid (400–800ms scroll
   entrances; 150–300ms micro-interactions).
   Every effect is opt-in via data-attributes and disabled
   under prefers-reduced-motion.
   ============================================================ */

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 1001; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #a8862a, var(--gold) 45%, var(--gold-hover));
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.55);
  will-change: transform;
}

/* ---------- Cursor aura (desktop only, native cursor kept) ---------- */
.cursor-aura {
  position: fixed; top: 0; left: 0; z-index: 1500;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12), transparent 70%);
  pointer-events: none; opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(1);
  transition: opacity .4s ease, width .35s var(--ease), height .35s var(--ease),
              background .35s ease, border-color .35s ease;
  will-change: transform;
}
.cursor-aura.on { opacity: 1; }
.cursor-aura.hot {
  width: 64px; height: 64px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.22), transparent 70%);
  border-color: var(--gold-hover);
}

/* ---------- Split text: characters (hero headline) ---------- */
[data-split-done] { perspective: 800px; }
.ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotateX(-52deg);
  transform-origin: 50% 100%;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .9s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
}
.ch.in { opacity: 1; transform: none; }

/* ---------- Split text: word mask (section headings) ---------- */
/* padding+margin pair keeps descenders (y, g, p) from being clipped by overflow */
.wm {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.wm > i {
  display: inline-block; font-style: inherit;
  transform: translateY(110%);
  transition: transform .85s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.wm.in > i { transform: none; }

/* ---------- Image mask reveal ----------
   Fail-safe by design: an image is ONLY hidden once JS has added .mo-mask,
   and JS guarantees a matching .in (scroll engine + timeout fallback).
   No JS, no observer, a thrown error → images simply stay visible.
   The default state of a photo must never be "invisible". */
img.mo-mask {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s cubic-bezier(.16, 1, .3, 1);
  will-change: clip-path;
}
img.mo-mask.in { clip-path: inset(0 0 0 0); }

/* Gold sweep that rides across a revealing image.
   Real element, not ::after — .prop-media / .masonry-item already own their ::after. */
.sweep-wrap { position: relative; overflow: hidden; }
.sweep {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(212, 175, 55, 0.30) 50%, transparent 65%);
  transform: translateX(-120%);
}
.sweep-wrap.swept .sweep {
  transition: transform 1.3s cubic-bezier(.5, 0, .2, 1);
  transform: translateX(120%);
}

/* ---------- Magnetic buttons ---------- */
[data-magnetic] { will-change: transform; }
[data-magnetic] > * { pointer-events: none; }

/* ---------- 3D tilt cards ---------- */
/* perspective is applied per-card in the transform itself (motion.js) */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-tilt] .prop-media::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, 0.22), transparent 60%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
[data-tilt].tilting .prop-media::before { opacity: 1; }

/* ---------- Ambient gold orbs in dark sections ---------- */
.section-dark { position: relative; overflow: hidden; }
.section-dark > .container { position: relative; z-index: 1; }
.section-dark::before,
.section-dark::after {
  content: ''; position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
}
.section-dark::before {
  width: 620px; height: 620px; top: -18%; right: -12%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.11), transparent 65%);
  animation: orbDrift 19s ease-in-out infinite;
}
.section-dark::after {
  width: 460px; height: 460px; bottom: -20%; left: -8%;
  background: radial-gradient(circle, rgba(78, 160, 210, 0.09), transparent 65%);
  animation: orbDrift 24s ease-in-out infinite reverse;
}

@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-40px, 34px) scale(1.09); }
  66%      { transform: translate(28px, -26px) scale(0.95); }
}

/* ---------- Scroll-scrub helpers ---------- */
[data-mo-parallax] { will-change: transform; }

/* Virtual-tour stage: scrub-driven rise + settle */
[data-mo-rise] { will-change: transform; }

/* ---------- Nav link + card micro-interactions ---------- */
.prop-card { transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease); }

/* Gold underline sweep on section eyebrows when revealed */
.eyebrow::before { transition: width .7s cubic-bezier(.16, 1, .3, 1); }
.reveal .eyebrow::before,
.reveal-left .eyebrow::before,
.reveal-right .eyebrow::before { width: 0; }
.reveal.in .eyebrow::before,
.reveal-left.in .eyebrow::before,
.reveal-right.in .eyebrow::before { width: 36px; }

/* ---------- Stat digits pop ---------- */
.stat-value { transition: transform .5s var(--ease); }
.stat-item:hover .stat-value { transform: translateY(-4px); }

/* ============================================================
   REDUCED MOTION — everything resolves to its final state
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .cursor-aura { display: none !important; }
  .ch, .wm > i {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  img.mo-mask { clip-path: none !important; transition: none !important; }
  .sweep { display: none !important; }
  .section-dark::before, .section-dark::after { animation: none !important; }
  [data-tilt] { transform: none !important; }
}

/* Touch devices: no cursor aura, no tilt */
@media (hover: none), (pointer: coarse) {
  .cursor-aura { display: none !important; }
  [data-tilt] { transform: none !important; }
}