/*
 * Page transitions (`page-transitions.js`).
 *
 * Every navigation: the old page goes quickly, the new one fades in slowly;
 * the header is a layer of its own, so it stays put and the logo never
 * blinks. From a card (`card` type): the card has already grown to fill the
 * window (`vt-media`), so that layer stays where it is and the hero fades
 * in over it once it is ready, its words (`vt-hero-text`) and the rest of
 * the page after.
 */
@view-transition {
  navigation: auto;
}

#site-header {
  view-transition-name: site-header;
}

/* Default: a slow fade-in of the new page. */
::view-transition-old(root) {
  animation: vt-out 0.25s ease-out both;
}

::view-transition-new(root) {
  animation: vt-in 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The header crossfades in place (invisible when it is the same). */
::view-transition-group(site-header) {
  animation-duration: 0s;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation-duration: 0.35s;
}

/* From a card: the full-window frame holds, the hero fades in over it. */
html:active-view-transition-type(card)::view-transition-old(root) {
  animation: none;
}

html:active-view-transition-type(card)::view-transition-new(root) {
  animation: vt-in 0.6s 0.2s ease-out both;
}

::view-transition-group(vt-media) {
  animation-duration: 0s;
}

::view-transition-image-pair(vt-media) {
  isolation: auto;
}

::view-transition-old(vt-media),
::view-transition-new(vt-media) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}

::view-transition-old(vt-media) {
  animation: none;
}

::view-transition-new(vt-media) {
  animation: vt-in 0.35s ease-out both;
}

/* No hero to land in: the grown picture fades with the old page. */
::view-transition-old(vt-media):only-child {
  animation: vt-out 0.4s ease-out both;
}

::view-transition-new(vt-hero-text) {
  animation: vt-rise 0.7s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vt-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
  }
}

@keyframes vt-rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

/* A hero picture fades in once it has loaded instead of popping in
   (`page-transitions.js` shows it, and after 3 s shows them all, whatever
   happened). */
[data-vt-hero] img {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

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

  [data-vt-hero] img {
    transition: none;
  }
}