/* Tailwind Custom Components */

/* Base Styles */
@layer base {
    body {
        @apply bg-black text-gray-200;
    }
}

/* Custom Components */
@layer components {
    /* Primary Button */
    .btn-primary {
        @apply inline-block px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-semibold tracking-wider transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-blue-500/30;
    }
    
    /* Navigation Link */
    .nav-link {
        @apply text-gray-400 font-medium relative transition-colors duration-300 hover:text-white after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-gradient-to-r after:from-blue-500 after:to-purple-600 after:transition-all after:duration-300 hover:after:w-full;
    }
    
    /* Gradient Text */
    .gradient-text {
        @apply bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent;
    }
    
    /* Glass Effect */
    .glass {
        @apply bg-black/50 backdrop-blur-lg;
    }
    
    /* Hero Title */
    .hero-title {
        @apply text-6xl md:text-7xl lg:text-8xl font-black tracking-tight gradient-text mb-6 drop-shadow-2xl;
    }
    
    /* Hero Subtitle */
    .hero-subtitle {
        @apply text-xl md:text-2xl lg:text-3xl text-gray-400 mb-12 tracking-wide;
    }
}

/* Utilities */
@layer utilities {
    /* Text Shadow */
    .text-shadow-lg {
        text-shadow: 0 0 80px rgba(59, 130, 246, 0.5);
    }
    
    /* Glow Effect */
    .glow-blue {
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    }
    
    .glow-purple {
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
    }
}