/* 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. The header holds still and a desktop's
   sidebar slides in from the window's right edge, and back out.

   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-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;
}

::view-transition-old(.travels),
::view-transition-new(.travels) {
  animation-duration: var(--duration-slow);
}

::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; }
}