/* Page transitions between index / menu / checkout.
   Browsers with cross-document View Transitions (Chrome, Edge, Safari 18.2+) use the
   native path below; others get the class-based fallback driven by transitions.js. */

@view-transition {
    navigation: auto;
}

/* The header stays put while the page underneath changes */
header {
    view-transition-name: site-header;
}

::view-transition-group(site-header) {
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(root) {
    animation: pt-leave 0.5s cubic-bezier(0.7, 0, 0.84, 0) both;
}

::view-transition-new(root) {
    animation: pt-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes pt-leave {
    /* "none" (not 0) so a resting body never becomes a containing block for fixed elements */
    from { opacity: 1; transform: none; filter: none; }
    to { opacity: 0; transform: translateY(-32px) scale(0.985); filter: blur(4px); }
}

@keyframes pt-enter {
    from { opacity: 0; transform: translateY(48px); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
}

/* Fallback for browsers without cross-document view transitions */
/* (pt-entering is removed once the animation ends, so the resting body has no
   transform/filter and fixed elements like the header stay fixed) */
html.pt-fallback.pt-entering body {
    animation: pt-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.pt-fallback.pt-leaving body {
    animation: pt-leave 0.45s cubic-bezier(0.7, 0, 0.84, 0) both;
    pointer-events: none;
}

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

    html.pt-fallback.pt-entering body,
    html.pt-fallback.pt-leaving body {
        animation: none;
    }
}