@import "tailwindcss";

@font-face {
  font-family: 'Apfel Grotezk';
  src: url('/fonts/ApfelGrotezk-Regular.woff2') format('woff2'),
       url('/fonts/ApfelGrotezk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Apfel Grotezk';
  src: url('/fonts/ApfelGrotezk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Apfel Grotezk';
  src: url('/fonts/ApfelGrotezk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Apply Apfel Grotezk to text elements only, excluding FontAwesome icons */
body, p, h1, h2, h3, h4, h5, h6, span:not([class*="fa-"]), div:not([class*="fa-"]), button, input, textarea, select, label {
  font-family: 'Apfel Grotezk', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Ensure FontAwesome icons keep their font */
i[class*="fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", FontAwesome !important;
}

/* Modern Loading Animations */
@keyframes smooth-bounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes wave-dots {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

@keyframes fade-in-fast {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Smooth bounce animation for dots */
.animate-smooth-bounce {
  animation: smooth-bounce 1.4s ease-in-out infinite both;
}

.animate-smooth-bounce:nth-child(1) {
  animation-delay: -0.32s;
}

.animate-smooth-bounce:nth-child(2) {
  animation-delay: -0.16s;
}

.animate-smooth-bounce:nth-child(3) {
  animation-delay: 0s;
}

/* Wave animation for dots */
.animate-wave {
  animation: wave-dots 1.4s ease-in-out infinite both;
}

.animate-wave:nth-child(1) {
  animation-delay: -0.32s;
}

.animate-wave:nth-child(2) {
  animation-delay: -0.16s;
}

.animate-wave:nth-child(3) {
  animation-delay: 0s;
}

/* Fast fade in animation */
.animate-fade-in-fast {
  animation: fade-in-fast 0.3s ease-out;
}

/* Gradient animation for pulse variant */
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 2s ease-in-out infinite;
}