/* 🎨 View Transitions API - Estilos personalizados premium */

/* Transición por defecto: cross-fade ultra suave con slide sutil */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    /* easeInOutCubic ultra premium */
}

/* Fade out de la página antigua con slide hacia arriba */
::view-transition-old(root) {
    animation-name: fade-out-slide-premium;
}

/* Fade in de la página nueva con slide desde abajo */
::view-transition-new(root) {
    animation-name: fade-in-slide-premium;
}

/* Animaciones personalizadas premium con slide más sutil */
@keyframes fade-out-slide-premium {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-5px) scale(0.98);
    }
}

@keyframes fade-in-slide-premium {
    from {
        opacity: 0;
        transform: translateY(5px) scale(1.02);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Transición para el header - desactivada para evitar saltos */
header {
    view-transition-name: none;
}

/* Excluir logo de las transiciones para evitar estiramiento */
.logo,
.logo-img {
    view-transition-name: none;
}

/* Comentado - ya no participa en View Transitions
::view-transition-old(header),
::view-transition-new(header) {
    animation-duration: 0.25s;
    animation-name: none;
}
*/

/* Transición para el footer (se mantiene estable) */
footer {
    view-transition-name: footer;
}

::view-transition-old(footer),
::view-transition-new(footer) {
    animation-duration: 0.25s;
    animation-name: none;
}

/* Reducir motion para usuarios con preferencia de accesibilidad */
@media (prefers-reduced-motion: reduce) {

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.05s;
    }
}