.angie-pt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999999;
    transition-property: opacity, transform, clip-path;
}

/* Base states: default is "entering" (active on page load), "is-loaded" is hidden, "is-exiting" is returning to active */

/* Fade */
.angie-pt-fade {
    opacity: 1;
}
.angie-pt-fade.is-loaded {
    opacity: 0;
}
.angie-pt-fade.is-exiting {
    opacity: 1;
}

/* Slide Up/Down */
.angie-pt-slide {
    transform: translateY(0);
}
.angie-pt-slide.is-loaded {
    transform: translateY(-100%);
}
.angie-pt-slide.is-exiting {
    transform: translateY(100%);
    opacity: 0; /* Reset for quick snap */
    transition: none;
}
.angie-pt-slide.is-exiting.animate-out {
    opacity: 1;
    transform: translateY(0);
    transition-property: transform;
}

/* Zoom */
.angie-pt-zoom {
    opacity: 1;
    transform: scale(1);
}
.angie-pt-zoom.is-loaded {
    opacity: 0;
    transform: scale(1.1);
}
.angie-pt-zoom.is-exiting {
    opacity: 1;
    transform: scale(1);
}

/* Curtain */
.angie-pt-curtain {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.angie-pt-curtain.is-loaded {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
.angie-pt-curtain.is-exiting {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}