/* Page transition */
.page-transition-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
  --transition-duration: 650ms;
}

.page-transition-container > * {
  width: 100%;
}

.svg-container-up,
.svg-container-down {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  transition: transform var(--transition-duration) ease;
}

.svg-container-up {
  top: 0;
}

.svg-container-down {
  bottom: 0;
}

.svg-container-up svg,
.svg-container-down svg {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  max-width: none;
  max-height: none;
  position: absolute;
  left: 0;
  top: 0;
}

.page-transition-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.svg-container-up .page-transition-image {
  object-position: center bottom;
}

.svg-container-down .page-transition-image {
  object-position: center top;
}

.page-transition-container.is-open .svg-container-up {
  transform: translateY(-100%);
}

.page-transition-container.is-open .svg-container-down {
  transform: translateY(100%);
}