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

@layer base {
    /* Smooth scrolling for better UX */
    html {
        scroll-behavior: smooth;
    }
    
    /* Custom animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(-30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes glow {
        0%, 100% {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
        }
        50% {
            box-shadow: 0 0 40px rgba(59, 130, 246, 0.25), 0 0 60px rgba(59, 130, 246, 0.15);
        }
    }
    
    @keyframes shimmer {
        0% {
            background-position: -200% 0;
        }
        100% {
            background-position: 200% 0;
        }
    }
}

@layer components {
    /* Enhanced Feature Cards with Glass-morphism */
    .feature-card {
        @apply relative bg-white/80 backdrop-blur-sm p-8 rounded-3xl border border-white/30 transition-all duration-500 ease-out;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    .feature-card:hover {
        @apply transform translate-y-[-8px] bg-white/90;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 10px 24px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        animation: glow 2s ease-in-out infinite;
    }
    
    .feature-card::before {
        @apply absolute inset-0 rounded-3xl opacity-0 transition-opacity duration-500;
        content: '';
        background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
        background-size: 200% 200%;
    }
    
    .feature-card:hover::before {
        @apply opacity-100;
        animation: shimmer 1.5s ease-in-out;
    }
    
    /* Modern Button Styles */
    .btn-primary {
        @apply relative px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-2xl border-0 transition-all duration-300 ease-out overflow-hidden;
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    .btn-primary::before {
        @apply absolute inset-0 bg-gradient-to-r from-blue-700 to-purple-700 opacity-0 transition-opacity duration-300;
        content: '';
    }
    
    .btn-primary:hover {
        @apply transform translate-y-[-2px] scale-105;
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    
    .btn-primary:hover::before {
        @apply opacity-100;
    }
    
    .btn-primary:active {
        @apply transform translate-y-0 scale-100;
        box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
    }
    
    .btn-secondary {
        @apply relative px-8 py-4 bg-white/10 backdrop-blur-sm text-gray-800 font-semibold rounded-2xl border-2 border-white/20 transition-all duration-300 ease-out overflow-hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    
    .btn-secondary:hover {
        @apply bg-white/20 border-white/30 transform translate-y-[-2px];
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    /* Modern Glass Card */
    .glass-card {
        @apply bg-white/10 backdrop-blur-md rounded-3xl border border-white/20 p-8 transition-all duration-500;
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
    
    .glass-card:hover {
        @apply bg-white/20 border-white/30 transform translate-y-[-4px];
        box-shadow: 0 12px 40px rgba(31, 38, 135, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    
    /* Neumorphism Card */
    .neuro-card {
        @apply bg-gray-100 rounded-3xl p-8 transition-all duration-300;
        box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.1), -20px -20px 40px rgba(255, 255, 255, 0.8), inset 0 0 0 rgba(0, 0, 0, 0);
    }
    
    .neuro-card:hover {
        box-shadow: inset 8px 8px 16px rgba(0, 0, 0, 0.1), inset -8px -8px 16px rgba(255, 255, 255, 0.8);
    }
    
    /* Modern Navigation Links */
    .nav-link {
        @apply relative text-gray-300 hover:text-white transition-all duration-300 px-4 py-2 rounded-xl;
    }
    
    .nav-link::before {
        @apply absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-400 to-purple-400 transition-all duration-300 rounded-full;
        content: '';
    }
    
    .nav-link:hover::before {
        @apply w-full;
    }
    
    .nav-link:hover {
        @apply bg-white/10 backdrop-blur-sm;
    }
    
    /* Enhanced Footer Links */
    .footer-link {
        @apply relative text-primary-300 hover:text-white transition-all duration-300 block py-2 px-3 rounded-lg overflow-hidden;
    }
    
    .footer-link::before {
        @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent transform -skew-x-12 -translate-x-full transition-transform duration-700;
        content: '';
    }
    
    .footer-link:hover::before {
        @apply translate-x-full;
    }
    
    /* Premium Input Styles */
    .input-modern {
        @apply w-full px-6 py-4 bg-white/80 backdrop-blur-sm border-2 border-gray-200/50 rounded-2xl transition-all duration-300 focus:outline-none focus:ring-0;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), inset 0 2px 4px rgba(0, 0, 0, 0.02);
    }
    
    .input-modern:focus {
        @apply border-blue-400/70 bg-white/90;
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.02);
    }
}

@layer utilities {
    /* Modern Spacing Utilities */
    .space-modern {
        @apply space-y-8;
    }
    
    .space-modern-lg {
        @apply space-y-12;
    }
    
    .space-modern-xl {
        @apply space-y-16;
    }
    
    /* Modern Border Radius */
    .rounded-modern {
        border-radius: 1.5rem;
    }
    
    .rounded-modern-lg {
        border-radius: 2rem;
    }
    
    .rounded-modern-xl {
        border-radius: 2.5rem;
    }
    
    .rounded-modern-2xl {
        border-radius: 3rem;
    }
    
    /* Modern Shadows */
    .shadow-modern {
        box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    .shadow-modern-lg {
        box-shadow: 0 20px 40px -4px rgba(0, 0, 0, 0.1), 0 8px 16px -4px rgba(0, 0, 0, 0.06);
    }
    
    .shadow-modern-xl {
        box-shadow: 0 25px 50px -8px rgba(0, 0, 0, 0.15), 0 10px 20px -4px rgba(0, 0, 0, 0.1);
    }
    
    .shadow-glow {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }
    
    .shadow-glow-purple {
        box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
    }
    
    /* Backdrop Blur Effects */
    .backdrop-blur-light {
        backdrop-filter: blur(8px);
    }
    
    .backdrop-blur-medium {
        backdrop-filter: blur(16px);
    }
    
    .backdrop-blur-heavy {
        backdrop-filter: blur(24px);
    }
    
    /* Animation Utilities */
    .animate-fade-in-up {
        animation: fadeInUp 0.6s ease-out;
    }
    
    .animate-slide-in {
        animation: slideIn 0.6s ease-out;
    }
    
    .animate-glow {
        animation: glow 2s ease-in-out infinite;
    }
    
    .animate-shimmer {
        animation: shimmer 2s ease-in-out infinite;
    }
    
    /* Gradient Utilities */
    .gradient-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .gradient-secondary {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    .gradient-tertiary {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    .gradient-text {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* Modern Transform Effects */
    .hover-lift {
        @apply transition-transform duration-300 ease-out;
    }
    
    .hover-lift:hover {
        @apply transform translate-y-[-8px];
    }
    
    .hover-scale {
        @apply transition-transform duration-300 ease-out;
    }
    
    .hover-scale:hover {
        @apply transform scale-105;
    }
    
    .hover-rotate {
        @apply transition-transform duration-300 ease-out;
    }
    
    .hover-rotate:hover {
        @apply transform rotate-3;
    }
    
    /* Premium Container */
    .container-modern {
        @apply max-w-7xl mx-auto px-6 sm:px-8 lg:px-12;
    }
    
    /* Modern Grid */
    .grid-modern {
        @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
    }
    
    .grid-modern-lg {
        @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12;
    }

    /* Ripple Effect */
    .ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        transform: scale(0);
        animation: ripple-animation 0.6s ease-out;
        pointer-events: none;
    }

    @keyframes ripple-animation {
        to {
            transform: scale(2);
            opacity: 0;
        }
    }

    /* Button positioning for ripple effect */
    button, a[class*="bg-"] {
        position: relative;
        overflow: hidden;
    }

    /* Improved focus states for accessibility */
    .focus-ring {
        @apply focus:outline-none focus:ring-4 focus:ring-blue-500/20 focus:ring-offset-2 focus:ring-offset-white;
    }

    /* Loading skeleton animation */
    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }

    @keyframes loading {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }
}