/* Enhanced Hero Intro Animation with Gradient Integration */

/* Initial state - all lines hidden for intro */
body:not(.intro-complete) .hero-title .title-line-1,
body:not(.intro-complete) .hero-title .title-line-2,
body:not(.intro-complete) .hero-title .title-line-3 {
    opacity: 0;
    transform: translateX(-100px) scale(0.95);
    will-change: transform, opacity;
}

/* Gradient text setup - always ready */
.hero-title .title-line-2.gradient-text {
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-white) 50%, var(--primary-red) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* Intro animations - triggered by JavaScript */
.hero-title .title-line-1.animate-intro {
    animation: slideInFromLeft 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

.hero-title .title-line-2.gradient-text.animate-intro {
    animation: slideInFromLeft 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
}

.hero-title .title-line-3.animate-intro {
    animation: slideInFromLeft 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.1s forwards;
}

/* After intro completes - continuous gradient animation starts */
body.intro-complete .hero-title .title-line-2.gradient-text {
    animation: gradientShift 6s ease-in-out infinite;
}

/* Regular slide-in animation */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px) scale(0.95);
    }
    50% {
        opacity: 0.7;
        transform: translateX(5px) scale(1.02);
    }
    70% {
        opacity: 0.9;
        transform: translateX(-2px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Gradient animation for synchronized headers */
@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Performance optimizations */
.hero-title .title-line-1,
.hero-title .title-line-2,
.hero-title .title-line-3 {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Remove will-change after animations complete */
.intro-complete .hero-title .title-line-1,
.intro-complete .hero-title .title-line-2,
.intro-complete .hero-title .title-line-3 {
    will-change: auto;
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-title .title-line-1,
    .hero-title .title-line-2,
    .hero-title .title-line-3 {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    
    .hero-title .title-line-2.gradient-text {
        animation: gradientShift 6s ease-in-out infinite !important;
    }
}