/* ============================================================
   Bytex — Transiciones de página (View Transitions API)
   File: assets/css/bytex-transitions.css

   Slide/wipe lateral entre cargas de página del mismo sitio.
   Nativo, sin JS. En navegadores sin soporte, la navegación es
   normal (sin animación).

   NOTA: el header NO se aísla como elemento propio de la transición.
   Aislarlo provoca un flash de fondo sólido cuando el header usa
   backdrop-filter/transparencia (el snapshot pierde el blur). Al
   dejarlo dentro del root, se desliza junto al contenido —como el
   slide es sutil (6%) casi no se percibe— y el flash desaparece.
   ============================================================ */

/* Activa las transiciones para navegación multipágina (MPA). */
@view-transition {
    navigation: auto;
}

/* ------------------------------------------------------------
   Contenido (root): slide/wipe lateral.
   - La página que sale se va hacia la izquierda y se desvanece.
   - La página que entra llega desde la derecha.
   ------------------------------------------------------------ */
::view-transition-old(root) {
    animation: bytex-slide-out-left .38s cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(root) {
    animation: bytex-slide-in-right .38s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes bytex-slide-out-left {
    from { transform: translateX(0);   opacity: 1; }
    to   { transform: translateX(-6%); opacity: 0; }
}
@keyframes bytex-slide-in-right {
    from { transform: translateX(6%);  opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}

/* ------------------------------------------------------------
   Accesibilidad: sin desplazamiento si el usuario lo pide.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: bytex-fade .2s ease both;
    }
    @keyframes bytex-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}