/* Page transition: Turbo swaps shop pages as a view transition (the
   view-transition meta in the shop's head), the old page fading out quicker
   than the new one fades in. An event's flyer grows from its card into the
   event page's hero and shrinks back into it (view-transition-name:
   event-<id> on both, inline), its colours wash in behind it and the title
   and facts rise in beside it; a post's picture grows from its card into the
   post the same way (post-<id>). The header holds still and a desktop's
   sidebar slides in from the window's right edge, and back out.

   What Turbo doesn't carry (the checkout's form, which may leave for the
   payment provider, PayPal's way back, the consent banner) is a page load
   of its own: the browser swaps those as a view transition too
   (@view-transition), with the same names and the same crossfade.

   page_transition_controller.js marks what is on both pages as travelling
   (.travels): it moves above the page, under the header, and until its own
   image has loaded it shows the one it had. It also says whether a sidebar
   opens, closes or stays (data-sidebar-transition). With reduced motion the
   durations are 0ms (tokens.css) and only the crossfade is left. */
.site-header {
  view-transition-name: site-header;
}

/* Captured on its own, the header has nothing behind it to frost: it is
   solid while pages swap, so what scrolled under it stays hidden */
:root:active-view-transition .site-header {
  background: var(--color-surface-0);
}

.event-hero__wash {
  view-transition-name: event-hero-wash;
}

.event-hero__heading {
  view-transition-class: rise;
  view-transition-name: event-hero-heading;
}

.event-hero__facts {
  view-transition-class: rise;
  view-transition-name: event-hero-facts;
}

@media (min-width: 60rem) {
  .page-sidebar {
    view-transition-name: page-sidebar;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation-duration: var(--duration-fast);
  }
}

/* Beside a sidebar the header is narrower: it keeps its size, the brand
   holding still on the left while its right end draws in or out */
::view-transition-group(site-header) {
  background: var(--color-surface-0);
  overflow: clip;
  z-index: 2;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
  block-size: 100%;
  inline-size: 100%;
  object-fit: none;
  object-position: left center;
}

::view-transition-group(.travels) {
  animation-duration: var(--duration-slow);
  animation-timing-function: var(--ease-out);
  z-index: 1;
}

/* A card's picture and the page's are seldom the same shape: both fill the
   box as it grows, cropped like the pictures themselves */
::view-transition-old(.travels),
::view-transition-new(.travels) {
  animation-duration: var(--duration-slow);
  block-size: 100%;
  object-fit: cover;
}

::view-transition-new(event-hero-wash):only-child {
  animation: page-transition-fade-in calc(var(--duration-slow) * 1.5) var(--ease-out) both;
}

::view-transition-new(.rise):only-child {
  animation: page-transition-rise var(--duration-slow) var(--ease-out) calc(var(--duration-fast) / 2) both;
}

::view-transition-old(.rise):only-child,
::view-transition-old(event-hero-wash):only-child {
  animation: page-transition-fade-out var(--duration-fast) var(--ease-out) both;
}

/* Where one page's sidebar meets another's (the checkout's, the seat
   picker's) it holds or fades in place instead */
:root[data-sidebar-transition="opens"]::view-transition-new(page-sidebar) {
  animation: page-transition-slide-in var(--duration-slow) var(--ease-out) both;
}

:root[data-sidebar-transition="closes"]::view-transition-old(page-sidebar) {
  animation: page-transition-slide-out var(--duration-base) var(--ease-out) both;
}

@keyframes page-transition-fade-in {
  from { opacity: 0; }
}

@keyframes page-transition-fade-out {
  to { opacity: 0; }
}

@keyframes page-transition-rise {
  from {
    opacity: 0;
    translate: 0 var(--space-s);
  }
}

@keyframes page-transition-slide-in {
  from { translate: 100% 0; }
}

@keyframes page-transition-slide-out {
  to { translate: 100% 0; }
}