/* palabras-rotan — una palabra del titular va cambiando.
   Portado del `flip-words` / `container-text-flip` de la cantera.

   "Reformamos tu [cocina / baño / piso entero]". Deja claro a qué te dedicas sin
   escribir tres frases, y es de las pocas animaciones que aporta INFORMACIÓN en
   vez de decorar. */
[data-lui~="rotan"]{
  display:inline-grid;         /* grid apilado: todas las palabras en la misma celda */
  vertical-align:bottom;
  overflow:hidden;
  /* El ancho se ajusta a la palabra visible, con una transición, para que el
     resto de la frase no dé un salto brusco al cambiar. */
  transition:width .4s cubic-bezier(.16,1,.3,1);
}

[data-lui~="rotan"] > *{
  grid-area:1 / 1;
  opacity:0;
  transform:translateY(60%) rotate(2deg);
  transition:opacity .38s ease,transform .38s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
  color:var(--lui-acento,#c8a24a);
}

[data-lui~="rotan"] > .lui-visible{
  opacity:1;
  transform:none;
}
/* La que sale, se va hacia arriba: si entrara y saliera por el mismo lado
   parecería que rebota. */
[data-lui~="rotan"] > .lui-saliendo{
  opacity:0;
  transform:translateY(-60%) rotate(-2deg);
}

@media (prefers-reduced-motion:reduce){
  [data-lui~="rotan"]{transition:none}
  [data-lui~="rotan"] > *{transition:opacity .2s;transform:none}
  [data-lui~="rotan"] > .lui-saliendo{transform:none}
}