.site-header {
  animation: headerDrop 0.7s ease both;
}

.hero__media img {
  animation: heroDrift 16s ease-in-out infinite alternate;
}

.hero__scan {
  animation: sweep 6s ease-in-out infinite;
}

.hero__content,
.feature-card {
  animation: rise 0.85s ease both;
}

.map-demo__route::before,
.map-demo__route::after {
  animation: pulse 2.4s ease-in-out infinite;
}

.map-demo__marker,
.privacy__marker,
.phone-mock__marker {
  animation: markerBob 4s ease-in-out infinite;
}

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

@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.4rem, 1rem, 0); }
}

@keyframes sweep {
  0%, 32% { transform: translateX(-85%); opacity: 0; }
  45% { opacity: 0.28; }
  76%, 100% { transform: translateX(85%); opacity: 0; }
}

@keyframes pulse {
  0%, 100% { transform: translateY(-50%) scale(0.86); opacity: 0.55; }
  50% { transform: translateY(-50%) scale(1.16); opacity: 1; }
}

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

@keyframes markerBob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-10px); }
}

.privacy__marker {
  animation-name: markerFloat;
}

@keyframes markerFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}