/* Slide entrante: empieza recortado */
.slide.incoming {
z-index: 2;
clip-path: inset(0 100% 0 0); /* invisible */
transition: clip-path 0.7s cubic-bezier(0.77,0,0.175,1);
}
/* Al añadir .reveal, se desvela */
.slide.incoming.reveal {
clip-path: inset(0 0% 0 0); /* visible */
}
¿Cómo funciona?
clip-path: inset(top right bottom left) recorta el elemento como si fuera una ventana. El slide entrante empieza completamente recortado (inset(0 100% 0 0) = invisible desde la derecha) y la transición CSS lo abre hasta inset(0 0 0 0) (completamente visible). El slide anterior permanece debajo. Cambia la dirección de revelado con los botones para ver los distintos valores de inset().