/* ============================================
   BFL Map — Animations
   ============================================ */

/* ---- Scroll Padding (sticky header offset) ---- */

html {
  scroll-padding-top: 96px;
}

@media (max-width: 1024px) {
  html {
    scroll-padding-top: 84px;
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 72px;
  }
}

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

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children — apply to parent container */
.stagger-children > .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.stagger-children > .animate-on-scroll:nth-child(2) { transition-delay: 100ms; }
.stagger-children > .animate-on-scroll:nth-child(3) { transition-delay: 200ms; }
.stagger-children > .animate-on-scroll:nth-child(4) { transition-delay: 300ms; }
.stagger-children > .animate-on-scroll:nth-child(5) { transition-delay: 400ms; }
.stagger-children > .animate-on-scroll:nth-child(6) { transition-delay: 500ms; }

/* ---- Card Hover Effects ---- */

.advantage-card,
.step-card,
.review-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.4s ease;
}

.advantage-card:hover,
.step-card:hover,
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(11, 91, 211, 0.10);
}

/* ---- Hero Counters ---- */

.stat-card__number {
  display: inline-block;
  min-width: 2ch;
}

/* ---- Form Microinteractions ---- */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.3s ease;
}

/* Loading spinner on submit buttons */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ---- Steps Progress Bar ---- */

.steps__grid {
  position: relative;
}

.steps__progress {
  position: absolute;
  top: 40px;
  left: 16.666%;
  right: 16.666%;
  height: 2px;
  background: #D9E6F7;
  z-index: 0;
}

.steps__progress-fill {
  height: 100%;
  width: 0;
  background: var(--color-primary);
  transition: width 0.8s ease;
}

.steps__progress-fill.is-visible {
  width: 100%;
}

/* ---- Header Enhancements ---- */

.nav__link {
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav__link:hover::after {
  transform: scaleX(1);
}

.header--scrolled {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.92);
}

/* ---- Map Sidebar Transitions ---- */

.place-card-enter {
  opacity: 0;
  transform: translateY(8px);
}

.place-card-enter-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hide steps progress bar on mobile */
@media (max-width: 767px) {
  .steps__progress {
    display: none;
  }
}

/* ---- Top Cities (hero) ---- */

.map-card__cities {
  justify-content: center;
}

a.city-pill {
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

a.city-pill:hover {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 767px) {
  .city-pill--desktop {
    display: none;
  }
}