/* ================================================================
   motion.css — BRP Realty Noida | Motion Language v4
   
   Awwwards-reviewed. Every decision is intentional.
   Less is more. Quality over quantity.
   ================================================================ */

/* ================================================================
   MOTION TOKENS — Single source of truth
   ================================================================ */
:root {
  /* Easings — handpicked cinematic curves */
  --ease-out-expo  : cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart : cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring    : cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-float     : cubic-bezier(0.45, 0, 0.55, 1);  /* gentle float */

  /* Durations — consistent scale */
  --dur-instant   : 0.15s;
  --dur-fast      : 0.30s;
  --dur-base      : 0.55s;
  --dur-slow      : 0.80s;
  --dur-cinematic : 1.00s;
}

/* ================================================================
   SCROLL PROGRESS BAR
   ================================================================ */
#brp-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg,
    #ecc01b 0%,
    rgba(236,192,27,0.5) 100%);
  z-index: 99999;
  pointer-events: none;
}

/* ================================================================
   REVEAL SYSTEM
   
   Rule: translateY never exceeds 28px — keeps it elegant, not dramatic.
   blur-up is reserved for images and glass cards only, not text.
   ================================================================ */
.brp-reveal {
  opacity: 0;
}

/* 1. Fade + rise — general use */
.brp-reveal[data-reveal="fade-up"] {
  transform: translateY(28px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}

/* 2. Pure fade — rera badges, labels, subtle elements */
.brp-reveal[data-reveal="fade"] {
  transition: opacity var(--dur-slow) var(--ease-out-expo);
}

/* 3. Blur + rise — images and glass cards ONLY */
.brp-reveal[data-reveal="blur-up"] {
  transform: translateY(20px);
  filter: blur(6px);
  transition:
    opacity var(--dur-cinematic) var(--ease-out-expo),
    transform var(--dur-cinematic) var(--ease-out-expo),
    filter var(--dur-cinematic) var(--ease-out-expo);
}

/* 4. Scale + rise — cards */
.brp-reveal[data-reveal="scale-up"] {
  transform: translateY(24px) scale(0.97);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}

/* 5. Slide left */
.brp-reveal[data-reveal="slide-left"] {
  transform: translateX(-28px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}

/* 6. Slide right */
.brp-reveal[data-reveal="slide-right"] {
  transform: translateX(28px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}

/* Visible state */
.brp-reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Stagger delays — column-based, not cumulative */
.brp-reveal[data-delay="1"] { transition-delay: 0.08s; }
.brp-reveal[data-delay="2"] { transition-delay: 0.17s; }
.brp-reveal[data-delay="3"] { transition-delay: 0.26s; }

/* ================================================================
   HEADER ENTRANCE
   ================================================================ */
header {
  opacity: 0;
  transform: translateY(-18px);
  transition:
    opacity 0.55s var(--ease-out-expo) 0.05s,
    transform 0.55s var(--ease-out-expo) 0.05s;
}
header.brp-in {
  opacity: 1;
  transform: translateY(0);
}

/* Header scroll depth cue — cast subtle shadow as user scrolls */
header.scrolled {
  box-shadow: 0 1px 0 rgba(236,192,27,0.08),
              0 4px 24px rgba(0,0,0,0.14) !important;
}
.dark header.scrolled {
  box-shadow: 0 1px 0 rgba(236,192,27,0.08),
              0 4px 32px rgba(0,0,0,0.4) !important;
}

/* ================================================================
   HERO — Cinematic layered entrance
   ================================================================ */
.hero-left-editorial {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-cinematic) var(--ease-out-expo) 0.12s,
    transform var(--dur-cinematic) var(--ease-out-expo) 0.12s;
}
.hero-left-editorial.brp-in {
  opacity: 1;
  transform: translateY(0);
}

.hero-right-visual {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity var(--dur-cinematic) var(--ease-out-expo) 0.28s,
    transform var(--dur-cinematic) var(--ease-out-expo) 0.28s;
}
.hero-right-visual.brp-in {
  opacity: 1;
  transform: translateX(0);
}

/* ================================================================
   HERO IMAGE — Gentle breathing float
   Only runs on desktop; mobile gets a still image for performance.
   7s cycle — slow enough to feel organic, not distracting.
   ================================================================ */
@media (min-width: 769px) {
  .visual-image-frame {
    animation: hero-float 7s var(--ease-float) infinite;
  }
  .visual-image-frame:hover {
    animation-play-state: paused;
  }
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}

/* ================================================================
   WORD REVEAL
   ================================================================ */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.word-inner {
  display: inline-block;
  transform: translateY(108%);
  opacity: 0;
  transition:
    transform 0.65s var(--ease-out-expo),
    opacity   0.65s var(--ease-out-expo);
}
.word-inner.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* ================================================================
   NAV — Underline that animates in from centre outward
   ================================================================ */
.desktop-nav a {
  position: relative;
}
.desktop-nav a::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 75%; height: 2px;
  background: var(--accent, #ecc01b);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out-expo);
}
.desktop-nav a:hover::after,
.desktop-nav a.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* ================================================================
   BUTTONS — Intentional micro-interactions
   
   Shine: diagonal sweep that feels like real light catching glass.
   Press: snap scale-down on click.
   Lift: 2px rise — enough to feel, not enough to distract.
   ================================================================ */
.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-out-expo),
    box-shadow var(--dur-fast) var(--ease-out-expo) !important;
}

/* Light sweep — contained within button overflow:hidden */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 40%,
    rgba(255,255,255,0.13) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out-quart);
  pointer-events: none;
  z-index: 1;
}
.btn:hover::before {
  transform: translateX(100%);
}

.btn:hover {
  transform: translateY(-2px) !important;
}
.btn:active {
  transform: translateY(0) scale(0.97) !important;
  transition-duration: var(--dur-instant) !important;
}

/* ================================================================
   CARDS — Physical elevation system
   
   Property cards: most prominent — largest lift, gold border hint.
   Feature cards: supporting — gentle lift.
   Blog + Testimonial: light lift, image zoom on hover.
   Sector cards: subtle scale + lift.
   ================================================================ */
.property-card,
.feature-card,
.blog-card,
.testimonial-card,
.sector-card {
  transition:
    transform 0.4s var(--ease-out-expo),
    box-shadow 0.4s var(--ease-out-expo) !important;
  /* will-change NOT set statically — it costs GPU layers for every card */
}

.property-card:hover {
  transform: translateY(-10px) !important;
  box-shadow:
    0 20px 56px rgba(0,0,0,0.12),
    0 0 0 1px rgba(236,192,27,0.14) !important;
}
.dark .property-card:hover {
  box-shadow:
    0 20px 56px rgba(0,0,0,0.48),
    0 0 0 1px rgba(236,192,27,0.22) !important;
}

.feature-card:hover {
  transform: translateY(-5px) !important;
}

.blog-card:hover {
  transform: translateY(-7px) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.1),
    0 0 0 1px rgba(236,192,27,0.1) !important;
}
.dark .blog-card:hover {
  box-shadow:
    0 16px 48px rgba(0,0,0,0.4),
    0 0 0 1px rgba(236,192,27,0.16) !important;
}

.testimonial-card:hover {
  transform: translateY(-4px) !important;
}

.sector-card:hover {
  transform: translateY(-5px) scale(1.006) !important;
}

/* Image zoom on card hover */
.property-image,
.blog-card-image img {
  transition: transform 0.55s var(--ease-out-expo) !important;
  will-change: transform;
}
.property-card:hover .property-image {
  transform: scale(1.05) !important;
}
.blog-card:hover .blog-card-image img {
  transform: scale(1.05) !important;
}

/* ================================================================
   MOUSE-REACTIVE HERO GLOW
   ================================================================ */
#hero-glow {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(236,192,27,0.065) 0%,
    rgba(11,90,58,0.03) 45%,
    transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero:hover #hero-glow {
  opacity: 1;
}

/* ================================================================
   TRUST STATS BAR
   ================================================================ */
.trust-stats-bar {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
}
.trust-stats-bar.brp-in {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================
   FOOTER
   ================================================================ */
footer {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}
footer.brp-in {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================
   FORM INPUTS — Subtle focus feedback
   ================================================================ */
.form-control {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s var(--ease-out-expo) !important;
}
.form-control:focus {
  transform: scale(1.005) !important;
}

/* ================================================================
   MODAL — Spring entrance
   ================================================================ */
.modal-overlay {
  transition: opacity 0.3s var(--ease-out-expo),
              visibility 0.3s !important;
}
.modal-content {
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition:
    transform 0.45s var(--ease-spring),
    opacity 0.35s var(--ease-out-expo) !important;
}
.modal-overlay.open .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ================================================================
   WHATSAPP — Breathing pulse ring
   Subtle — never draws the eye away from content.
   ================================================================ */
.wa-float-btn {
  position: relative;
}
.wa-float-btn::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.3);
  animation: wa-breathe 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wa-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%       { transform: scale(1.22); opacity: 0;   }
}

/* ================================================================
   CUSTOM CURSOR RING
   System cursor stays. Ring is purely decorative and reactive.
   ================================================================ */
.custom-cursor-dot {
  display: none !important;
}
.custom-cursor-glow {
  display: block !important;
  position: fixed;
  width: 30px; height: 30px;
  border: 1.5px solid rgba(236,192,27,0.5);
  border-radius: 50%;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 999999;
  will-change: transform;
  /* Size transitions only — position updated via JS rAF */
  transition:
    width  0.3s var(--ease-out-expo),
    height 0.3s var(--ease-out-expo),
    border-color 0.25s ease,
    background   0.25s ease;
}
.custom-cursor-glow.active {
  width: 50px; height: 50px;
  border-color: rgba(236,192,27,0.8);
  background: rgba(236,192,27,0.04);
}

@media (hover: none), (max-width: 1024px) {
  .custom-cursor-glow { display: none !important; }
}

/* ================================================================
   HARDWARE ACCELERATION
   Only the hero image float gets a static will-change — it loops
   indefinitely so the layer cost is justified.
   Cards get will-change applied by JS on mouseenter only.
   ================================================================ */
.visual-image-frame {
  will-change: transform;
}

/* ================================================================
   REDUCED MOTION — Full accessibility compliance
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .brp-reveal,
  .hero-left-editorial,
  .hero-right-visual,
  header, footer,
  .trust-stats-bar {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ================================================================
   MOBILE — Performance-first
   ================================================================ */
@media (max-width: 768px) {
  /* Reduce distances — reveals feel tighter on small screens */
  .brp-reveal[data-reveal="fade-up"]  { transform: translateY(18px); }
  .brp-reveal[data-reveal="scale-up"] { transform: translateY(14px) scale(0.98); }
  .brp-reveal[data-reveal="blur-up"]  { transform: translateY(12px); filter: blur(4px); }
  .brp-reveal[data-reveal="slide-left"]  { transform: translateX(-18px); }
  .brp-reveal[data-reveal="slide-right"] { transform: translateX(18px); }

  /* Disable heavy effects */
  #hero-glow { display: none !important; }
}

/* ================================================================
   PAGE CONTENT TRANSITIONS (SPA-like dynamic swap wrapper)
   ================================================================ */
#page-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
#page-content.is-exiting {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.22s cubic-bezier(0.25, 1, 0.5, 1);
}
#page-content.is-entering {
  opacity: 0;
  transform: translateY(8px);
}