/*
 * Shop engine (GuiComponents::Shop): page transitions between the shop's
 * pages. The shop runs without Turbo, so these are the browser's own
 * cross-document view transitions (Chrome 126+, Safari 18.2+; other
 * browsers navigate plainly). The pattern is the backend's: the chrome
 * stays still, only the content and the named hero move.
 *
 *   root                 crossfade (the background, hero header, bars)
 *   vt-shop-header       the compact header — static; where a page has
 *                        none (the event page), it fades
 *   vt-shop-content      the <main> — old fades out, new rises in
 *   shop-photo-<id>      a photo tile and the stage's current photo carry
 *                        the same name, so the photo morphs between the
 *                        grid and its page (and back)
 *
 * Entrances (shop.css) are skipped on a page that arrived through a
 * transition: the inline script in Views::Shop::Base marks <html> on
 * pagereveal, otherwise the morph target would still be invisible.
 */

@view-transition {
  navigation: auto;
}

.gui-shop main {
  view-transition-name: vt-shop-content;
}

.gui-shop > header {
  view-transition-name: vt-shop-header;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
}

::view-transition-group(vt-shop-header) {
  animation-duration: 0s;
}
::view-transition-old(vt-shop-header),
::view-transition-new(vt-shop-header) {
  animation: none;
}
::view-transition-old(vt-shop-header):only-child {
  animation: shop-vt-fade-out 0.2s ease-out both;
}
::view-transition-new(vt-shop-header):only-child {
  animation: shop-vt-fade-in 0.25s ease-out both;
}

::view-transition-group(vt-shop-content) {
  animation-duration: 0s;
}
::view-transition-old(vt-shop-content) {
  animation: shop-vt-fade-out 0.16s ease-out both;
}
::view-transition-new(vt-shop-content) {
  animation: shop-vt-rise-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* The photo morph: the group's move is the animation, the images crossfade. */
.gui-shop img[style*="view-transition-name: shop-photo-"] {
  view-transition-class: shop-photo;
}
::view-transition-group(*.shop-photo) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
::view-transition-old(*.shop-photo),
::view-transition-new(*.shop-photo) {
  animation-duration: 0.42s;
  height: 100%;
  object-fit: cover;
  overflow: clip;
}

html.shop-vt-arrived .shop-tile,
html.shop-vt-arrived .shop-pop-in,
html.shop-vt-arrived .shop-stagger {
  animation-duration: 0s;
  animation-delay: 0s;
}

@keyframes shop-vt-fade-out {
  to { opacity: 0; }
}
@keyframes shop-vt-fade-in {
  from { opacity: 0; }
}
@keyframes shop-vt-rise-in {
  from { opacity: 0; transform: translateY(12px); }
}

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