/**
 * Alpine.js Animation Helpers
 * Additional CSS for smooth Alpine.js transitions
 */

/* Enhanced transitions for Alpine.js */
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-600 { transition-duration: 600ms; }
.duration-800 { transition-duration: 800ms; }
.duration-1000 { transition-duration: 1000ms; }

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }
.delay-700 { transition-delay: 700ms; }

/* Transform utilities for Alpine */
.translate-y-0 { transform: translateY(0px); }
.translate-y-4 { transform: translateY(16px); }
.translate-y-8 { transform: translateY(32px); }
.-translate-y-4 { transform: translateY(-16px); }
.-translate-y-8 { transform: translateY(-32px); }

.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }

/* Blur effects */
.blur-sm { filter: blur(4px); }

/* Enhanced void particles animation */
@keyframes voidDrift {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-10px) translateX(5px);
  }
  50% {
    transform: translateY(5px) translateX(-5px);
  }
  75% {
    transform: translateY(-5px) translateX(10px);
  }
}

.void-particles {
  animation: voidDrift 30s linear infinite;
}

/* Improved button hover states */
.cta-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 229, 255, 0.3);
}

.cta-secondary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 229, 255, 0.2);
}

/* Card interaction enhancement */
.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Focus states for accessibility */
*:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  transition: outline-offset 0.2s ease;
}

/* Alpine.js specific improvements */
[x-cloak] {
  display: none !important;
}

/* Performance optimization for animations */
.hero-title,
.card,
.cta-primary,
.cta-secondary {
  will-change: transform, opacity;
}

/* Custom scroll indicator animation */
@keyframes scrollPulse {
  0%, 100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(5px);
  }
}

.scroll-indicator {
  animation: scrollPulse 2s ease-in-out infinite;
}