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

/* Professional Design System */
@layer base {
    :root {
        /* Premium Color Palette */
        --color-primary: #0F172A;
        /* Deep Navy */
        --color-primary-light: #1E293B;
        --color-accent: #3B82F6;
        /* Professional Blue */
        --color-accent-light: #60A5FA;
        --color-accent-dark: #2563EB;
        --color-success: #10B981;
        --color-warning: #F59E0B;
        --color-error: #EF4444;

        /* Gradients */
        --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --gradient-premium: linear-gradient(135deg, #0F172A 0%, #1E40AF 50%, #3B82F6 100%);
        --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);

        /* Shadows */
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
        --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
        --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.3);

        /* Spacing */
        --spacing-xs: 0.5rem;
        --spacing-sm: 1rem;
        --spacing-md: 1.5rem;
        --spacing-lg: 2rem;
        --spacing-xl: 3rem;

        /* Border Radius */
        --radius-sm: 0.5rem;
        --radius-md: 1rem;
        --radius-lg: 1.5rem;
        --radius-xl: 2rem;
    }

    /* Typography */
    body {
        font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

@layer components {

    /* Glass Morphism Card */
    .glass-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: var(--shadow-lg);
    }

    .glass-card-dark {
        background: rgba(15, 23, 42, 0.8);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Premium Button */
    .btn-premium {
        @apply relative overflow-hidden;
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .btn-premium:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
    }

    .btn-premium:active {
        transform: translateY(0);
    }

    /* Animated Gradient Background */
    .gradient-animated {
        background: linear-gradient(-45deg, #0F172A, #1E40AF, #3B82F6, #60A5FA);
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
    }

    @keyframes gradientShift {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    /* Floating Animation */
    .float-animation {
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-20px);
        }
    }

    /* Pulse Glow */
    .pulse-glow {
        animation: pulseGlow 2s ease-in-out infinite;
    }

    @keyframes pulseGlow {

        0%,
        100% {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
        }

        50% {
            box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
        }
    }

    /* Service Card Hover Effect */
    .service-card {
        @apply relative overflow-hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .service-card::before {
        content: '';
        @apply absolute inset-0 opacity-0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
        transition: opacity 0.4s ease;
    }

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

    .service-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    /* Icon Container */
    .icon-container {
        @apply relative;
        transition: all 0.3s ease;
    }

    .service-card:hover .icon-container {
        transform: scale(1.1) rotate(5deg);
    }

    /* Premium Pricing Card */
    .pricing-card {
        @apply relative overflow-hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pricing-card:hover {
        transform: translateY(-10px);
    }

    .pricing-card.featured {
        background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
        box-shadow: 0 20px 60px rgba(59, 130, 246, 0.4);
    }

    /* Section Divider */
    .section-divider {
        @apply w-20 h-1 mx-auto rounded-full;
        background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
    }
}

@layer utilities {

    /* Text Gradient */
    .text-gradient {
        @apply bg-clip-text text-transparent;
        background-image: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    }

    .text-gradient-premium {
        @apply bg-clip-text text-transparent;
        background-image: linear-gradient(135deg, #0F172A 0%, #3B82F6 100%);
    }
}

/* Blob Animation for Hero Background */
@keyframes blob {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(20px, -50px) scale(1.1);
    }

    50% {
        transform: translate(-20px, 20px) scale(0.9);
    }

    75% {
        transform: translate(50px, 50px) scale(1.05);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

.animate-fade-in {
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}