/* ==========================================================================
   GLOBAL SMOOTH PAGE TRANSITIONS (SEPARATE MODULE)
   ========================================================================== */

@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pageFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}

/* Kill the default box-geometry morph (this is what causes the stretch/flash) */
::view-transition-group(page-content) {
    animation: none;
}

/* Target the NAMED group, not root */
::view-transition-old(page-content) {
    animation: 200ms cubic-bezier(0.4, 0, 1, 1) both pageFadeOut;
}

::view-transition-new(page-content) {
    animation: 280ms cubic-bezier(0, 0, 0.2, 1) both pageFadeIn;
}

#page-content {
    view-transition-name: page-content;
}