/* ============================================
   GharRent — Hero Motion Layer
   Adds animation ONLY. Does not redeclare any
   color/font/layout property already set in
   style.css, so it's safe to link AFTER it:

   <link rel="stylesheet" href="assets/css/style.css">
   <link rel="stylesheet" href="assets/css/hero-motion.css">
   ============================================ */

/* ---- 1. Subtle animated light-sweep over the existing hero gradient ---- */
/* This sits on top of your current .hero background as a soft moving
   highlight — your gradient + skyline underneath are untouched. */
.hero{
  position: relative;
  overflow: hidden;
}

.hero::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255,255,255,0.10) 45%,
    rgba(191,219,254,0.16) 50%,
    rgba(255,255,255,0.10) 55%,
    transparent 70%
  );
  background-size: 250% 100%;
  animation: sweep 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes sweep{
  0%   { background-position: 130% 0; }
  50%  { background-position: -30% 0; }
  100% { background-position: 130% 0; }
}

/* keep real content above the sweep layer */
.hero-content,
.hero-split{
  position: relative;
  z-index: 1;
}

/* ---- 2. Twinkling window lights, layered over the skyline silhouette ---- */
.hero-lights{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-lights circle{
  animation: twinkle 4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes twinkle{
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.75; }
}

/* ---- 3. Entrance animation for hero copy & controls ---- */
/* Only opacity/transform are added here — none of your existing
   font-size, color, or spacing rules are touched. */
.hero-badge,
.hero-title,
.hero-subtitle,
.hero-buttons,
.hero-search,
.hero-stats,
.property-chip-group,
.popular-tags{
  opacity: 0;
  animation: rise 0.8s cubic-bezier(.16,1,.3,1) forwards;
}

.hero-badge{ animation-delay: 0.05s; }
.hero-title{ animation-delay: 0.15s; }
.hero-subtitle{ animation-delay: 0.3s; }
.hero-stats{ animation-delay: 0.4s; }
.hero-buttons{ animation-delay: 0.45s; }
.hero-search{ animation-delay: 0.6s; }
.property-chip-group{ animation-delay: 0.7s; }
.popular-tags{ animation-delay: 0.75s; }

@keyframes rise{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---- 4. Gentle breathing glow on the search box ---- */
/* Animates only the box-shadow — your existing radius/background/padding stay as-is. */
.search-box{
  animation: glow-pulse 3.5s ease-in-out infinite;
}

@keyframes glow-pulse{
  0%, 100% { box-shadow: 0 15px 40px rgba(0,0,0,.15); }
  50%      { box-shadow: 0 18px 48px rgba(37,99,235,.28); }
}

/* ---- 5. Floating drift for hero-float badges, if used on this page ---- */
.hero-float-1{ animation: float-a 6s ease-in-out infinite; }
.hero-float-2{ animation: float-b 7s ease-in-out infinite; }
.hero-float-3{ animation: float-c 5.5s ease-in-out infinite; }

@keyframes float-a{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
@keyframes float-b{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(8px); } }
@keyframes float-c{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .hero::after,
  .hero-lights circle,
  .search-box,
  .hero-float-1, .hero-float-2, .hero-float-3{
    animation: none;
  }
  .hero-badge, .hero-title, .hero-subtitle, .hero-buttons,
  .hero-search, .hero-stats, .property-chip-group, .popular-tags{
    animation: none;
    opacity: 1;
  }
}