/* 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: #1a1a1a;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #10b981, #059669);
  border-radius: 5px;
  border: 2px solid #1a1a1a;
}

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

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

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

  * {
    color: inherit;
  }

  p, span, div, li, a {
    @apply text-white;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold tracking-tight text-white;
    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-emerald-400 via-emerald-500 to-emerald-600 relative;
    font-weight: 900;
  }

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

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

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

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

  .bg-gradient-custom {
    @apply bg-gradient-to-r from-gray-900 via-black to-gray-900;
  }

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

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

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

  .neon-glow {
    @apply relative after:absolute after:inset-0 after:rounded-lg after:shadow-[0_0_20px_rgba(16,185,129,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(16, 185, 129, 0.3),
                inset 0 0 10px rgba(16, 185, 129, 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5),
                inset 0 0 15px rgba(16, 185, 129, 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-white hover:text-emerald-400 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-emerald-400 after:to-emerald-600 
         hover:after:w-full after:transition-all after:duration-300;
}

.nav-link-light {
  @apply relative text-white hover:text-emerald-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-emerald-400 after:to-emerald-600 
         hover:after:w-full after:transition-all after:duration-300;
}

.btn-primary {
  @apply relative overflow-hidden bg-gradient-to-r from-emerald-500 to-emerald-600 text-white font-semibold 
         py-3 px-8 rounded-lg transition-all duration-500 transform hover:-translate-y-0.5
         hover:shadow-lg hover:shadow-emerald-500/30 hover:from-emerald-600 hover:to-emerald-700
         focus:outline-none focus:ring-2 focus:ring-emerald-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-emerald-500 text-emerald-400 font-semibold 
         py-2.5 px-6 rounded-lg transition-all duration-300
         hover:text-white hover:border-transparent hover:shadow-lg hover:shadow-emerald-500/30
         hover:bg-gradient-to-r hover:from-emerald-400 hover:to-emerald-600
         focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-opacity-50
         active:scale-95;
}

.btn-outline {
  @apply relative overflow-hidden bg-transparent text-emerald-400 border-2 border-emerald-400 font-semibold
         py-2.5 px-6 rounded-lg transition-all duration-500
         hover:text-white hover:border-emerald-500 hover:shadow-lg hover:shadow-emerald-500/30
         focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-opacity-50
         after:absolute after:inset-0 after:bg-gradient-to-r after:from-emerald-500 after:to-emerald-600
         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-white font-semibold
         py-2.5 px-6 rounded-lg transition-all duration-300
         hover:bg-emerald-500/10 hover:text-emerald-400 hover:shadow-lg hover:shadow-emerald-500/20
         focus:outline-none focus:ring-2 focus:ring-emerald-200
         active:scale-95;
}

.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 0.75rem;
  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(16, 185, 129, 0.2);
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.1), 0 2px 4px -2px rgba(16, 185, 129, 0.1);
}

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

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(110deg, transparent 25%, rgba(16, 185, 129, 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-emerald-400 to-emerald-600 
         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-800 p-6
         border border-emerald-500/20 hover:border-emerald-500/40 transition-all duration-500
         hover:shadow-lg hover:shadow-emerald-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-800/50 rounded-lg overflow-hidden
         border border-emerald-500/20 hover:border-emerald-500/40 hover:shadow-lg;
}

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

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

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

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

/* Footer */
.footer-link {
  @apply text-white hover:text-emerald-400 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-emerald-400 after:to-emerald-600
         hover:after:w-full after:transition-all after:duration-300;
}

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

/* Loading States */
.loading-skeleton {
  @apply animate-pulse bg-gray-200 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-white mb-1;
}

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

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

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

/* LEVEL 9 Button Styles */
.level9-button {
  background: linear-gradient(45deg, #10b981, #059669);
  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(16, 185, 129, 0.3);
  letter-spacing: 1px;
}

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

.level9-button:hover {
  background: linear-gradient(45deg, #059669, #047857);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
  transform: skew(-21deg) translateY(-2px);
}

/* White variant */
.level9-button[style*="background: white"] {
  background: white;
  color: #10b981;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.level9-button[style*="background: white"]:hover {
  background: linear-gradient(45deg, #10b981, #059669);
  color: white;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}