/* 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, var(--primary-900), var(--primary-800), var(--primary-700), var(--primary-600), var(--primary-900));
    background-size: 400% 400%;
    animation: heroGradient 12s ease infinite;
}

/* #6 Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-700) 40%, var(--primary-600) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html.dark .gradient-text {
    background: linear-gradient(135deg, var(--primary-accent-light) 0%, var(--primary-accent-medium) 40%, var(--primary-accent-dark) 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, var(--primary-700) 20%, var(--primary-600) 50%, var(--primary-700) 80%, transparent);
    border-radius: 2px;
    opacity: 0.3;
}

html.dark .section-divider {
    background: linear-gradient(90deg, transparent, var(--primary-accent-medium) 20%, var(--primary-accent-dark) 50%, var(--primary-accent-medium) 80%, transparent);
    opacity: 0.2;
}