/* 🎨 View Transitions API - Estilos personalizados */

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

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

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

/* Animaciones personalizadas */
@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

::view-transition-old(header),
::view-transition-new(header) {
    animation-duration: 0.25s;
    /* El header no hace fade, solo se mantiene */
    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;
    }
}