/* A square hardcover, built as separate surfaces around the original cover. */
.book-scene{perspective:1600px}
.book.hardcover{
  --depth:42px;
  width:83%;
  background:transparent;
  border-radius:0;
  transform:translateY(var(--book-y,0px)) rotateX(8deg) rotateY(25deg) rotateZ(5deg);
  transform-style:preserve-3d;
  box-shadow:none;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.book.hardcover:after{display:none}
.hardcover .book-front{
  position:relative;display:block;width:100%;aspect-ratio:1;
  transform:translateZ(calc(var(--depth)/2));
  border-radius:3px 7px 7px 3px;
  background:#0b395c;
  box-shadow:0 1px 1px #c5e7ff70;
  overflow:hidden;
  backface-visibility:hidden;
}
.hardcover .book-front img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.hardcover .book-front:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(90deg,#00122380 0%,#00132355 1.6%,#d6f2ff35 2%,#00142a66 2.8%,#00142a15 4.1%,transparent 5.5%,transparent 94%,#c2e7ff18 98.5%,#00162c44),linear-gradient(130deg,#fff2,transparent 28%,transparent 70%,#0002);
  box-shadow:inset 0 1px 1px #e6f8ff55,inset 0 -2px 3px #0005,inset -2px 0 2px #c3efff33;
}
.hardcover .book-back{
  position:absolute;inset:-1px -1px -2px;
  transform:translateZ(calc(var(--depth)/-2));
  background:linear-gradient(120deg,#0c4263,#061b39);
  border:1px solid #285370;border-radius:4px 7px 7px 4px;
  box-shadow:-18px 28px 45px #0007,0 55px 80px #0005;
}
.hardcover .book-spine{
  position:absolute;left:calc(var(--depth)/-2);top:0;
  width:var(--depth);height:100%;
  transform:rotateY(-90deg);transform-origin:center;
  background:linear-gradient(90deg,#03172b,#0b3b58 18%,#145278 46%,#0c3d5b 78%,#061e34);
  border-radius:3px;box-shadow:inset 0 0 2px #bedff04d;
  display:flex;align-items:center;justify-content:space-around;flex-direction:column;
  padding:22px 0;color:#f7e5ad;
  backface-visibility:hidden;
}
.spine-title{writing-mode:vertical-rl;font:14px/1.15 var(--display);letter-spacing:1.5px;text-align:center}
.spine-author{writing-mode:vertical-rl;font:8px var(--font);letter-spacing:1px;color:#bed5e8}
.spine-star{font-size:19px;color:var(--gold)}
.book-pages{position:absolute;display:block;pointer-events:none;backface-visibility:hidden}
.pages-side{right:calc((var(--depth) - 7px)/-2 + 3px);top:5px;width:calc(var(--depth) - 7px);height:calc(100% - 10px);transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#e1d9c9 0px,#fff8eb 1px,#ebe3d4 2px,#e5ddce 3px);box-shadow:inset 0 0 6px #5b493940;border-radius:0 3px 3px 0}
.pages-top,.pages-bottom{left:4px;width:calc(100% - 8px);height:calc(var(--depth) - 7px);background:repeating-linear-gradient(0deg,#e0d8c9 0px,#f7f0e2 1px,#eae3d6 2px,#e4daca 3px);box-shadow:inset 0 0 7px #4a342b33}
.pages-top{top:calc((var(--depth) - 7px)/-2 + 5px);transform:rotateX(90deg)}
.pages-bottom{bottom:calc((var(--depth) - 7px)/-2 + 5px);transform:rotateX(-90deg);background-color:#d7cdbb}
.book.hardcover:hover{transform:translateY(calc(var(--book-y,0px) - 7px)) rotateX(5deg) rotateY(19deg) rotateZ(3deg);box-shadow:none}
.book-scene:after{content:'';position:absolute;width:78%;height:15%;left:13%;bottom:-5%;background:#0006;border-radius:50%;filter:blur(23px);transform:rotate(-9deg);pointer-events:none;z-index:-1}
.motion-off .book.hardcover{transform:rotateX(8deg) rotateY(25deg) rotateZ(5deg)}
.detail-book:has(.hardcover){transform:none!important}
.detail-book .book.hardcover{width:100%}
.detail-book .book-front img{box-shadow:none}
.detail-book .detail-seal{z-index:2;bottom:-20px;right:-10px}
@media(max-width:760px){
  .book.hardcover{--depth:27px;width:94%;transform:translateY(var(--book-y,0px)) rotateX(7deg) rotateY(23deg) rotateZ(5deg)}
  .hardcover .book-spine{padding:10px 0}
  .spine-title{font-size:8px;letter-spacing:.5px}.spine-author{font-size:5px}.spine-star{font-size:12px}
  .book-note{bottom:-40px}
  .motion-off .book.hardcover{transform:rotateX(7deg) rotateY(23deg) rotateZ(5deg)}
}