/* The card folded (fold.js), standing at an angle and turned from side
   to side: the card page's preview, and the landing page's sample card.
   Its .sheet is the page's own, sized and positioned there; each face is
   a canvas the card page draws, or the sample's picture of a side. */

/* Folded: the sheet becomes two leaves hinged at the fold. The back leaf
   folds away behind the front, and the card turns to stand at an angle. */

.sheet.folding { background-color: transparent; box-shadow: none; }
.sheet.folding > :not(.fold3d) { visibility: hidden; }
.fold3d { display: none; position: absolute; inset: 0; perspective: 1800px; perspective: 240cqw; cursor: pointer; }
.sheet.folding .fold3d { display: block; }
.card3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 1.1s var(--ease-out) 0.15s, transform-origin 1.1s var(--ease-out) 0.15s;
}
.leaf {
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1.05s var(--ease-out);
}
.face {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* A hairline round each face, so a white card shows its edges on a
     white page. */
  outline: 1px solid rgb(var(--shade) / 0.22);
  outline-offset: -1px;
}
.face.outer { transition: filter 1.05s var(--ease-out); }
.face.inner { transform: rotateY(180deg); background: var(--leaf-in, #fff); }
/* The inside's picture and words, under the shade of the fold. */
.face.inner > :is(canvas, img) { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }
.sheet[data-shape="portrait"] .leaf { top: 0; width: 50%; height: 100%; }
.sheet[data-shape="portrait"] .leaf.back { left: 0; transform-origin: 100% 50%; }
.sheet[data-shape="portrait"] .leaf.front { left: 50%; }
.sheet[data-shape="portrait"] .leaf.back .inner { background: linear-gradient(to left, var(--leaf-in, #fff) 55%, var(--leaf-in-shade, #eee8e0)); }
.sheet[data-shape="portrait"] .leaf.front .inner { background: linear-gradient(to right, var(--leaf-in, #fff) 70%, var(--leaf-in-shade, #eee8e0)); }
/* A tall card turns one way round only, a whole turn (--lap, fold.js)
   further each time it comes back to the front, so looking inside it
   swings its front open to the left, as a card opens. Flat, it is the
   same list of turns at nought, so each step between them is a turn the
   short way. */
.sheet[data-shape="portrait"] .card3d { transform-origin: 75% 50% -14cqw; transform: translateX(0) scale(1) rotateX(0deg) rotateY(var(--lap, 0deg)); }
.sheet[data-shape="landscape"] .leaf { left: 0; width: 100%; height: 50%; }
.sheet[data-shape="landscape"] .leaf.back { top: 0; transform-origin: 50% 100%; }
.sheet[data-shape="landscape"] .leaf.front { top: 50%; }
.sheet[data-shape="landscape"] .leaf.back .inner { background: linear-gradient(to top, var(--leaf-in, #fff) 55%, var(--leaf-in-shade, #eee8e0)); }
.sheet[data-shape="landscape"] .leaf.front .inner { background: linear-gradient(to top, var(--leaf-in, #fff) 70%, var(--leaf-in-shade, #eee8e0)); }
.sheet[data-shape="landscape"] .card3d { transform-origin: 50% 50%; }

/* Folded, the card shows its front, then each side of its inside, then
   its back. The inside is seen from behind the sheet: the back leaf
   folds part way in towards the front, so the card stands open, and the
   card turns half round, so the inside left faces the viewer, with the
   inside right at an angle beside it; then a little back again, so the
   inside right does, with the inside left at an angle. Each is moved
   across to the middle of what shows. */
.sheet[data-shape="portrait"].folded .leaf.back { transform: rotateY(-126deg); }
.sheet[data-shape="portrait"].folded .card3d { transform: translateX(-25%) scale(0.9) rotateX(-4deg) rotateY(calc(var(--lap, 0deg) - 34deg)); }
.sheet[data-shape="portrait"].folded.back .card3d { transform: translateX(-25%) scale(0.9) rotateX(-4deg) rotateY(calc(var(--lap, 0deg) - 268deg)); }
.sheet[data-shape="portrait"].folded:is(.insideFront, .insideBack) .leaf.back { transform: rotateY(-70deg); }
.sheet[data-shape="portrait"].folded.insideFront .card3d { transform-origin: 50% 50% 0; transform: translateX(16%) scale(0.8) rotateX(-6deg) rotateY(calc(var(--lap, 0deg) - 180deg)); }
.sheet[data-shape="portrait"].folded.insideBack .card3d { transform-origin: 50% 50% 0; transform: translateX(-16%) scale(0.8) rotateX(-6deg) rotateY(calc(var(--lap, 0deg) - 110deg)); }
.sheet[data-shape="landscape"].folded .leaf.back { transform: rotateX(130deg); }
.sheet[data-shape="landscape"].folded .card3d { transform: translateY(-21%) scale(0.86) rotateX(6deg) rotateY(-22deg) rotateX(25deg); }
.sheet[data-shape="landscape"].folded.back .card3d { transform: translateY(-21%) scale(0.86) rotateX(6deg) rotateY(-158deg) rotateX(25deg); }
.sheet[data-shape="landscape"].folded:is(.insideFront, .insideBack) .leaf.back { transform: rotateX(70deg); }
.sheet[data-shape="landscape"].folded.insideFront .card3d { transform-origin: 50% 50% 0; transform: translateY(12%) scale(0.5) rotateX(0deg) rotateY(-6deg) rotateX(180deg); }
.sheet[data-shape="landscape"].folded.insideBack .card3d { transform-origin: 50% 50% 0; transform: translateY(-12%) scale(0.5) rotateX(0deg) rotateY(-6deg) rotateX(110deg); }
/* Turning from one view to the next is slower than folding. */
.sheet.turning .card3d { transition-duration: 1.6s; transition-delay: 0s; }
.sheet.turning .leaf, .sheet.turning .face.outer { transition-duration: 1.5s; }
.sheet.folded .leaf.back .outer { filter: brightness(0.94); }
.sheet.folded.back .leaf.back .outer { filter: none; }
.sheet.folded.back .leaf.front .outer { filter: brightness(0.94); }

.ground {
  position: absolute;
  background: radial-gradient(closest-side, rgb(var(--shade) / 0.6), rgb(var(--shade) / 0));
  filter: blur(6px);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.sheet.folded .ground { opacity: 1; transition-duration: 0.9s; transition-delay: 0.45s; }
.sheet[data-shape="portrait"] .ground { left: 22%; width: 56%; top: 90%; height: 8%; }
.sheet[data-shape="landscape"] .ground { left: 12%; width: 76%; top: 65%; height: 7%; }

@media (prefers-reduced-motion: reduce) {
  .card3d, .leaf, .face, .ground { transition: none !important; }
}