/* Hero Grid Animation */
@keyframes hero-dot-h {
  0% { left: -6px; }
  100% { left: 100%; }
}

@keyframes hero-dot-v {
  0% { top: -6px; }
  100% { top: 100%; }
}

@keyframes hero-grid-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.hero-grid-bg {
  --grid-color: rgba(16, 185, 129, 0.06);
  --dot-color: rgba(16, 185, 129, 0.45);
  --glow-color: rgba(16, 185, 129, 0.08);
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
}

/* Travelling dots along horizontal grid lines */
.hero-dot-horizontal {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot-color, rgba(16, 185, 129, 0.45));
  box-shadow: 0 0 8px 2px var(--glow-color, rgba(16, 185, 129, 0.15));
  animation: hero-dot-h var(--duration, 8s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0.7;
}

/* Travelling dots along vertical grid lines */
.hero-dot-vertical {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot-color, rgba(16, 185, 129, 0.45));
  box-shadow: 0 0 8px 2px var(--glow-color, rgba(16, 185, 129, 0.15));
  animation: hero-dot-v var(--duration, 10s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0.7;
}

/* Intersection glow dots */
.hero-intersection {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.2);
  animation: hero-grid-pulse 3s ease-in-out infinite;
  animation-delay: var(--pulse-delay, 0s);
}

/* Exit Intent Popup - Scan line animation */
@keyframes exitPopupScan {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}