@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply font-sans text-dark-gray antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-bold;
  }
}

@layer components {
  .btn-brand {
    @apply bg-primary text-black px-6 py-3 rounded-full font-bold hover:bg-primary/90 transition-all duration-300 hover:scale-105;
  }

  .btn-brand-outline {
    @apply bg-transparent text-black px-6 py-3 rounded-full font-bold border-2 border-black hover:bg-black hover:text-primary transition-all duration-300;
  }
}

/* Animation Keyframes */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes float-1 {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-30px) translateX(15px); }
  50% { transform: translateY(-20px) translateX(-15px); }
  75% { transform: translateY(-40px) translateX(10px); }
}

@keyframes float-2 {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-25px) translateX(-20px); }
  50% { transform: translateY(-35px) translateX(15px); }
  75% { transform: translateY(-15px) translateX(-10px); }
}

@keyframes float-3 {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.1); }
}

@keyframes float-dot-1 {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.1; }
  50% { transform: translateY(-40px) translateX(15px); opacity: 0.3; }
}

@keyframes float-dot-2 {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.1; }
  50% { transform: translateY(-30px) translateX(-20px); opacity: 0.35; }
}

@keyframes float-dot-3 {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.1; }
  50% { transform: translateY(-35px) translateX(10px); opacity: 0.25; }
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

.animate-fade-in-up {
  opacity: 0;
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-float-1 {
  animation: float-1 4s ease-in-out infinite;
}

.animate-float-2 {
  animation: float-2 5s ease-in-out infinite;
}

.animate-float-3 {
  animation: float-3 3s ease-in-out infinite;
}

.animate-float-dot-1 {
  animation: float-dot-1 2s ease-in-out infinite;
}

.animate-float-dot-2 {
  animation: float-dot-2 2.5s ease-in-out infinite;
}

.animate-float-dot-3 {
  animation: float-dot-3 3s ease-in-out infinite;
}
