/* ADDITIONAL HERO TITLE ENHANCEMENTS */
/* Thêm vào cuối file main.css */

/* Typing effect for pain question */
.hero-title .pain-question:first-child {
    animation: fadeInLeft 1s ease-out;
}

.hero-title .pain-highlight {
    animation: fadeInScale 1.5s ease-out 0.5s both, pulseGlow 2s ease-in-out 2s infinite alternate;
}

.hero-title .pain-question:last-child {
    animation: fadeInRight 1s ease-out 1s both;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Improved text contrast */
.pain-question {
    text-shadow: 
        2px 2px 4px rgba(0,0,0,0.8),
        -1px -1px 2px rgba(0,0,0,0.5);
}

/* Better focus states for accessibility */
.hero-cta .btn:focus,
.consultation-form button:focus {
    outline: 3px solid #f39c12;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .pain-highlight {
        background: #000000 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff;
    }
    
    .pain-question {
        color: #ffffff !important;
        text-shadow: 2px 2px 0px #000000;
    }
}