/* Base state */
#site {
  filter: blur(16px);
  opacity: 0;
  transition:
    filter 700ms ease,
    opacity 700ms ease;
  will-change: filter, opacity;
}

/* Page has loaded */
body.is-loaded #site {
  filter: blur(0);
  opacity: 1;
}

/* Leaving the page */
body.is-transitioning #site {
  filter: blur(16px);
  opacity: 0;
}
@media (max-width: 576px) {
  body.is-transitioning #site {
    filter: blur(6px);
    transform: translateY(4px);
  }
}