/* * This file contains custom CSS properties and animations not easily 
 * defined using standard Tailwind utility classes.
 */

/* 1. Custom Button Gradient */
.button-gradient {
    /* Tailwind classes handle the base background, hover, shadow, etc. */
    /* This defines the specific gradient colors for the primary CTA button */
    background-image: linear-gradient(135deg, var(--tw-color-blue-600) 0%, var(--tw-color-green-500) 100%);
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.button-gradient:hover {
    /* Slightly adjust gradient on hover for visual feedback */
    background-image: linear-gradient(135deg, var(--tw-color-blue-700) 0%, var(--tw-color-green-600) 100%);
}

/* 2. Custom Background Pattern */
.bg-grid-pattern {
    /* Creates a subtle dashed grid overlay for visual depth in the hero section */
    background-image: linear-gradient(to right, rgba(203, 213, 225, 0.4) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(203, 213, 225, 0.4) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: -1px -1px;
}

/* 3. Custom Animation for Hero Elements */
/* Tailwind only includes basic animations, so we define 'fade-up' here */
@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fade-up 0.6s ease-out both;
    /* Optional: Use a custom property to allow animation delay to be set inline in HTML */
    animation-delay: var(--animation-delay, 0s); 
}

/* 4. Smooth Scrolling Behavior */
html {
    scroll-behavior: smooth;
}

/* 5. Inter Font Fallback (if not loaded via Google Fonts link in HTML) */
body {
    font-family: 'Inter', sans-serif;
}