/* The page turns over from its left edge, showing the next one underneath */

.page.flipping {
  z-index: 3;
  animation: flip-page 1s cubic-bezier(0.55, 0.06, 0.3, 1) forwards;
}

/* darkens as it turns */
.page.flipping::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
  animation: shade-in 0.5s forwards;
}

/* the next page starts in shadow */
.page.under::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 70%);
  animation: shade-out 1s forwards;
}

@keyframes flip-page {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-180deg); }
}

@keyframes shade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}