/* Palabra rotativa de la franja "Una explosion de ___ en cada bocado".
   Reserva su propio hueco (min-width puesto por JS con la palabra mas
   ancha) para que el resto de la frase no se mueva al cambiar. Si JS no
   corre, esto no hace nada raro: la palabra "sabor" del HTML se queda
   quieta, tal cual. */

.palabra-rotativa {
    display: inline-grid;
    vertical-align: baseline;
    text-align: center;
}

.palabra-rotativa__actual {
    display: inline-block;
    grid-area: 1 / 1;
}

@media (prefers-reduced-motion: no-preference) {
    .palabra-rotativa__actual.-saliendo {
        animation: palabra-sale .35s ease-out forwards;
    }
    .palabra-rotativa__actual.-entrando {
        animation: palabra-entra .35s ease-in forwards;
    }
}

/* La palabra NUNCA llega a desaparecer: se queda muy desenfocada pero
   siempre visible. Asi el hueco no se vacia nunca y el cambio de una
   palabra a otra pasa desapercibido, escondido dentro del borron. */
@keyframes palabra-sale {
    0%   { filter: blur(0);    transform: translateX(0);    opacity: 1; }
    35%  { transform: translateX(-3px); }
    65%  { transform: translateX(3px); }
    100% { filter: blur(9px);  transform: translateX(0);    opacity: .72; }
}

@keyframes palabra-entra {
    0%   { filter: blur(9px);  transform: translateX(0);    opacity: .72; }
    35%  { transform: translateX(3px); }
    65%  { transform: translateX(-3px); }
    100% { filter: blur(0);    transform: translateX(0);    opacity: 1; }
}