/* ==========================================================================
   MICRO-INTERACTIONS
   Tasteful only. Respect prefers-reduced-motion (handled globally in style.css).
   ========================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero-copy > * { animation: fadeUp 0.7s var(--ease) both; }
.hero-copy .h-eyebrow { animation-delay: 0.05s; }
.hero-copy .hero-title { animation-delay: 0.12s; }
.hero-copy .hero-sub { animation-delay: 0.2s; }
.hero-copy .hero-ctas { animation-delay: 0.28s; }
.hero-copy .hero-trust { animation-delay: 0.34s; }
.hero-visual { animation: fadeIn 1s var(--ease) 0.2s both; }

.finder-card { animation: fadeUp 0.6s var(--ease) 0.15s both; }

/* Count-up number reveal handled via JS toggling this class */
.counter-num.counted { animation: fadeIn 0.4s var(--ease); }

/* Filter drawer & mobile menu transitions are defined inline in style.css
   via transform transitions for performance (compositor-only). */

/* Toast for form confirmations */
.toast {
  position: fixed;
  bottom: calc(var(--mobile-nav-h) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--charcoal);
  color: #fff;
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

@media (min-width: 1024px) {
  .toast { bottom: 24px; }
}