/* Loading States and Animations */

/* Button loading animations */
.filter-button-loading {
  @apply opacity-70 cursor-wait;
  pointer-events: none;
}

.filter-button-loading iconify-icon,
.filter-button-loading .w-4 {
  @apply animate-pulse;
}

/* Smooth transitions for filter buttons */
.filter-button {
  @apply transition-all duration-200 ease-in-out;
}

.filter-button:hover:not(:disabled) {
  @apply transform scale-105;
}

/* Loading overlay animations */
.loading-overlay {
  @apply transition-opacity duration-300 ease-in-out;
}

.loading-overlay.show {
  @apply opacity-100;
}

.loading-overlay.hide {
  @apply opacity-0 pointer-events-none;
}

/* Events container loading state */
.events-loading {
  @apply transition-opacity duration-300 ease-in-out opacity-60 pointer-events-none;
}

/* Skeleton loading for events */
.skeleton {
  @apply animate-pulse bg-gray-200 rounded;
}

.skeleton-card {
  @apply bg-white rounded-lg shadow-md overflow-hidden;
}

.skeleton-image {
  @apply w-full h-32 lg:h-40 bg-gray-200;
}

.skeleton-text {
  @apply h-4 bg-gray-200 rounded mb-2;
}

.skeleton-text-sm {
  @apply h-3 bg-gray-200 rounded;
}

/* Spinner animations */
@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 2s linear infinite;
}

/* Pulse effect for loading states */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.animate-pulse-soft {
  animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Loading dots animation */
.loading-dots::after {
  content: '';
  animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* Success state animations */
.success-state {
  @apply transform transition-all duration-300 ease-in-out;
}

.success-state.show {
  @apply scale-100 opacity-100;
}

.success-state.hide {
  @apply scale-95 opacity-0;
}