/* === Pages === */
.pages {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

.page {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #efeff4;
    .translate3d(0,0,0);
    &.cached {
        display: none;
    }
}

.page-content {
    .scrollable();
    box-sizing: border-box;
    height: 100%;
    position: relative;
    z-index: 1;
}

// Animations
// -----------------------------------------------------------------------------

// Show From Right
@keyframes page-sfr-enter {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes page-sfr-enter {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@keyframes page-sfr-leave {
  to {
    opacity: .9;
    transform: translate3d(-20%, 0, 0);
  }
}

@-webkit-keyframes page-sfr-leave {
  to {
    opacity: .9;
    -webkit-transform: translate3d(-20%, 0, 0);
  }
}

// Slide from bottom
@keyframes page-sfb-enter {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes page-sfb-enter {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@keyframes page-sfb-leave {
  to {
    opacity: .9;
  }
}

@-webkit-keyframes page-sfb-leave {
  to {
    opacity: .9;
  }
}


// REVEAL
// -----------------------------------------------------------------------------

// Reveal From Right
@keyframes page-rfr-enter {
  from {
    opacity: .9;
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes page-rfr-enter {
  from {
    opacity: .9;
    -webkit-transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@keyframes page-rfr-leave {
  to {
    opacity: 0.9;
    transform: translate3d(100%, 0, 0);
  }
}

@-webkit-keyframes page-rfr-leave {
  to {
    opacity: 0.9;
    -webkit-transform: translate3d(100%, 0, 0);
  }
}

// Reveal From Bottom
@keyframes page-rfb-enter {
  from {
    opacity: .9;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes page-rfb-enter {
  from {
    opacity: .9;
  }
  to {
    opacity: 1;
  }
}

@keyframes page-rfb-leave {
  to {
    transform: translate3d(0, 100%, 0);
  }
}

@-webkit-keyframes page-rfb-leave {
  to {
    -webkit-transform: translate3d(0, 100%, 0);
  }
}


// Transition: Show
// sfr: show-from-right
// sfb: slide-from-bottom
// -----------------------------------------------------------------------------
.page-transition-sfr-enter-active,
.page-transition-sfb-enter-active{
  pointer-events: none;
  z-index: 20;
}

.page-transition-sfr-leave,
.page-transition-sfb-leave{
  pointer-events: none;
  z-index: 10;
}

// animation common
.page-transition-sfr-enter-active,
.page-transition-sfb-enter-active,
.page-transition-sfr-leave,
.page-transition-sfb-leave {
  .animation-duration(.4s);
  .animation-fill-mode(forwards);
}

.page-transition-sfr-enter-active{
  .animation-name(page-sfr-enter);
}

.page-transition-sfb-enter-active{
  .animation-name(page-sfb-enter);
}

.page-transition-sfr-leave {
  .animation-name(page-sfr-leave);
}

.page-transition-sfb-leave {
  .animation-name(page-sfb-leave);
}

// Transition: Reveal
// rfr: reveal from right
// rfl: reveal from left
// -----------------------------------------------------------------------------

.page-transition-rfr-enter-active,
.page-transition-rfb-enter-active {
  pointer-events: none;
  z-index: 10;
}

.page-transition-rfr-leave,
.page-transition-rfb-leave {
  pointer-events: none;
  z-index: 20;
}

// animation common
.page-transition-rfr-enter-active,
.page-transition-rfb-enter-active,
.page-transition-rfr-leave,
.page-transition-rfb-leave {
  .animation-duration(.4s);
  .animation-fill-mode(forwards);
}

.page-transition-rfr-enter-active {
  .animation-name(page-rfr-enter);
}

.page-transition-rfb-enter-active {
  .animation-name(page-rfb-enter);
}

.page-transition-rfr-leave {
  .animation-name(page-rfr-leave);
}

.page-transition-rfb-leave {
  .animation-name(page-rfb-leave);
}
