/* ============================================================
   ROUTE AI — ANIMATIONS & MICRO-INTERACTIONS
   ============================================================ */

/* --- Keyframes --- */

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

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(110%); }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.95); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50%       { box-shadow: var(--shadow-sm); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes routeCardIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes chipSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1); opacity: 1; }
}

@keyframes markerBounce {
  0%   { transform: translateY(-10px) scale(0.8); opacity: 0; }
  60%  { transform: translateY(4px) scale(1.05); opacity: 1; }
  80%  { transform: translateY(-2px) scale(0.98); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes ringExpand {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.8; }
}

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

@keyframes sparkle {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.8; }
  25%       { transform: rotate(90deg) scale(1.1); opacity: 1; }
  50%       { transform: rotate(180deg) scale(0.9); opacity: 0.7; }
  75%       { transform: rotate(270deg) scale(1.05); opacity: 1; }
}

/* --- Utility Animation Classes --- */

.anim-fade-in {
  animation: fadeIn 0.35s ease both;
}

.anim-fade-in-up {
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.anim-scale-in {
  animation: scaleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Staggered card animations */
.route-card:nth-child(1) { animation-delay: 0ms; }
.route-card:nth-child(2) { animation-delay: 80ms; }
.route-card:nth-child(3) { animation-delay: 160ms; }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 6px;
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.skeleton-text.w-full { width: 100%; }
.skeleton-text.w-3-4  { width: 75%; }
.skeleton-text.w-1-2  { width: 50%; }

/* Typing cursor */
.typing-cursor::after {
  content: '▋';
  animation: pulse 0.8s ease-in-out infinite;
  color: var(--primary);
  margin-left: 1px;
}

/* Bounce in for dropdowns */
.dropdown-enter {
  animation: fadeInDown 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Scale in for modal */
.modal-enter {
  animation: modalSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}