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

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

@layer base {
    html {
        scroll-behavior: smooth;
    }
    
    body {
        @apply bg-dark-900 text-slate-300 antialiased;
    }
}

@layer components {
    .btn-primary {
        @apply inline-flex items-center justify-center px-8 py-4 border border-transparent rounded-lg shadow-lg text-base font-bold text-white bg-gradient-to-r from-industrial-500 to-industrial-600 hover:from-industrial-400 hover:to-industrial-500 transition-all duration-300 hover:shadow-[0_0_20px_rgba(255,111,13,0.4)] hover:-translate-y-0.5 active:translate-y-0;
    }

    .stat-card {
        @apply bg-dark-800 border border-white/5 rounded-2xl p-6 hover:border-industrial-500/30 transition-colors duration-300 relative overflow-hidden;
    }
    
    .stat-card::after {
        content: '';
        @apply absolute -bottom-1 -right-1 w-16 h-16 bg-industrial-500/10 rounded-full blur-xl;
    }

    .category-card {
        @apply block bg-dark-900 border border-white/10 rounded-2xl p-8 transition-all duration-500 relative overflow-hidden hover:border-industrial-500/50 hover:shadow-[0_0_30px_rgba(255,111,13,0.15)] hover:-translate-y-2;
    }
    
    .card-glow {
        @apply absolute -top-24 -right-24 w-48 h-48 bg-industrial-500/20 rounded-full blur-[60px] opacity-0 transition-opacity duration-500 z-0 pointer-events-none;
    }
    
    .category-card:hover .card-glow {
        @apply opacity-100;
    }
}

/* Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {
    opacity: 0;
    animation: slideUp 0.8s ease-out forwards;
}

/* Reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

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

::-webkit-scrollbar-track {
    @apply bg-dark-900;
}

::-webkit-scrollbar-thumb {
    @apply bg-dark-700 rounded-full hover:bg-dark-600 transition-colors;
}