#page-transition-slide {
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--red);
    width: 100%;
    height: 100%;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s cubic-bezier(0.26, 0.88, 0.18, 1) opacity, 1s cubic-bezier(0.26, 0.88, 0.18, 1) transform, 0.5s cubic-bezier(0.26, 0.88, 0.18, 1) visibility;
}

#page-transition-slide.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

#page-transition-slide.frontheroine {
    transform: translateY(calc(-10 * var(--vh)));
    visibility: visible;
}

#page-transition-slide.page {
    transform: translateY(calc(-45 * var(--vh)));
    visibility: visible;
}