/* Same-origin document transitions enhance normal links and redirects.
   Browsers without View Transitions retain the main-content entrance. */
@view-transition {
    navigation: auto;
}

@keyframes craftspace-page-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes craftspace-page-out {
    to { opacity: 0; }
}

@keyframes craftspace-page-in {
    from { opacity: 0; }
}

body > main,
body > .app main {
    animation: craftspace-page-enter 500ms cubic-bezier(.2, .7, .3, 1) backwards;
}

::view-transition-old(root) {
    animation: craftspace-page-out 500ms ease-out both;
}

::view-transition-new(root) {
    animation: craftspace-page-in 500ms ease-out both;
}

/* Do not let a transition snapshot interfere with clicks or keyboard focus. */
::view-transition {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }

    body > main,
    body > .app main {
        animation: none;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* Section entrances handle these layouts; avoid a second whole-page movement. */
body > .app main,
body > main:has(.page-header, section) { animation: none; }