/* Colour-edition switches (desktop only) and the ornament doors use a page transition; product-navigation.js skips every other one.
   The doors need it at every width: it keeps the closed doors on screen while the next page decodes its artwork. */
@view-transition { navigation: auto; }
/* Color editions: header, layout and scroll hold still; the photo and product details crossfade in place. */
html.hps-edition-switch .hps-gallery { view-transition-name: hps-edition-gallery; }
html.hps-edition-switch .hps-product-layout > .summary { view-transition-name: hps-edition-summary; }
html.hps-edition-switch::view-transition-old(root),
html.hps-edition-switch::view-transition-new(root) { animation: none; }
html.hps-edition-switch::view-transition-group(hps-edition-gallery),
html.hps-edition-switch::view-transition-group(hps-edition-summary) { animation-duration: 480ms; animation-timing-function: cubic-bezier(.22,.68,0,1); }
html.hps-edition-switch::view-transition-old(hps-edition-gallery) { animation: hps-page-out 260ms ease-out both; }
html.hps-edition-switch::view-transition-new(hps-edition-gallery) { animation: hps-edition-in 480ms cubic-bezier(.22,.68,0,1) both; }
/* Text never overlaps itself: the old details leave before the new ones arrive. */
html.hps-edition-switch::view-transition-old(hps-edition-summary) { animation: hps-page-out 140ms ease-in both; }
html.hps-edition-switch::view-transition-new(hps-edition-summary) { animation: hps-edition-rise 320ms 140ms cubic-bezier(.22,.68,0,1) both; }
@keyframes hps-edition-in { from { opacity: 0; transform: scale(.97); } }
@keyframes hps-edition-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes hps-page-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    ::view-transition-group(*) { animation: none !important; }
    ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}