/* Turning between the index and Process faces, like the sides of a cube in space.
   During a turn, cube.js pins both faces to the screen, so each is exactly one
   screen tall, and rotates them around the cube's center. Nothing reloads. */
html.cube-turning {
  overflow: hidden;
  background: #05060b url("images/stars.jpg") center / cover no-repeat;
}
html.cube-turning body {
  min-height: var(--cube-doc, 100vh);
  transition: none;
  background: #05060b url("images/stars.jpg") center / cover no-repeat;
  perspective: calc(var(--cube-w) * 1.6);
  perspective-origin: 50% calc(var(--cube-y, 0px) + 50vh);
  perspective-origin: 50% calc(var(--cube-y, 0px) + 50dvh); /* Phones: the visible height, not counting the URL bar */
}

/* The body's perspective makes it the faces' frame, so they sit at the scroll position */
.cube-face {
  position: fixed;
  top: var(--cube-y, 0px);
  left: 0;
  width: var(--cube-w);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
  backface-visibility: hidden;
  /* The cube's center sits half a screen width behind the screen */
  transform-origin: 50% 50% calc(var(--cube-w) / -2);
  will-change: transform; /* Keep each face on its own GPU layer for the turn */
}
/* Keeps the leaving face showing exactly what was on screen */
.cube-face > .page { margin-top: calc(var(--off, 0px) * -1); }

/* The arriving face starts as the right side of the cube (left side going back) */
.cube-side-next { transform: rotateY(90deg); }
.cube-side-prev { transform: rotateY(-90deg); }

html.cube-turn-next .cube-front { animation: cube-front-next 0.9s cubic-bezier(0.45, 0.05, 0.35, 1) forwards; }
html.cube-turn-next .cube-side { animation: cube-side-next 0.9s cubic-bezier(0.45, 0.05, 0.35, 1) forwards; }
html.cube-turn-prev .cube-front { animation: cube-front-prev 0.9s cubic-bezier(0.45, 0.05, 0.35, 1) forwards; }
html.cube-turn-prev .cube-side { animation: cube-side-prev 0.9s cubic-bezier(0.45, 0.05, 0.35, 1) forwards; }

/* Pulls back into space mid-turn, then settles on the new face */
@keyframes cube-front-next {
  50% { transform: translateZ(calc(var(--cube-w) * -0.3)) rotateY(-45deg); }
  100% { transform: rotateY(-90deg); }
}
@keyframes cube-side-next {
  0% { transform: rotateY(90deg); }
  50% { transform: translateZ(calc(var(--cube-w) * -0.3)) rotateY(45deg); }
  100% { transform: none; }
}
@keyframes cube-front-prev {
  50% { transform: translateZ(calc(var(--cube-w) * -0.3)) rotateY(45deg); }
  100% { transform: rotateY(90deg); }
}
@keyframes cube-side-prev {
  0% { transform: rotateY(-90deg); }
  50% { transform: translateZ(calc(var(--cube-w) * -0.3)) rotateY(-45deg); }
  100% { transform: none; }
}

/* Phones: a quicker, shallower turn that's easier on mobile GPUs */
@media (max-width: 760px) {
  html.cube-turning body { perspective: calc(var(--cube-w) * 2.4); }
  html[class*="cube-turn-"] .cube-front,
  html[class*="cube-turn-"] .cube-side { animation-duration: 0.7s; }
}