/* The 3D book: a cover as a solid block with spine, page edges and back board.
   Shared by the site and the CMS's Book Cover Studio, so the studio shows exactly what the site shows. */

.book3d { perspective: 1600px; --rx: -5deg; --ry: 26deg; --t: 18cqw; container-type: inline-size; }
.book3d-inner {
  position: relative; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--ease);
}
.book3d-inner img {
  display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 1px 4px 4px 1px; position: relative; transform: translateZ(0);
}
.book3d-inner > span { position: absolute; pointer-events: none; }
/* the spine, carrying the edge of the cover art round the corner */
.book3d-spine {
  top: 0; bottom: 0; left: 0; width: var(--t);
  transform-origin: left center; transform: rotateY(90deg);
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.2) 18%, rgba(255,255,255,.1) 45%, rgba(0,0,0,.25) 80%, rgba(0,0,0,.6)),
    var(--cover) left center / 2500% 100% no-repeat, #222;  /* the cover's own edge, stretched round the spine */
}
/* the fore-edge and the tops and tails of the pages */
.book3d-pages, .book3d-top, .book3d-bottom {
  background-color: #e9e1cf;
  background-image:
    linear-gradient(var(--shade, 90deg), rgba(0,0,0,.28), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.18)),
    repeating-linear-gradient(var(--grain, 90deg), rgba(120,100,70,.18) 0 1px, transparent 1px 3px);
}
.book3d-pages { top: 1%; bottom: 1%; right: 3px; width: calc(var(--t) - 4px); transform-origin: right center; transform: rotateY(-90deg); }
.book3d-top { top: 3px; left: 3px; right: 3px; height: calc(var(--t) - 4px); transform-origin: center top; transform: rotateX(-90deg); --shade: 180deg; --grain: 180deg; }
.book3d-bottom { bottom: 3px; left: 3px; right: 3px; height: calc(var(--t) - 4px); transform-origin: center bottom; transform: rotateX(90deg); --shade: 0deg; --grain: 180deg; }
/* the back board, so the block never reads as hollow */
.book3d-back { inset: 0; border-radius: 4px 1px 1px 4px; background: #15110e; transform: translateZ(calc(var(--t) * -1)); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); }
.book3d-shine {
  inset: 0; border-radius: 1px 4px 4px 1px; transform: translateZ(1px);
  /* a plain translucent highlight: blend modes would flatten the whole 3D book in Chrome */
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.12) 45%, rgba(255,255,255,0) 60%);
  background-size: 250% 100%; background-position: var(--shine, 100%) 0;
  transition: background-position .6s var(--ease);
}
/* the hinge crease just inside the spine */
.book3d-inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 1px 4px 4px 1px; transform: translateZ(1px);
  background: linear-gradient(90deg, rgba(0,0,0,.4) 0, rgba(255,255,255,.14) 1.4%, rgba(0,0,0,.2) 3%, rgba(0,0,0,0) 6%);
}
a:hover .book3d, .book3d:hover { --ry: 14deg; --shine: 0%; }
.book3d-hero { --ry: 32deg; --t: 24cqw; position: relative; }
/* the hero glow is a soft light behind the book, not a filter (filters can flatten the 3D) */
.book3d-hero::before {
  content: ""; position: absolute; inset: -12% -18%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 38%, transparent), transparent);
}