/* ==========================================================================
   Transiciones entre vistas (View Transitions API)
   --------------------------------------------------------------------------
   Se marca con .vista cada contenedor que representa una pantalla completa:
   las tres secciones del panel y las dos tarjetas de las páginas públicas.

   Todas comparten el mismo `view-transition-name` a propósito. El nombre debe
   ser único entre los elementos VISIBLES, y como se alternan con x-show (que
   aplica display:none), en cada instante sólo uno se está pintando.

   Por eso mismo esos contenedores no llevan x-transition de Alpine: si Alpine
   mantuviera visible el saliente mientras aparece el entrante, habría dos
   elementos con el mismo nombre y el navegador cancelaría la transición.
   ========================================================================== */

.vista {
    view-transition-name: vista;
}

/* El resto de la página (encabezado, fondo) no debe parpadear: sólo se anima
   la vista que entra y la que sale. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

::view-transition-old(vista) {
    animation: vista-sale 160ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(vista) {
    animation: vista-entra 240ms cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes vista-sale {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes vista-entra {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* Quien pidió menos movimiento en su sistema ve el cambio sin desplazamiento.
   El JS ya evita iniciar la transición, esto cubre el caso de que igual corra. */
@media (prefers-reduced-motion: reduce) {

    ::view-transition-old(vista),
    ::view-transition-new(vista) {
        animation: none;
    }
}