@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/* Enable class-based dark mode (for user-controlled toggle) */
@variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

@layer components {
    /* Cards */
    .card-hover {
        @apply transition-all duration-300;
    }

    .card-hover:hover {
        @apply transform -translate-y-2 shadow-xl;
    }

    /* Buttons */
    .btn-primary {
        @apply bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-8 py-4 rounded-lg font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-300;
    }

    .btn-secondary {
        @apply bg-white text-blue-600 border-2 border-blue-600 px-8 py-4 rounded-lg font-semibold hover:bg-blue-50 transition-all duration-300;
    }

    /* Text Gradients */
    .text-gradient {
        @apply bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent;
    }

    /* Smooth Scroll */
    .scroll-smooth {
        @apply scroll-smooth;
    }

    /* Section */
    .section {
        @apply py-20;
    }

    .section-title {
        @apply text-4xl lg:text-5xl font-bold text-gray-900;
    }

    .section-subtitle {
        @apply text-lg text-gray-600 max-w-2xl mx-auto;
    }
}

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

    .animate-slide-in-up {
        animation: slideInUp 0.6s ease-out forwards;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

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

    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-20px);
        }
    }

    .animate-float {
        animation: float 6s ease-in-out infinite;
    }

    /* Utility Classes */
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .blur-sm-custom {
        backdrop-filter: blur(10px);
    }
}