/* BEAState Animations */

/* Fade In Up */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity:0; transform:translateX(-30px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes fadeInRight {
  from { opacity:0; transform:translateX(30px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.9); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes pulse {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.04); }
}
@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-10px); }
}
@keyframes spin {
  to { transform:rotate(360deg); }
}
@keyframes blink {
  0%,100% { opacity:1; }
  50%      { opacity:0.4; }
}

/* Intersection Observer triggered animations */
.animate-on-scroll {
  opacity:0; transform:translateY(28px);
  transition:opacity .55s ease, transform .55s ease;
}
.animate-on-scroll.visible {
  opacity:1; transform:translateY(0);
}
.animate-on-scroll.from-left {
  transform:translateX(-28px);
}
.animate-on-scroll.from-right {
  transform:translateX(28px);
}
.animate-on-scroll.from-left.visible,
.animate-on-scroll.from-right.visible {
  transform:translateX(0);
}
.delay-1 { transition-delay:0.1s !important; }
.delay-2 { transition-delay:0.2s !important; }
.delay-3 { transition-delay:0.3s !important; }
.delay-4 { transition-delay:0.4s !important; }
.delay-5 { transition-delay:0.5s !important; }

/* Hero entry animation */
.hero-inner .hero-title { animation:fadeInUp .7s ease both; }
.hero-inner .hero-subtitle { animation:fadeInUp .7s .15s ease both; }
.hero-inner .search-box { animation:fadeInUp .7s .28s ease both; }
.hero-inner .popular-localities { animation:fadeInUp .7s .4s ease both; }
.hero-inner .owner-banner { animation:fadeInUp .7s .5s ease both; }
.hero-inner .hero-stats { animation:fadeInUp .7s .6s ease both; }

/* Floating card animation for swipe stack */
.swipe-card-1 { animation:float 4s ease-in-out infinite; }
.swipe-card-2 { animation:float 4s 0.5s ease-in-out infinite; }

/* Skeleton loading */
.skeleton {
  background:linear-gradient(90deg, #f0f0f8 25%, #e4e4f0 50%, #f0f0f8 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-radius:var(--radius-sm);
}

/* Hover glow on cards */
.property-card:hover {
  box-shadow: 0 8px 40px rgba(94,35,220,0.12), 0 2px 12px rgba(0,0,0,0.08);
}
.developer-card:hover {
  box-shadow: 0 6px 28px rgba(94,35,220,0.10);
}
.intel-card:hover {
  box-shadow: 0 6px 28px rgba(94,35,220,0.10);
}

/* Data strip glow */
#data-strip::before {
  content:'';
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  background:linear-gradient(90deg, var(--bea-blue-dark) 0%, transparent 10%, transparent 90%, var(--bea-blue-dark) 100%);
  pointer-events:none;
  z-index:2;
}
#data-strip { position:relative; }

/* Number counter animation */
.counter { display:inline-block; }

/* Ripple effect on buttons */
.btn, .search-btn, .post-property-btn {
  position:relative; overflow:hidden;
}
.ripple {
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.3);
  transform:scale(0);
  animation:rippleAnim .55s linear;
  pointer-events:none;
}
@keyframes rippleAnim {
  to { transform:scale(4); opacity:0; }
}

/* Tab indicator underline animation */
.search-tab { position:relative; overflow:hidden; }
.search-tab::after {
  content:'';
  position:absolute; bottom:0; left:50%; right:50%;
  height:3px; background:var(--primary);
  transition:left .25s, right .25s;
}
.search-tab.active::after { left:0; right:0; }

/* Pulse dot for live data */
.live-dot {
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--success);
  animation:blink 1.5s ease-in-out infinite;
  margin-right:4px;
}

/* Auction countdown timer pulse */
.auction-timer { animation:pulse 2s ease-in-out infinite; }

/* Nav link underline slide */
.nav-link::after {
  content:'';
  position:absolute;
  bottom:-2px; left:14px; right:14px;
  height:2px;
  background:var(--primary);
  transform:scaleX(0);
  transition:transform .22s ease;
}
.nav-link.active::after { transform:scaleX(1); }