/* Real cover artwork on a lightweight, CSS-only book volume. */
.book-object {
  --depth: 26px;
  --half-depth: 13px;
  --book-turn: -25deg;
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 531 / 827;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(6deg) rotateY(var(--book-turn)) rotateZ(-2deg);
  transition: transform .65s cubic-bezier(.2,.65,.25,1);
}
.book-front, .book-back {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 2px 4px 4px 2px;
  backface-visibility: hidden;
}
.book-front { transform: translateZ(var(--half-depth)); background: #172333; }
.book-front::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg,#0006,transparent 2%,#ffffff26 3%,#0003 4%,transparent 7%,transparent 94%,#ffffff18);
  box-shadow: inset 0 0 0 1px #ffffff15;
}
.book-front img {
  width: 100%; height: 100%; max-width: none;
  object-fit: fill; border-radius: inherit; box-shadow: none;
}
.book-back {
  background: #172333;
  transform: translateZ(calc(-1 * var(--half-depth))) rotateY(180deg);
  box-shadow: -12px 20px 24px #10203035;
  backface-visibility: visible;
}
.book-pages {
  position: absolute; top: 1%; bottom: 1%; left: 100%;
  width: calc(var(--depth) - 2px);
  transform-origin: left center;
  transform: translateZ(calc(var(--half-depth) - 1px)) rotateY(90deg);
  background: repeating-linear-gradient(90deg,#eeeae1 0px,#eeeae1 1px,#c9c5bc 1px,#f8f5ed 2px);
  box-shadow: inset 0 0 5px #392e2826;
}
.book-top {
  position: absolute; top: 0; left: 2%; right: 1%; height: var(--depth);
  transform-origin: center top;
  transform: translateZ(calc(-1 * var(--half-depth))) rotateX(90deg);
  background: repeating-linear-gradient(0deg,#eeeae1 0px,#eeeae1 1px,#d6d2c9 1px,#f8f5ed 2px);
}
.book-spine {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--depth);
  transform-origin: left center;
  transform: translateZ(calc(-1 * var(--half-depth))) rotateY(-90deg);
  background: linear-gradient(90deg,#0a121e,#2b394a 45%,#111b28);
  color: #eeeae1; display: flex; align-items: center; justify-content: space-between;
  flex-direction: column; padding: 12px 3px;
  backface-visibility: hidden;
}
.book-spine span, .book-spine small { writing-mode: vertical-rl; font: 12px/1.1 Georgia,serif; }
.book-spine small { font: 8px/1.1 sans-serif; letter-spacing: 1px; }
.book-cover { overflow: visible; padding: 30px 19%; }
.book-cover img, .book-cover:hover img { transform: none; box-shadow: none; width: 100%; height: 100%; }
.hero-book { box-shadow: none; }
.hero-book .book-object { --depth: 30px; --half-depth: 15px; }
.hero-book-left .book-object { --book-turn: 20deg; }
.hero-book-right .book-object { --book-turn: -28deg; }
.hero-book-center .book-object { --book-turn: -18deg; }
.hero-book img { aspect-ratio: auto; height: 100%; }
.detail-art { padding: 48px 15%; }
.detail-art .book-object { --depth: 38px; --half-depth: 19px; max-width: 310px; }
.detail-art img { width: 100%; height: 100%; box-shadow: none; }
.book-cover:focus-visible .book-object, .hero-book:focus-visible .book-object {
  transform: perspective(1000px) translateY(-8px) rotateX(3deg) rotateY(18deg);
}
@media (hover:hover) and (pointer:fine) {
  .book-cover:hover .book-object, .hero-book:hover .book-object, .detail-art:hover .book-object {
    transform: perspective(1000px) translateY(-8px) rotateX(3deg) rotateY(18deg);
  }
}
@media(max-width:760px) {
  .book-object { --depth: 18px; --half-depth: 9px; --book-turn: -22deg; }
  .book-cover { padding: 25px 17%; }
  .hero-book .book-object { --depth: 22px; --half-depth: 11px; }
  .detail-art { padding: 32px; }
  .detail-art .book-object { width: auto; height: 100%; --depth: 30px; --half-depth: 15px; }
}
@media(prefers-reduced-motion:reduce) {
  .book-object { transition: none; }
  .book-cover:hover .book-object, .hero-book:hover .book-object, .detail-art:hover .book-object,
  .book-cover:focus-visible .book-object, .hero-book:focus-visible .book-object {
    transform: perspective(1000px) rotateX(6deg) rotateY(var(--book-turn)) rotateZ(-2deg);
  }
  .hero-book:hover { translate: none; }
}