.page-transition {
  position: fixed;
  inset: 0;
  background: #FF2B00;
  clip-path: inset(0 0 100% 0);
  z-index: 9000;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#pageTransition img {
  width: 100px;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}

#pageTransition.is-entering img {
  clip-path: inset(0 0 0 0);
}

.page-transition.is-transitioning ~ .site-header .site-logo,
body.is-transitioning .site-logo {
  opacity: 0;
  transition: opacity 0.2s ease;
}

#grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.06;
  z-index: 8000;
}