/* ═══════════════════════════════════════════
   KelionAI — Animation Utilities
   ═══════════════════════════════════════════ */

/* Neural background animated gradient */
.neural-bg {
  background: linear-gradient(135deg, #0A0A0F 0%, #0F0A1F 50%, #0A0A0F 100%);
  background-size: 400% 400%;
  animation: neural-shift 8s ease infinite;
}
@keyframes neural-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Typing indicator */
.typing-indicator span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kelion-primary);
  margin: 0 2px;
  animation: typing-bounce 1.4s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
}

/* Shimmer loading */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--kelion-surface) 25%,
    var(--kelion-surface-hover) 50%,
    var(--kelion-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--kelion-radius-sm);
}

/* Particle dots background (CSS only) */
.particle-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(108, 99, 255, 0.15) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}