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

@layer base {
  * {
    @apply border-gray-200;
  }
  body {
    @apply bg-stone-50 text-gray-900;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
  }
}

@layer utilities {
  /* Animations */
  @keyframes float {
    0%, 100% {
      transform: translateY(0px) translateX(0px);
    }
    33% {
      transform: translateY(-30px) translateX(20px);
    }
    66% {
      transform: translateY(30px) translateX(-20px);
    }
  }

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

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

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

  /* Hover Effects */
  .hover-lift {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  /* Shadow Glow */
  .shadow-glow {
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
  }

  .shadow-glow-lg {
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.4);
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .gradient-orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
  }
  
  .gradient-gold {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  }
  
  .glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .shadow-glow {
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
  }
  
  .shadow-glow-lg {
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.4);
  }
  
  .animate-float {
    animation: float 20s ease-in-out infinite;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0px) translateX(0px);
    }
    33% {
      transform: translateY(-30px) translateX(20px);
    }
    66% {
      transform: translateY(30px) translateX(-20px);
    }
  }
  
  .animate-fade-in {
    animation: fadeIn 0.6s ease-in;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }
}