/* Visual Enhancements CSS */

/* #2 Animated Gradient Hero */
@keyframes heroGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-animated {
    background: linear-gradient(270deg, #1e3a5f, #0f2744, #1a365d, #0d1f33, #1e3a5f);
    background-size: 400% 400%;
    animation: heroGradient 12s ease infinite;
}

/* #6 Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #0f2744 0%, #1a365d 40%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html.dark .gradient-text {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 40%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* #7 Staggered Card Entrance Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-animate {
    opacity: 0;
    animation: fadeInUp 0.5s ease forwards;
}

/* #4 Section Divider */
.section-divider {
    height: 4px;
    background: linear-gradient(90deg, transparent, #1e3a5f 20%, #2563eb 50%, #1e3a5f 80%, transparent);
    border-radius: 2px;
    opacity: 0.3;
}

html.dark .section-divider {
    background: linear-gradient(90deg, transparent, #60a5fa 20%, #3b82f6 50%, #60a5fa 80%, transparent);
    opacity: 0.2;
}