.filterable-item {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; 
    transform: scale(1);
    opacity: 1;
}
/* FASE 1: Animación de SALIDA */
.filterable-item.post-out {
    transform: scale(0); /* Encoger a cero */
    opacity: 0;          /* Desvanecer */
}
/* FASE 2: Animación de ENTRADA (Estado inicial antes de la transición) */
.filterable-item.post-in-start {
    /* La clase .hide() de jQuery ya le puso display: none. 
       .show() o .fadeIn() le pondrá display: block/flex, etc. 
       Aquí forzamos el estado de inicio de la escala. */
    transform: scale(0);
    opacity: 0;
}
/* FASE 2: Animación de ENTRADA (Estado final, ¡la transición!) */
.filterable-item.post-in-end {
    transform: scale(1); /* Crecer al 100% */
    opacity: 1;
}