/* --- Header Highlight Animation --- */
h3, h4 {
    position: relative;
    opacity: 0; /* Start hidden */
}

h3.animate-highlight, h4.animate-highlight {
    opacity: 1;
    animation: fadeInText 0.15s 0.1s forwards;
}

h3.animate-highlight::after, h4.animate-highlight::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 40, 104, 0.3); /* Semi-transparent blue */
    animation: running-highlight 0.25s cubic-bezier(0.77, 0, 0.18, 1) forwards;
    transform-origin: left;
}

@keyframes running-highlight {
    0% {
        transform: scaleX(0);
        transform-origin: left;
    }
    45% {
        transform: scaleX(1);
        transform-origin: left;
    }
    55% {
        transform: scaleX(1);
        transform-origin: right;
    }
    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}

@keyframes fadeInText {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* --- Generative Typing Animation --- */
p, li {
    opacity: 0; /* Start hidden */
}

p.typing-effect, li.typing-effect {
    opacity: 1; /* Make visible when animation starts */
}

.typing-cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background-color: #002868;
    animation: blink 0.7s infinite;
    margin-left: 4px;
    vertical-align: text-bottom;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}