@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap');

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

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

  body {
    font-family: 'Roboto', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
  }
}

@layer components {
  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
  }

  .btn {
    @apply font-bold py-3 px-8 rounded-full text-center transition-all duration-300 ease-in-out shadow-lg;
  }

  .btn-primary {
    @apply bg-green-600 text-white hover:bg-green-700;
  }

  .btn-secondary {
    @apply bg-white text-green-700 border-2 border-green-600 hover:bg-green-50;
  }

  .form-input {
    @apply bg-gray-50 focus:bg-white;
  }

  .form-label {
    @apply cursor-text pointer-events-none;
  }

  .form-input:not(:placeholder-shown) + .form-label,
  .form-input:focus + .form-label {
    @apply -translate-y-8 text-sm text-green-700;
  }

  .spinner-overlay {
    @apply fixed inset-0 z-[999] bg-white flex items-center justify-center transition-opacity duration-500;
  }

  .spinner-border {
    @apply h-16 w-16 border-4 border-green-600 border-t-transparent rounded-full animate-spin;
  }

  .spinner-overlay.hidden {
    @apply opacity-0 pointer-events-none;
  }
}

@layer utilities {
  .animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out both;
  }

  .animate-scale-in {
    animation: scale-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  .animate-fade-in-right {
    animation: fade-in-right 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  }

  .delay-200 {
    animation-delay: 0.2s;
  }

  .delay-400 {
    animation-delay: 0.4s;
  }

  .delay-600 {
    animation-delay: 0.6s;
  }

  .back-to-top.show {
    @apply opacity-100 scale-100;
  }
}

@keyframes fade-in-down {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scale-in {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fade-in-right {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}