/* ============================================================
   REAL ESTATE PORTAL — ANIMATIONS
   ============================================================ */

/* --- Keyframes --- */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -20px) rotate(5deg); }
  66% { transform: translate(-15px, 15px) rotate(-3deg); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -30px); }
}

@keyframes float3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-25px, 20px) scale(1.1); }
}

@keyframes heroCardFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes badgeFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  50% { transform: translate(-8px, -10px) rotate(0deg); }
}

@keyframes badgeFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(2deg); }
  50% { transform: translate(8px, -8px) rotate(0deg); }
}

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

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px) scale(0.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(40px) scale(0.9); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes heartBeat {
  0% { transform: scale(1); }
  15% { transform: scale(1.3); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes progressBar {
  from { width: 0; }
  to { width: 100%; }
}

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

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0,48,73,0.2); }
  50% { box-shadow: 0 0 0 6px rgba(0,48,73,0.1); }
}

/* --- Scroll Reveal Classes --- */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal--left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal--right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.12s; }
.stagger-3 { transition-delay: 0.19s; }
.stagger-4 { transition-delay: 0.26s; }
.stagger-5 { transition-delay: 0.33s; }
.stagger-6 { transition-delay: 0.40s; }

/* --- Hero Entrance --- */

.hero-animate-1 { animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.hero-animate-2 { animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
.hero-animate-3 { animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; }
.hero-animate-4 { animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }
.hero-animate-5 { animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both; }
.hero-animate-6 { animation: fadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both; }

.hero-animate-right { animation: fadeInRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; }

/* --- Loading spinner --- */

.spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner--dark {
  border-color: rgba(30,41,59,0.2);
  border-top-color: var(--primary);
}

/* --- Page transitions --- */

.page-enter {
  animation: fadeIn 0.4s ease both;
}

/* --- Form step transitions --- */

.step-enter-right {
  animation: slideInRight 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.step-enter-left {
  animation: slideInLeft 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Image loading fade --- */

.img-loading { background: var(--bg-alt); }
.img-loaded { animation: fadeIn 0.4s ease both; }

/* --- Wishlist heart beat --- */
.heart-beat { animation: heartBeat 0.5s ease; }

/* --- Ripple effect on buttons --- */
.ripple-container { position: relative; overflow: hidden; }
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  pointer-events: none;
  animation: ripple 0.6s ease-out;
}

/* --- Number counter --- */
.count-animated { animation: countUp 0.4s ease both; }

/* --- Glowing border for focus/active --- */
.glow-border { animation: borderGlow 2s ease infinite; }

/* --- Floating label --- */
.floating-group { position: relative; }
.floating-group .form-control { padding-top: 24px; padding-bottom: 8px; }
.floating-group .floating-label {
  position: absolute;
  top: 18px;
  left: 16px;
  font-size: 0.9375rem;
  color: var(--text-light);
  pointer-events: none;
  transition: all 0.2s ease;
  transform-origin: left;
}
.floating-group .form-control:focus ~ .floating-label,
.floating-group .form-control:not(:placeholder-shown) ~ .floating-label {
  transform: translateY(-10px) scale(0.78);
  color: var(--primary);
  font-weight: 600;
}

/* Progress step line */
@keyframes stepLineGrow {
  from { width: 0; }
  to { width: 100%; }
}

.step-line-active { animation: stepLineGrow 0.4s ease both; }

/* ============================================================
   ENHANCED INTERACTIVE ANIMATIONS
   ============================================================ */

/* --- Hero Particles --- */
@keyframes particleRise {
  0%   { transform: translateY(0) scale(1);    opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 0.7; }
  100% { transform: translateY(-110vh) scale(0.4); opacity: 0; }
}

.hero__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* --- Hero content above particles --- */
.hero .container { position: relative; z-index: 1; }

/* --- Gradient text shimmer --- */
@keyframes textShimmer {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}

/* Override text-gradient with animated shimmer */
.text-gradient {
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--accent) 25%,
    #4d8fa8 50%,
    var(--accent) 75%,
    var(--primary) 100%
  ) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: textShimmer 5s linear infinite !important;
}

/* --- Word cycle animation --- */
@keyframes wordExit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-24px) scale(0.9); }
}

@keyframes wordEnter {
  from { opacity: 0; transform: translateY(28px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- CTA button glow pulse --- */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(232,93,4,0.3), 0 0 0 0 rgba(232,93,4,0.35); }
  50%       { box-shadow: 0 4px 30px rgba(232,93,4,0.5), 0 0 0 12px rgba(232,93,4,0); }
}

.hero__actions .btn--primary {
  animation: glowPulse 2.8s ease-in-out infinite;
}

/* --- Icon bounce for category cards --- */
@keyframes iconBounce {
  0%   { transform: scale(1)    translateY(0); }
  25%  { transform: scale(1.35) translateY(-10px) rotate(8deg); }
  50%  { transform: scale(0.9)  translateY(3px) rotate(-4deg); }
  75%  { transform: scale(1.1)  translateY(-4px) rotate(2deg); }
  100% { transform: scale(1)    translateY(0) rotate(0deg); }
}

/* --- Stat number pop-in --- */
@keyframes statPop {
  0%   { transform: scale(0.5); opacity: 0; }
  65%  { transform: scale(1.1); }
  85%  { transform: scale(0.96); }
  100% { transform: scale(1);   opacity: 1; }
}

.stats--visible .stat-item {
  animation: fadeInUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.stats--visible .stat-item:nth-child(1) { animation-delay: 0.05s; }
.stats--visible .stat-item:nth-child(2) { animation-delay: 0.15s; }
.stats--visible .stat-item:nth-child(3) { animation-delay: 0.25s; }
.stats--visible .stat-item:nth-child(4) { animation-delay: 0.35s; }
.stats--visible .stat-item__number { animation: statPop 0.8s cubic-bezier(0.34,1.56,0.64,1) both; }
.stats--visible .stat-item:nth-child(1) .stat-item__number { animation-delay: 0.1s; }
.stats--visible .stat-item:nth-child(2) .stat-item__number { animation-delay: 0.2s; }
.stats--visible .stat-item:nth-child(3) .stat-item__number { animation-delay: 0.3s; }
.stats--visible .stat-item:nth-child(4) .stat-item__number { animation-delay: 0.4s; }

/* --- How-card step activation --- */
@keyframes numberReveal {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}

.how-card--active .how-card__number {
  animation: numberReveal 0.65s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.how-card--active .how-card__icon {
  animation: bounceIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}

/* --- Property card 3D preserve --- */
.property-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* --- Amenity item entrance (on property detail page) --- */
@keyframes amenityPop {
  from { opacity: 0; transform: scale(0.85) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.amenity-item {
  animation: amenityPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Staggered amenity entrance */
.amenity-item:nth-child(1)  { animation-delay: 0.05s; }
.amenity-item:nth-child(2)  { animation-delay: 0.09s; }
.amenity-item:nth-child(3)  { animation-delay: 0.13s; }
.amenity-item:nth-child(4)  { animation-delay: 0.17s; }
.amenity-item:nth-child(5)  { animation-delay: 0.21s; }
.amenity-item:nth-child(6)  { animation-delay: 0.25s; }
.amenity-item:nth-child(7)  { animation-delay: 0.29s; }
.amenity-item:nth-child(8)  { animation-delay: 0.33s; }
.amenity-item:nth-child(9)  { animation-delay: 0.37s; }
.amenity-item:nth-child(10) { animation-delay: 0.41s; }
.amenity-item:nth-child(11) { animation-delay: 0.45s; }
.amenity-item:nth-child(12) { animation-delay: 0.49s; }

/* --- Scroll progress bar --- */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  z-index: 9999; pointer-events: none;
  box-shadow: 0 0 8px rgba(232,93,4,0.5);
}

/* --- Section reveal improvements --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

.reveal--left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal--left.revealed { opacity: 1; transform: translateX(0); }

.reveal--right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal--right.revealed { opacity: 1; transform: translateX(0); }

.reveal--scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.reveal--scale.revealed { opacity: 1; transform: scale(1); }