/* ==========================================================================
   Mega Mall Murree — Animation States & Keyframes
   --------------------------------------------------------------------------
   - Initial states for GSAP reveals (only under .js, so content is never
     hidden if scripts fail)
   - Pure-CSS ambient motion (scroll indicator, hero drift, shimmer)
   - Reduced-motion overrides
   ========================================================================== */

/* ---------- Reveal initial states (consumed by animations.js) ----------
   Applied only until JS adds .is-revealed, so finished elements fall back to
   their normal CSS (hover transforms, transitions) with no jump. Transitions
   are paused while hidden so they never fight GSAP's per-frame updates. */
.js [data-reveal]:not(.is-revealed)        { transition: none !important; }
.js [data-reveal="fade"]:not(.is-revealed) { opacity: 0; }
.js [data-reveal="up"]:not(.is-revealed)   { opacity: 0; transform: translateY(48px); }
.js [data-reveal="clip"]:not(.is-revealed) { clip-path: inset(100% 0 0 0); }
.js [data-split]:not(.is-revealed)         { visibility: hidden; }

/* Scroll lock (preloader, mobile menu, lightbox — see interactions.js).
   scrollbar-gutter keeps the layout from shifting when the bar disappears. */
html { scrollbar-gutter: stable; }
html.is-scroll-locked,
html.is-scroll-locked body { overflow: hidden; }

/* Brand stays hidden until animations.js has split it */
.js .preloader__inner { visibility: hidden; }

/* Failsafe: if scripts never start, the preloader gets out of the way */
.js .preloader { animation: preloader-failsafe 0.6s ease 10s forwards; }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }

/* ---------- Split text (SplitText or the custom fallback) ----------
   Each word sits in a clipping mask; padding + negative margin give
   descenders and italic overhangs room without changing layout. */
.split-word-mask,
[class*="word-mask"] { /* SplitText names its mask wrappers "…word-mask" */
  display: inline-block;
  overflow: clip;
  padding: 0.04em 0.1em 0.16em 0;
  margin: -0.04em -0.1em -0.16em 0;
  vertical-align: top;
}
.split-word,
.split-char { display: inline-block; will-change: transform; }
.is-revealed .split-word,
.is-revealed .split-char { will-change: auto; }

/* Image containers that GSAP scales inside a mask */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal img { transform-origin: center; will-change: transform; }

/* ---------- Keyframes ---------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes scroll-cue {
  0%   { transform: translateY(-6px); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(8px); opacity: 0; }
}

@keyframes slow-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* ---------- Applied ambient motion ---------- */

/* Circular scroll indicator: rotating arc + falling arrow + soft pulse */
.hero__scroll::before { animation: spin 6s linear infinite; }
.hero__scroll svg     { animation: scroll-cue 2.2s var(--ease-in-out) infinite; }
.hero__scroll::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  animation: pulse-ring 2.8s var(--ease-out-expo) infinite;
  pointer-events: none;
}
.hero__scroll:hover::before { animation-duration: 2s; }

/* Hero image breathes slowly behind the overlay */
.hero__media img { animation: slow-drift 18s ease-in-out infinite alternate; }

/* Image frames shimmer softly until their photo paints over them */
.img-reveal,
.floor-card__media {
  background-image:
    linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.035) 50%, transparent 70%),
    radial-gradient(ellipse at 70% 20%, rgba(184,154,112,0.14), transparent 60%);
  background-size: 200% 100%, 100% 100%;
  animation: shimmer 2.8s linear infinite;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .preloader { display: none; }

  .js [data-reveal],
  .js [data-split] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip-path: none !important;
  }

  .hero__media img { animation: none; transform: none; }
  .hero__scroll::after { display: none; }
}