/* Enhanced Typography for Hero Section */
.hero-title {
    display: inline-block;
    position: relative;
    font-weight: 800;
    letter-spacing: 2px;
}

/* Fancy gradient effect for hero title */
.hero-title .highlight {
    position: relative;
    display: inline-block;
    background: linear-gradient(45deg, var(--primary-color), #4361ee, #3f51b5, var(--accent-color));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-animation 5s ease infinite;
}

/* Add a subtle underline animation */
.hero-title .highlight::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), #4361ee, #3f51b5, var(--accent-color));
    background-size: 300% 300%;
    animation: gradient-animation 5s ease infinite;
    transition: transform 0.3s ease;
    transform-origin: right;
    transform: scaleX(0);
}

.hero-title:hover .highlight::after {
    transform-origin: left;
    transform: scaleX(1);
}

/* Dark mode adjustments */
[data-theme="dark"] .hero-title .highlight {
    background: linear-gradient(45deg, #536dfe, #6d83ff, #4361ee, #ff6b6b);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-animation 5s ease infinite;
    text-shadow: 0 0 10px rgba(83, 109, 254, 0.3);
}

[data-theme="dark"] .hero-title .highlight::after {
    background: linear-gradient(90deg, #536dfe, #6d83ff, #4361ee, #ff6b6b);
    background-size: 300% 300%;
    animation: gradient-animation 5s ease infinite;
    box-shadow: 0 0 10px rgba(83, 109, 254, 0.3);
}

/* Animation for gradient */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Add subtle pulsing animation to the typed text */
.typed-text {
    position: relative;
    display: inline-block;
    animation: text-shadow-pulse 3s ease-in-out infinite alternate;
}

@keyframes text-shadow-pulse {
    0% {
        text-shadow: 0 0 5px rgba(83, 109, 254, 0.1);
    }
    100% {
        text-shadow: 0 0 15px rgba(83, 109, 254, 0.3);
    }
}

/* Special effect for dark mode */
[data-theme="dark"] .typed-text {
    animation: neon-text-pulse 3s ease-in-out infinite alternate;
}

@keyframes neon-text-pulse {
    0% {
        text-shadow: 0 0 5px rgba(83, 109, 254, 0.3),
                     0 0 10px rgba(83, 109, 254, 0.2);
    }
    100% {
        text-shadow: 0 0 10px rgba(83, 109, 254, 0.5),
                     0 0 20px rgba(83, 109, 254, 0.3),
                     0 0 30px rgba(83, 109, 254, 0.1);
    }
}