/*
 * transitions.css
 * Estilos para las animaciones de transición entre páginas.
 */

/* Este es el contenedor principal que se animará.
 * Asegúrate de que el selector coincida con el que definiste en el PHP ('#main' por defecto).
 */
 #main {
    transition: opacity 0.4s ease-in-out;
}

/* --- ANIMACIONES DE SALIDA --- */
/* Cuando el body tiene la clase 'page-is-exiting', la animación de salida se activa */
body.page-is-exiting #main {
    opacity: 0;
    transform: translateY(20px);
}


/* --- ANIMACIONES DE ENTRADA --- */
/* Por defecto, el contenido nuevo estará invisible y ligeramente desplazado para la animación */
body.page-is-entering #main {
    opacity: 0;
    transform: translateY(-20px);
}

/* La animación se revierte cuando el contenido ya está en su sitio */
body.page-is-entering.page-entered #main {
    opacity: 1;
    transform: translateY(0);
}

body.page-is-exiting,
body.page-is-entering {
    pointer-events: none;
}