/* Apply font globally and reduce FOUT */
html {
  font-family: 'Inter', sans-serif;
  font-display: swap;
}

body {
  font-family: inherit;
  transition: font-family 0.3s ease;
}

/* Background radial utility */
.bg-radial {
  background: radial-gradient(circle at center, #e5e8ff, #ffffff);
}

/* Hide [x-cloak] elements before Alpine.js loads */
[x-cloak] {
  display: none !important;
}

/* Animations */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDelay {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseFast {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes float-slow {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes float-slower {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(15px);
  }
}

@keyframes textGradient {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* Animation utilities */
.animate-fade-in-up {
  animation: fadeInUp 1.2s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.animate-fade-in-delay {
  animation: fadeInDelay 1.6s 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.animate-delay-200 {
  animation-delay: 0.2s;
}

.animate-pulse-fast {
  animation: pulseFast 1.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-float-slow {
  animation: float-slow 8s ease-in-out infinite;
}

.animate-float-slower {
  animation: float-slower 12s ease-in-out infinite;
}

.animate-[float_6s_ease-in-out_infinite] {
  animation: float 6s ease-in-out infinite;
}

/* Accessibility: Disable animation for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}