.switcher-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.switcher.next-slide {
    display: none;
}


/* --- CurtainRectangle --- */
.curtain-rectangle {
    position: fixed;
    top: 0;        
    right: 0;
    height: 100vh;  
    width: 100vw;  
    background: var(--background);
}

.before-switch .curtain-rectangle {
    animation: curtain-rectangle-down;
    animation-duration: var(--duration);
}

.after-switch .curtain-rectangle {
    animation: curtain-rectangle-up;
    animation-duration: var(--duration);
    top: var(--top-after);        
    right: var(--right-after);
}

@keyframes curtain-rectangle-down {
    from {
        top: var(--top-before);
        right: var(--right-before);
    }

    to {
        top: 0; 
        right: 0;
    }
    
}

@keyframes curtain-rectangle-up {
    from {
        top: 0;
        right: 0;
    }

    to {        
        top: var(--top-after);
        right: var(--right-after);
    }
}
    



/* --- SwitcherZoom --- */
.SwitcherZoom.switcher {
    transition: all var(--duration) ease-in;
    position: absolute;
}

.SwitcherZoom.current-slide {
    transform: scale(1);
    opacity: 0;
    /* display: none; */
}

.before-switch.after-load .SwitcherZoom.current-slide {
    transform: scale(100);
}

.SwitcherZoom.next-slide {
    transform: scale(0);
    display: block;
    top: var(--top-before);
    left: var(--left-before);
}

.before-switch.after-load .SwitcherZoom.next-slide {
    display : block;
    transform: scale(1);
    top: var(--top-after);
    left: var(--left-after);
}


/* --- SwitcherAnimateCss --- */
.switcher-animate-css-wrapper {
    position: relative;
}

.switcher-animate-css-wrapper .current-slide,
.switcher-animate-css-wrapper .next-slide {
    position: absolute;
    top: 0;
    left: 0;
}