/*
 * RF2 - animazione testo AZIONE ATTUALE
 * Animazione eseguita solamente quando cambia l'istruzione.
 */

@keyframes rf2AzioneTestoEntra {

    0% {
        opacity: 0.15;
        transform: translateX(14px);
    }

    65% {
        opacity: 1;
        transform: translateX(-2px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/*
 * La specificità serve a superare la vecchia regola
 * "animation: none !important" presente nel modulo guida.
 */
#rf2-guida-completa-azione
#rf2-gc-descrizione.rf2-azione-testo-animato {

    animation:
        rf2AzioneTestoEntra
        0.55s
        ease-out
        both !important;

    transform-origin:
        left center !important;

    will-change:
        opacity,
        transform;
}


/* Rispetta le preferenze di accessibilità del browser */
@media (prefers-reduced-motion: reduce) {

    #rf2-guida-completa-azione
    #rf2-gc-descrizione.rf2-azione-testo-animato {

        animation:
            none !important;
    }
}