/* RealEstateContent.ai — Elevation, effects & motion

   EVERY shadow is warm: rgba(26,9,9,α) for weight, rgba(180,1,1,α) for glow.
   Never neutral gray.

   THE ELEVATION RULE: the more a thing is meant to FLOAT above the page, the
   more brand red enters its shadow. Resting cards are nearly neutral-warm;
   the hero video and the featured pricing card glow red. */

:root {
  /* Crisp hairline "outline" look used on secondary buttons, inputs, plain cards */
  --shadow-outline: inset 0 0 0 1px var(--border-card);
  --shadow-outline-strong: inset 0 0 0 1px var(--border-strong);

  /* ---- The ladder, in ascending float ---- */
  --shadow-inset-card: 0 5px 14px rgba(26,9,9,0.06);   /* sub-elements inside a mockup */
  --shadow-card:       0 12px 34px rgba(26,9,9,0.07);  /* resting card */
  --shadow-mockup:     0 14px 30px rgba(26,9,9,0.14);  /* floating product mockup */
  --shadow-float:      0 18px 34px rgba(26,9,9,0.22);  /* fanned / overlapping cards */
  --shadow-brand:      0 22px 54px rgba(180,1,1,0.08), 0 8px 20px rgba(26,9,9,0.05);
  --shadow-hero-media: 0 44px 100px rgba(180,1,1,0.18), 0 16px 40px rgba(26,9,9,0.18);
  --shadow-pop:        0 28px 70px rgba(180,1,1,0.22), 0 8px 24px rgba(26,9,9,0.3); /* featured pricing card */

  /* Legacy aliases */
  --shadow-xs: 0 1px 2px rgba(26,9,9,0.05);
  --shadow-sm: var(--shadow-inset-card);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-brand);
  --shadow-hero: var(--shadow-hero-media);

  --shadow-focus: 0 0 0 3px rgba(255,127,127,0.45);

  /* ---- Gradients ---- */
  --gradient-hero: linear-gradient(180deg, #FFF3F2 0%, #FFFFFF 100%); /* @kind other */
  --gradient-hero-wash: radial-gradient(60% 48% at 50% 0%, rgba(180,1,1,0.14) 0%, rgba(180,1,1,0) 70%); /* @kind other */
  --gradient-tint: linear-gradient(180deg, var(--primary-50) 0%, rgba(255,255,255,0) 100%); /* @kind other */
  /* The pink stage every product-mockup illustration sits on */
  --gradient-stage: linear-gradient(158deg, #FFF5F4 0%, #FFE7E6 100%); /* @kind other */
  /* Standard scrim for ANY text over ANY photo. Warm black (20,7,7), never (0,0,0). */
  --scrim-photo: linear-gradient(180deg, rgba(20,7,7,0.42) 0%, rgba(20,7,7,0) 55%); /* @kind other */
  --text-shadow-on-photo: 0 2px 10px rgba(0,0,0,0.35); /* @kind other */
  /* Edge mask for any ambient loop — nothing may pop in or out */
  --mask-marquee: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); /* @kind other */

  /* =========================================================
     MOTION — four curves, each with a job
     ========================================================= */
  --ease-settle: cubic-bezier(.2,.85,.25,1);   /* @kind other */ /* things moving into place */
  --ease-pop:    cubic-bezier(.34,1.62,.55,1); /* @kind other */ /* things appearing — overshoots past 1 and settles back */
  --ease-drift:  cubic-bezier(.2,.9,.25,1.2);  /* @kind other */ /* avatars, lateral entrances */
  --ease-sweep:  cubic-bezier(.25,.8,.3,1);    /* @kind other */ /* rings, counters, long fills */
  --ease-standard: var(--ease-settle);         /* @kind other */ /* legacy alias */

  /* Durations in actual use */
  --dur-fade: .3s;    /* @kind other */ /* opacity */
  --dur-lift: .5s;    /* @kind other */ /* text lift */
  --dur-pop: .55s;    /* @kind other */ /* cell pop */
  --dur-fan: .72s;    /* @kind other */ /* card fan */
  --dur-grow: .85s;   /* @kind other */ /* bar grow */
  --dur-sweep: 1.5s;  /* @kind other */ /* ring sweep */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */

  /* Stagger constants */
  --stagger-cell: 42ms;  /* @kind other */ /* between grid cells */
  --stagger-group: 140ms;/* @kind other */ /* between grouped elements */

  /* Ambient loop periods — slow enough to read as atmosphere, not motion */
  --loop-garland: 64s;  /* @kind other */
  --loop-marquee: 165s; /* @kind other */
}

/* Animatable custom property — the only way to transition a conic-gradient stop.
   Used by the stat rings; reach for it for any progress / percentage visual. */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Every animated pattern resolves to its FINISHED state, never its initial one. */
  .rec-reveal { opacity: 1 !important; transform: none !important; }
  .rec-loop { animation: none !important; }
}