/* ==========================================================
   Animation & micro-interaction system
   Pure CSS, transform/opacity only (GPU-friendly, no layout thrash).
   ========================================================== */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 6px transparent; opacity: 0.7; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-12px) scale(0.98); }
}

/* Entrance animation, applied on page load. Add data-stagger="N" (0-8) to
   an element for a staggered delay, or rely on the nth-child rules below
   for grids where every card should cascade in automatically. */
.animate-in {
  animation: fadeInUp 0.5s ease both;
}
[data-stagger="1"] { animation-delay: 0.05s; }
[data-stagger="2"] { animation-delay: 0.10s; }
[data-stagger="3"] { animation-delay: 0.15s; }
[data-stagger="4"] { animation-delay: 0.20s; }
[data-stagger="5"] { animation-delay: 0.25s; }
[data-stagger="6"] { animation-delay: 0.30s; }
[data-stagger="7"] { animation-delay: 0.35s; }
[data-stagger="8"] { animation-delay: 0.40s; }

/* Grids: children fade/slide in with an automatic cascade, no JS needed */
.stagger-grid > * {
  animation: fadeInUp 0.5s ease both;
}
.stagger-grid > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-grid > *:nth-child(2) { animation-delay: 0.12s; }
.stagger-grid > *:nth-child(3) { animation-delay: 0.19s; }
.stagger-grid > *:nth-child(4) { animation-delay: 0.26s; }
.stagger-grid > *:nth-child(5) { animation-delay: 0.33s; }
.stagger-grid > *:nth-child(6) { animation-delay: 0.40s; }
.stagger-grid > *:nth-child(n+7) { animation-delay: 0.45s; }

/* Glowing focus ring — accessible (visible outline), on-brand color */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 145, 209, 0.25), 0 0 12px rgba(2, 145, 209, 0.15);
  border-color: var(--color-blue);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Button active/press state */
.btn { transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease; }
.btn:active { transform: scale(0.97); }

/* Pulse — for "live"/new status indicators (e.g. a fresh unread inquiry) */
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-green);
  color: var(--color-green);
  animation: pulseGlow 1.8s ease-in-out infinite;
  margin-right: 0.4rem;
}

/* Button loading state — spinner replaces label, button stays same size */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  top: 50%; left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.btn-outline.is-loading::after { border-color: rgba(2,145,209,0.3); border-top-color: var(--color-blue); }

/* Toast / animated alert feedback */
.toast {
  animation: toastSlideIn 0.35s ease both;
  position: relative;
}
.toast.is-dismissing {
  animation: toastSlideOut 0.25s ease both;
}
.alert-success, .form-error { animation: toastSlideIn 0.35s ease both; }

/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .animate-in, .stagger-grid > *, .toast, .alert-success, .form-error,
  .pulse-dot, .btn.is-loading::after {
    animation: none !important;
  }
  .card:hover, .tour-card:hover .card-img {
    transform: none !important;
  }
}