/* Animations for Page Transitions */

.post-container {
    transition: transform 0.4s cubic-bezier(0.2, 0.0, 0.0, 1.0);
    /* Ease-out quart-like */
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

/* 
  We will use classes to position the Incoming post before animation.
  Up Swipe (Next Post): Incoming is at Bottom (100%), Moves to 0. Current Moves to Top (-100%).
  Down Swipe (Prev Post): Incoming is at Top (-100%), Moves to 0. Current Moves to Bottom (100%).
*/

.post-stage-bottom {
    transform: translateY(100%);
    z-index: 20;
}

.post-stage-top {
    transform: translateY(-100%);
    z-index: 20;
}

.post-center {
    transform: translateY(0);
    z-index: 10;
}

.post-exit-top {
    transform: translateY(-100%);
    z-index: 10;
}

.post-exit-bottom {
    transform: translateY(100%);
    z-index: 10;
}