/* The early opt-in lives in head.ejs so it is available before first paint.
   Browsers without cross-document transitions retain the existing entrances. */
/* The header is captured separately. Its hole in the moving root snapshot
   exposes the BODY background, not just the transition pseudo-element. */
html, body { background: var(--night, #191919); }
/* Give the content its own surface; the canvas behind the header stays dark. */
body > main { background-color: var(--paper); }

@media (prefers-reduced-motion: no-preference) {
  .site-header { view-transition-name: site-header; }

  /* Keep the navigation anchored while the page beneath it changes. */
  ::view-transition-group(site-header) {
    z-index: 1;
    animation-duration: 180ms;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  ::view-transition-old(site-header),
  ::view-transition-new(site-header) { animation-duration: 180ms; }

  ::view-transition {
    pointer-events: none;
    background: var(--night);
  }
  ::view-transition-group(root) { animation: none; }
  ::view-transition-image-pair(root) {
    isolation: isolate;
    background: var(--night);
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
  ::view-transition-old(root) {
    animation: page-depart 240ms cubic-bezier(.4, 0, 1, 1) both;
  }
  ::view-transition-new(root) {
    animation: page-arrive 520ms cubic-bezier(.22, 1, .36, 1) both;
  }

  @keyframes page-depart {
    to { opacity: 0; transform: translate3d(0, -18px, 0); }
  }
  @keyframes page-arrive {
    from { opacity: 0; transform: translate3d(0, 42px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  @media (max-width: 759px) {
    ::view-transition-new(root) { animation-duration: 440ms; }
    @keyframes page-arrive {
      from { opacity: 0; transform: translate3d(0, 24px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}