/* A quiet inter-page transition, independent of the page layouts. */
html::before,
html::after {
  position: fixed;
  inset: 0;
  content: '';
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 0s 300ms;
}

html::before {
  z-index: 2147483646;
  background: #f2f2f2;
}

html::after {
  z-index: 2147483647;
  background: url('../svg/logo.svg') center / clamp(100px, 12vw, 128px) auto no-repeat;
  filter: brightness(0);
  transform: scale(.97);
  transition: opacity 300ms ease, transform 300ms ease, visibility 0s 300ms;
}

html.site-transition-is-entering::before,
html.site-transition-is-leaving::before {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 250ms ease, visibility 0s;
}

html.site-transition-is-entering::after,
html.site-transition-is-leaving::after {
  opacity: .54;
  visibility: visible;
  transform: scale(1);
  transition: opacity 250ms ease, transform 300ms ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  html::after {
    display: none;
  }
}