/* ============================================================
   effects.css — Gruhnirman Realty
   ONE orchestrated moment: the hero load sequence (gold hairline frame draws
   in, then the headline rises). One restrained IntersectionObserver reveal.
   Everything gates behind prefers-reduced-motion.
   ============================================================ */

/* ── HERO LOAD SEQUENCE ───────────────────────────────────── */
/* 1. The gold hairline frame draws itself in from the corners. */
.hero-frame-line.top,
.hero-frame-line.bottom { transform: scaleX(0); transform-origin: left center; animation: datum-draw-x .7s cubic-bezier(.4,0,.2,1) forwards; }
.hero-frame-line.left,
.hero-frame-line.right  { transform: scaleY(0); transform-origin: top center; animation: datum-draw-y .7s cubic-bezier(.4,0,.2,1) .15s forwards; }
.hero-frame-line.bottom { transform-origin: right center; }
.hero-frame-line.right  { transform-origin: bottom center; }

@keyframes datum-draw-x { to { transform: scaleX(1); } }
@keyframes datum-draw-y { to { transform: scaleY(1); } }

/* 2. The seal fades + settles once the frame is in. */
.hero-seal { opacity: 0; animation: seal-in .8s cubic-bezier(.34,1.3,.64,1) .55s forwards; }
@keyframes seal-in { from { opacity: 0; transform: scale(.82) rotate(-14deg); } to { opacity: 1; transform: none; } }

/* 3. The anchored headline block rises, line by line. */
.hero-anchor > * { opacity: 0; transform: translateY(26px); animation: hero-rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-eyebrow { animation-delay: .5s; }
.hero-dev     { animation-delay: .62s; }
.hero-title   { animation-delay: .74s; }
.hero-sub     { animation-delay: .9s; }

.hero-corner-cta > * { opacity: 0; transform: translateY(18px); animation: hero-rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-corner-cta > *:nth-child(1) { animation-delay: 1.0s; }
.hero-corner-cta > *:nth-child(2) { animation-delay: 1.08s; }
.hero-corner-cta > *:nth-child(3) { animation-delay: 1.16s; }

@keyframes hero-rise { to { opacity: 1; transform: none; } }

/* Slow subtle zoom on the hero photo (single, ambient) */
.hero-media { animation: hero-drift 18s ease-out forwards; }
@keyframes hero-drift { from { transform: scale(1.06); } to { transform: scale(1); } }

/* ── SCROLL REVEAL (single restrained device) ─────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

.stagger-child { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.stagger-parent.is-visible .stagger-child { opacity: 1; transform: none; }
.stagger-parent.is-visible .stagger-child:nth-child(2) { transition-delay: .08s; }
.stagger-parent.is-visible .stagger-child:nth-child(3) { transition-delay: .16s; }
.stagger-parent.is-visible .stagger-child:nth-child(4) { transition-delay: .24s; }

/* Filter transitions on the listings grid */
.plate.is-hidden { display: none; }

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .hero-frame-line.top, .hero-frame-line.bottom { transform: scaleX(1); }
  .hero-frame-line.left, .hero-frame-line.right { transform: scaleY(1); }
  .hero-seal, .hero-anchor > *, .hero-corner-cta > * { opacity: 1; transform: none; }
  .hero-media { transform: none; }
  .reveal, .stagger-child { opacity: 1; transform: none; }
}