:root {
  --t-duration-in: 320ms;
  --t-duration-out: 240ms;
  --t-ease-in: ease-in-out;
  --t-ease-out: ease-in-out;
  --t-distance: 8px;
  --t-overlay-opacity: 0.12;
  --t-overlay-color: #020617;
}

.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: var(--t-overlay-color);
  transition: opacity var(--t-duration-in) var(--t-ease-in);
  will-change: opacity;
}

#page,
.page {
  min-height: 100vh;
  transition: opacity var(--t-duration-in) var(--t-ease-in),
              transform var(--t-duration-in) var(--t-ease-in);
  will-change: opacity, transform;
  transform: translate3d(0, 0, 0);
}

html.js.t-pre .transition-overlay {
  transition: none;
  opacity: var(--t-overlay-opacity);
}

html.js.t-pre #page,
html.js.t-pre .page {
  transition: none;
  opacity: 0;
  transform: translate3d(0, var(--t-distance), 0);
}

html.js body.is-entering .transition-overlay {
  transition: none;
  opacity: var(--t-overlay-opacity);
}

html.js body.is-entering.is-entered .transition-overlay {
  transition: opacity var(--t-duration-in) var(--t-ease-in);
  opacity: 0;
}

html.js body.is-leaving .transition-overlay {
  transition: opacity var(--t-duration-out) var(--t-ease-out);
  opacity: var(--t-overlay-opacity);
}

html.js body.is-entering #page,
html.js body.is-entering .page {
  opacity: 0;
  transform: translate3d(0, var(--t-distance), 0);
}

html.js body.is-pre-enter #page,
html.js body.is-pre-enter .page {
  transition: none;
  opacity: 0;
  transform: translate3d(0, var(--t-distance), 0);
}

html.js body.is-entering.is-entered #page,
html.js body.is-entering.is-entered .page {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.js body.is-leaving #page,
html.js body.is-leaving .page {
  transition-duration: var(--t-duration-out);
  transition-timing-function: var(--t-ease-out);
  opacity: 0;
  transform: translate3d(0, calc(var(--t-distance) * -0.4), 0);
}

html[data-motion="reduce"] {
  --t-duration-in: 1ms;
  --t-duration-out: 1ms;
  --t-distance: 0px;
  --t-overlay-opacity: 0;
}

html[data-motion="reduce"] * {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}

html[data-motion="reduce"] #page,
html[data-motion="reduce"] .page {
  transition: none;
  opacity: 1;
  transform: none;
}

html[data-motion="reduce"] .transition-overlay {
  transition: none;
  opacity: 0;
}

html[data-motion="reduce"] body.is-entering .transition-overlay,
html[data-motion="reduce"] body.is-entering.is-entered .transition-overlay,
html[data-motion="reduce"] body.is-leaving .transition-overlay {
  opacity: 0;
}