#page-transition-overlay-0234eafd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  pointer-events: none;
  background-color: #111;
  opacity: 0;
  transition: opacity var(--pt-duration, 500ms) var(--pt-easing, ease-in-out),
              transform var(--pt-duration, 500ms) var(--pt-easing, ease-in-out);
}

/* Base states for types */
#page-transition-overlay-0234eafd.pt-overlay-fade {
  opacity: 1;
}

#page-transition-overlay-0234eafd.pt-overlay-slide-left {
  opacity: 1;
  transform: translateX(0);
}

#page-transition-overlay-0234eafd.pt-overlay-slide-right {
  opacity: 1;
  transform: translateX(0);
}

#page-transition-overlay-0234eafd.pt-overlay-zoom-in {
  opacity: 1;
  transform: scale(1);
}

#page-transition-overlay-0234eafd.pt-overlay-curtain {
  opacity: 1;
  transform: translateY(0);
}

/* Entrance Animations (when page finishes loading) */
body.pt-loaded #page-transition-overlay-0234eafd.pt-overlay-fade {
  opacity: 0;
}

body.pt-loaded #page-transition-overlay-0234eafd.pt-overlay-slide-left {
  transform: translateX(-100%);
}

body.pt-loaded #page-transition-overlay-0234eafd.pt-overlay-slide-right {
  transform: translateX(100%);
}

body.pt-loaded #page-transition-overlay-0234eafd.pt-overlay-zoom-in {
  opacity: 0;
  transform: scale(1.1);
}

body.pt-loaded #page-transition-overlay-0234eafd.pt-overlay-curtain {
  transform: translateY(-100%);
}

/* Exit Animations (when clicking a link to navigate away) */
body.pt-navigating #page-transition-overlay-0234eafd.pt-overlay-fade {
  opacity: 1;
}

body.pt-navigating #page-transition-overlay-0234eafd.pt-overlay-slide-left {
  transform: translateX(0);
}

body.pt-navigating #page-transition-overlay-0234eafd.pt-overlay-slide-right {
  transform: translateX(0);
}

body.pt-navigating #page-transition-overlay-0234eafd.pt-overlay-zoom-in {
  opacity: 1;
  transform: scale(1);
}

body.pt-navigating #page-transition-overlay-0234eafd.pt-overlay-curtain {
  transform: translateY(0);
}