/* Transiciones entre páginas · header persistente */

/* === View Transitions API === */
@view-transition { navigation: auto; }

/* Header: no anima, permanece fijo visualmente */
.site-header {
    view-transition-name: site-header;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
}

/* Solo el contenido de la página hace la transición */
::view-transition-old(root) {
    animation: zw-fade-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
    animation: zw-fade-in 360ms cubic-bezier(0, 0, 0.2, 1) 60ms both;
}

@keyframes zw-fade-out {
    to { opacity: 0; transform: translateY(-8px); }
}
@keyframes zw-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* === Fallback: solo anima <main>, el header no se toca === */
#main {
    opacity: 1;
    transition: opacity 220ms ease, transform 220ms ease;
}

#main.zw-content-leaving {
    opacity: 0;
    transform: translateY(-6px);
}

#main.zw-content-enter {
    animation: zw-fade-in 360ms cubic-bezier(0, 0, 0.2, 1) both;
}

/* === Reduce motion === */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(site-header),
    ::view-transition-new(site-header) {
        animation: none !important;
    }
    #main {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}