/* Include all the CSS from src/index.css here */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #d4af37, #b8860b);
  border-radius: 5px;
  border: 2px solid #f5f5f5;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #b8860b, #daa520);
}

/* Global Styles */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-white text-black antialiased min-h-screen font-sans;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold tracking-tight;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  h1 {
    @apply text-4xl md:text-6xl bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 relative;
    font-weight: 900;
  }

  h1::after {
    @apply content-[''] absolute inset-0 bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 blur-xl opacity-20 -z-10;
  }

  h2 {
    @apply text-3xl md:text-4xl bg-clip-text text-transparent bg-gradient-to-r from-yellow-600 to-yellow-500;
    font-weight: 800;
  }
}

/* Custom Utilities */
@layer utilities {
  .text-gradient-primary {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700;
  }

  .text-gradient-secondary {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 via-yellow-500 to-yellow-600;
  }

  .bg-gradient-custom {
    @apply bg-gradient-to-r from-gray-100 via-white to-gray-100;
  }

  .hover-lift {
    @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-yellow-500/30;
  }

  .card-shadow {
    @apply shadow-lg shadow-yellow-500/20 hover:shadow-xl hover:shadow-yellow-500/30 transition-shadow duration-300;
  }

  .glass-effect {
    @apply bg-white/80 backdrop-blur-md border border-yellow-500/30 rounded-xl;
  }

  .neon-glow {
    @apply relative after:absolute after:inset-0 after:rounded-lg after:shadow-[0_0_20px_rgba(212,175,55,0.5)] after:opacity-0 
           hover:after:opacity-100 after:transition-opacity after:duration-300;
  }

  .shimmer-effect {
    @apply relative overflow-hidden before:absolute before:inset-0 before:bg-gradient-shine 
           before:bg-[length:200%_100%] before:animate-shimmer;
  }
}

/* Enhanced Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3),
                inset 0 0 10px rgba(212, 175, 55, 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5),
                inset 0 0 15px rgba(212, 175, 55, 0.2);
  }
}

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

/* Component Styles */
.nav-link {
  @apply relative text-gray-700 hover:text-yellow-600 transition-colors duration-300 py-2
         after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 
         after:bg-gradient-to-r after:from-yellow-500 after:to-yellow-700 
         hover:after:w-full after:transition-all after:duration-300;
}

.nav-link-light {
  @apply relative text-gray-700 hover:text-yellow-600 transition-colors duration-300 py-2 font-semibold
         after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 
         after:bg-gradient-to-r after:from-yellow-500 after:to-yellow-700 
         hover:after:w-full after:transition-all after:duration-300;
}

.btn-primary {
  @apply relative overflow-hidden bg-gradient-to-r from-yellow-500 to-yellow-600 text-white font-semibold 
         py-3 px-8 rounded-2xl transition-all duration-500 transform hover:-translate-y-0.5
         hover:shadow-lg hover:shadow-yellow-500/30 hover:from-yellow-600 hover:to-yellow-700
         focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50
         before:absolute before:inset-0 before:bg-gradient-shine before:bg-[length:200%_100%]
         before:-translate-x-full hover:before:translate-x-full
         before:transition-transform before:duration-1000 before:ease-in-out
         active:scale-95;
}

.btn-secondary {
  @apply relative overflow-hidden border-2 border-yellow-500 text-yellow-600 font-semibold 
         py-2.5 px-6 rounded-2xl transition-all duration-300
         hover:text-white hover:border-transparent hover:shadow-lg hover:shadow-yellow-500/30
         hover:bg-gradient-to-r hover:from-yellow-500 hover:to-yellow-700
         focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50
         active:scale-95;
}

.btn-outline {
  @apply relative overflow-hidden bg-transparent text-yellow-600 border-2 border-yellow-500 font-semibold
         py-2.5 px-6 rounded-2xl transition-all duration-500
         hover:text-white hover:border-yellow-600 hover:shadow-lg hover:shadow-yellow-500/30
         focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50
         after:absolute after:inset-0 after:bg-gradient-to-r after:from-yellow-500 after:to-yellow-700
         after:-z-10 after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-300
         active:scale-95;
}

.btn-ghost {
  @apply relative overflow-hidden bg-transparent text-gray-700 font-semibold
         py-2.5 px-6 rounded-2xl transition-all duration-300
         hover:bg-yellow-500/10 hover:text-yellow-600 hover:shadow-lg hover:shadow-yellow-500/20
         focus:outline-none focus:ring-2 focus:ring-yellow-200
         active:scale-95;
}

.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 1rem;
  padding: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transform: translateY(0);
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 4px 6px -1px rgba(212, 175, 55, 0.1), 0 2px 4px -2px rgba(212, 175, 55, 0.1);
}

.card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 10px 15px -3px rgba(212, 175, 55, 0.3), 0 4px 6px -4px rgba(212, 175, 55, 0.3);
  border-color: rgba(212, 175, 55, 0.4);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(110deg, transparent 25%, rgba(212, 175, 55, 0.1) 50%, transparent 75%);
  background-size: 200% 100%;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.card:hover::before {
  opacity: 1;
}

/* Hero Section */
.hero-content {
  @apply relative;
  animation: slide-in 1s ease-out;
}

.hero-content::before {
  @apply content-[''] absolute -inset-1 bg-gradient-to-r from-yellow-500 to-yellow-700 
         rounded-lg blur-xl opacity-20 transition-opacity duration-300;
}

.hero-image {
  @apply animate-bounce-gentle;
}

/* Stats Section */
.stat-card {
  @apply relative overflow-hidden rounded-xl bg-gray-50 p-6
         border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-500
         hover:shadow-lg hover:shadow-yellow-500/30;
}

.stat-card::before {
  @apply content-[''] absolute inset-0 bg-gradient-shine bg-[length:200%_100%]
         opacity-0 -translate-x-full hover:translate-x-full
         transition-all duration-1000;
}

/* FAQ Section */
.faq-item {
  @apply transition-all duration-300 hover:bg-gray-50/50 rounded-lg overflow-hidden
         border border-yellow-500/20 hover:border-yellow-500/40 hover:shadow-lg;
}

.faq-question {
  @apply cursor-pointer flex items-center justify-between text-lg font-semibold p-4 text-black
         bg-gradient-to-r hover:from-gray-50/50 hover:to-gray-100/50
         transition-colors duration-300;
}

.faq-answer {
  @apply p-4 text-gray-700 bg-gray-50/50;
}

/* Back to Top Button */
.back-to-top {
  @apply fixed bottom-8 right-8 bg-yellow-600 text-white p-3 rounded-full cursor-pointer opacity-0 transition-opacity duration-300 hover:bg-yellow-700;
}

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

/* Footer */
.footer-link {
  @apply text-gray-700 hover:text-yellow-600 transition-colors duration-300
         relative after:absolute after:bottom-0 after:left-0 after:w-0
         after:h-0.5 after:bg-gradient-to-r after:from-yellow-500 after:to-yellow-700
         hover:after:w-full after:transition-all after:duration-300;
}

/* Mobile Menu */
.mobile-menu {
  @apply fixed inset-0 bg-black/95 backdrop-blur-md z-50
         transform transition-transform duration-300;
}

/* Loading States */
.loading-skeleton {
  @apply animate-pulse bg-gray-300 rounded;
}

.loading-skeleton::after {
  @apply content-[''] absolute inset-0 bg-gradient-shine bg-[length:200%_100%] animate-shimmer;
}

/* Tooltips */
.tooltip {
  @apply absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300;
}

[data-tooltip]:hover .tooltip {
  @apply visible opacity-100;
}

/* Form Elements */
.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-error {
  @apply text-red-500 text-sm mt-1;
}

.form-success {
  @apply text-yellow-600 text-sm mt-1;
}

/* Custom Backgrounds */
.bg-mesh {
  @apply relative;
  background-image: radial-gradient(circle at 25px 25px, rgba(212, 175, 55, 0.1) 2%, transparent 0%), radial-gradient(circle at 75px 75px, rgba(212, 175, 55, 0.1) 2%, transparent 0%);
  background-size: 100px 100px;
}

/* Level 8 Button Styles */
.level8-button {
  background: linear-gradient(45deg, #d4af37, #b8860b);
  border: none;
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transform: skew(-21deg);
  position: relative;
  text-decoration: none;
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  letter-spacing: 1px;
  border-radius: 12px;
}

.level8-button span {
  display: inline-block;
  transform: skew(21deg);
  text-align: center;
  width: 100%;
  font-weight: 800;
}

.level8-button:hover {
  background: linear-gradient(45deg, #b8860b, #daa520);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
  transform: skew(-21deg) translateY(-2px);
}

/* White variant */
.level8-button[style*="background: white"] {
  background: white;
  color: #d4af37;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

.level8-button[style*="background: white"]:hover {
  background: linear-gradient(45deg, #d4af37, #b8860b);
  color: white;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}