/**
 * View Transitions API Styles
 * Smooth cross-fade transitions between pages
 * MUST BE LOADED EARLY (after fouc-prevention.css)
 */

/* Enable view transitions for navigation */
@view-transition {
    navigation: auto;
}

/* Smooth cross-fade animation (200ms) */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
}

/* Faster fade-out for old page */
::view-transition-old(root) {
    animation-name: fade-out;
    animation-duration: 0.15s;
}

/* Slower fade-in for new page */
::view-transition-new(root) {
    animation-name: fade-in;
    animation-duration: 0.25s;
}

/* Custom fade animations */
@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

/* Prevent flash during transition */
::view-transition-group(root) {
    animation-timing-function: ease-in-out;
}

/* Keep background consistent during transition */
::view-transition-old(root),
::view-transition-new(root) {
    mix-blend-mode: normal;
}