/*
 * Page transitions between documents. The original site crossfaded routes with
 * React's <ViewTransition>; the same ::view-transition rules in global.css
 * (page-enter, page-exit, morph, site-header) are reused here. Names exist only
 * while a transition runs, as they did with React:
 *   - the page being left is named in site.js (pageswap);
 *   - the page arriving is named here, while html:active-view-transition. Its
 *     transition type (set in <head>, includes/top.php) is the slug of the
 *     bottle that morphs between the shelf and the product page.
 */
@view-transition {
  navigation: auto;
}

html:active-view-transition [data-page] {
  view-transition-name: page-new;
  view-transition-class: page-enter;
}

html:active-view-transition-type(elia-extra-virgin-olive-oil-250-ml) [data-morph="bottle-elia-extra-virgin-olive-oil-250-ml"],
html:active-view-transition-type(elia-extra-virgin-olive-oil-500-ml) [data-morph="bottle-elia-extra-virgin-olive-oil-500-ml"],
html:active-view-transition-type(elia-extra-virgin-olive-oil-750-ml) [data-morph="bottle-elia-extra-virgin-olive-oil-750-ml"],
html:active-view-transition-type(elia-extra-virgin-olive-oil-1000-ml) [data-morph="bottle-elia-extra-virgin-olive-oil-1000-ml"] {
  view-transition-name: bottle-morph;
  view-transition-class: morph;
}