/* ===== INPUT (right → left) ================================ */

.text-animated-input {
    background: linear-gradient(
        90deg,
        hsla(0, 0%, 0%, 1) 0%,
        hsla(0, 0%, 0%, 1) 25%,
        hsla(309, 74%, 76%, 1) 35%,
        hsla(0, 0%, 100%, 1) 45%,
        hsla(309, 74%, 76%, 1) 55%,
        hsla(0, 0%, 66%, 1) 65%,
        hsla(0, 0%, 66%, 1) 100%
    );
    background-size: 400% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow-input 5s ease-in-out forwards;
}

@keyframes gradient-flow-input {
    0%   { background-position: 0% center; }
    100% { background-position: 100% center; }
}

/* ===== WAITING (opacity flash — unchanged) ================================ */

.text-animated-waiting {
    background: linear-gradient(
        90deg,
        hsla(0, 0%, 0%, 1) 0%,
        hsla(0, 0%, 0%, 1) 25%,
        hsla(309, 74%, 76%, 1) 35%,
        hsla(0, 0%, 100%, 1) 45%,
        hsla(309, 74%, 76%, 1) 55%,
        hsla(0, 0%, 66%, 1) 65%,
        hsla(0, 0%, 66%, 1) 100%
    );
    background-size: 400% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-position: 100% center;
    animation: opacity-flash 1.5s ease-in-out infinite;
}

@keyframes opacity-flash {
    0%   { opacity: 1; }
    50%  { opacity: 0.3; }
    100% { opacity: 1; }
}

/* ===== OUTPUT (left → right) ================================ */

.text-animated-output {
    background: linear-gradient(
        90deg,
        hsla(0, 0%, 0%, 1) 0%,
        hsla(0, 0%, 0%, 1) 25%,
        hsla(309, 74%, 76%, 1) 35%,
        hsla(0, 0%, 100%, 1) 45%,
        hsla(309, 74%, 76%, 1) 55%,
        hsla(0, 0%, 66%, 1) 65%,
        hsla(0, 0%, 66%, 1) 100%
    );
    background-size: 400% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow-output 1s ease-in-out forwards;
}

@keyframes gradient-flow-output {
    0%   { background-position: 100% center; }
    100% { background-position: 0% center; }
}

/* ===== FADE OUT (non-target sections returning to normal) ================================ */

.text-animated-fade-out {
    animation: text-fade-out 0.3s ease-out forwards;
}

@keyframes text-fade-out {
    0%   { opacity: 0.3; }
    100% {
        opacity: 1;
        -webkit-text-fill-color: inherit;
        background: none;
    }
}