/* La misma entrada y salida para páginas y tiendas. */
@view-transition { navigation: auto; }

html[data-store-motion]::view-transition-group(root) { animation: none; }
html[data-store-motion]::view-transition-image-pair(root) { isolation: isolate; }
html[data-store-motion]::view-transition-old(root),
html[data-store-motion]::view-transition-new(root) {
    mix-blend-mode: normal;
    overflow: hidden;
    transform-origin: center;
}
html[data-store-motion="opening"]::view-transition-old(root) {
    animation: provider-background-out 300ms cubic-bezier(.22, 1.15, .36, 1) both;
    z-index: 1;
}
html[data-store-motion="opening"]::view-transition-new(root) {
    animation: provider-sheet-in 300ms cubic-bezier(.22, 1.15, .36, 1) both;
    z-index: 2;
}
html[data-store-motion="closing"]::view-transition-old(root) {
    animation: provider-sheet-out 260ms cubic-bezier(.4, 0, .2, 1) both;
    z-index: 2;
}
html[data-store-motion="closing"]::view-transition-new(root) {
    animation: provider-background-in 260ms cubic-bezier(.4, 0, .2, 1) both;
    z-index: 1;
}
@keyframes provider-sheet-in {
    from { transform: scale(.76); border-radius: 32px; opacity: 0; box-shadow: 0 25px 60px -12px #0006; }
    to { transform: scale(1); border-radius: 0; opacity: 1; box-shadow: 0 0 0 #0000; }
}
@keyframes provider-sheet-out {
    from { transform: scale(1); border-radius: 0; opacity: 1; }
    to { transform: scale(.76); border-radius: 32px; opacity: 0; box-shadow: 0 25px 60px -12px #0006; }
}
@keyframes provider-background-out {
    from { transform: scale(1); filter: blur(0); opacity: 1; }
    to { transform: scale(.94); filter: blur(16px); opacity: .75; }
}
@keyframes provider-background-in {
    from { transform: scale(.94); filter: blur(16px); opacity: .75; }
    to { transform: scale(1); filter: blur(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-store-motion]::view-transition-old(root),
    html[data-store-motion]::view-transition-new(root) { animation: none; }
}