/* Covers and spreads share one leaf size and a moving, continuous spine. */
.catalog-flip-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.catalog-flip-scene {
  position: absolute;
  left: 0;
  width: 0;
  perspective: 2400px;
  transform-style: preserve-3d;
  transform: translateX(var(--turn-start-x));
  transition: transform 600ms cubic-bezier(.36,.08,.22,1);
  will-change: transform;
}
.catalog-flip-layer.is-active .catalog-flip-scene { transform: translateX(var(--turn-end-x)); }
.catalog-flip-sheet,
.catalog-flip-under {
  position: absolute;
  margin: 0;
  padding: 0;
  background: #fff;
}
.catalog-flip-under { overflow: hidden; }
.catalog-flip-sheet {
  z-index: 2;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(.36,.08,.22,1);
  will-change: transform;
}
.catalog-flip-layer.is-backward .catalog-flip-sheet { transform-origin: right center; }
.catalog-flip-layer.is-forward.is-active .catalog-flip-sheet { transform: rotateY(-180deg); }
.catalog-flip-layer.is-backward.is-active .catalog-flip-sheet { transform: rotateY(180deg); }
.catalog-flip-layer.is-single .catalog-flip-sheet { transform-origin: left center; }
.catalog-flip-layer.is-single.is-forward.is-active .catalog-flip-sheet { transform: rotateY(-90deg); }
.catalog-flip-layer.is-single.is-backward .catalog-flip-sheet { transform: rotateY(-90deg); }
.catalog-flip-layer.is-single.is-backward.is-active .catalog-flip-sheet { transform: rotateY(0deg); }
.catalog-flip-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.catalog-flip-front { transform: translateZ(.1px); }
.catalog-flip-back { transform: rotateY(180deg) translateZ(.1px); }
.catalog-flip-face img,
.catalog-flip-under img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
}
.catalog-flip-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,#17262630,transparent 30%,#17262608);
  opacity: 0;
}
.catalog-flip-back::after { background: linear-gradient(270deg,#17262630,transparent 35%); }
.is-backward .catalog-flip-front::after { background: linear-gradient(270deg,#17262630,transparent 30%,#17262608); }
.is-backward .catalog-flip-back::after { background: linear-gradient(90deg,#17262630,transparent 35%); }
.catalog-flip-layer.is-active .catalog-flip-face::after { animation: catalog-paper-shade 600ms ease-in-out both; }
.is-page-turning .catalog-book { visibility: hidden; pointer-events: none; }
.catalog-message:not([hidden]) { z-index: 4; background: #faf9f4f5; border: 1px solid #d3d8d2; }
@keyframes catalog-paper-shade { 0%,100% { opacity: .08; } 45%,65% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .catalog-flip-layer { display: none; }
  .catalog-flip-sheet, .catalog-flip-scene { transition: none; }
  .catalog-flip-layer.is-active .catalog-flip-face::after { animation: none; }
}