/* Non-critical decorative CSS, loaded asynchronously.
   Keep the critical path lean: these styles only add motion, Leaflet
   polish, and scrollbar cosmetics — none of which are needed for the
   first meaningful paint. */

.mr-pin {
  background: transparent;
  border: none;
}

.leaflet-container {
  font-family: var(--font-body);
}

.leaflet-tooltip {
  background: #fff;
  border: 1px solid oklch(var(--background-200));
  border-radius: 8px;
  box-shadow: none;
  padding: 8px 10px;
}

@keyframes hero-zoom {
  0% { transform: scale(1.02); }
  100% { transform: scale(1.05); }
}

.animate-hero-zoom {
  animation: hero-zoom 28s ease-out forwards;
  will-change: transform;
}

/* Hide the scrollbar on swipeable card rows while keeping native scrolling. */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Subtle slide-in for the floating plans panel. */
@keyframes panel-up {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-panel-up {
  animation: panel-up 0.22s ease-out;
  transform-origin: bottom left;
  will-change: transform, opacity;
}

/* Slow Ken Burns zoom + pan for the pricing banner. */
@keyframes ken-burns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.14) translate(-1.5%, -2%);
  }
}

.animate-ken-burns {
  animation: ken-burns 32s ease-in-out infinite alternate;
  will-change: transform;
}

/* Subtle slide-down for the navbar plans dropdown. */
@keyframes dropdown-in {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-dropdown-in {
  animation: dropdown-in 0.2s ease-out;
  transform-origin: top left;
  will-change: transform, opacity;
}

/* Slow, elegant ripple around the video play button. */
@keyframes ring-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.65);
    opacity: 0;
  }
  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

.animate-ring-pulse {
  animation: ring-pulse 3s cubic-bezier(0, 0, 0.2, 1) infinite;
  will-change: transform, opacity;
}