/*
  True CSS 3D hardcover book
  Rest: face-on (rotateY 0). Hover: open to show page edge (rotateY -45).
*/

.eh-book3d {
  --eh-b3d-w: 200px;
  --eh-b3d-h: 300px;
  --eh-b3d-depth: 17.5px;
  --eh-b3d-page-w: 35px;
  --eh-b3d-page-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
  text-decoration: none;
  color: inherit;
  outline: none;
  transform-style: preserve-3d;
}

@keyframes eh-book3d-init {
  0% {
    transform: rotateY(-45deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.eh-book3d-inner {
  width: var(--eh-b3d-w);
  height: var(--eh-b3d-h);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 3s ease;
  animation: eh-book3d-init 1s ease 0s 1;
}

.eh-book3d:hover .eh-book3d-inner,
.eh-book3d:focus .eh-book3d-inner,
.eh-book3d:focus-visible .eh-book3d-inner {
  transform: rotateY(-45deg);
}

/*
  Front cover plane (first child). Prefer .eh-book3d-face wrapper so the <img>
  is not itself preserve-3d-transformed — object-fit is unreliable on 3D faces.
*/
.eh-book3d-inner > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--eh-b3d-w);
  height: var(--eh-b3d-h);
  transform: translateZ(var(--eh-b3d-depth));
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 20px #666;
  display: block;
  box-sizing: border-box;
  background-color: #01060f;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.eh-book3d-face {
  padding: 0;
  margin: 0;
}

.eh-book3d-face img,
.eh-book3d-inner > img:first-child {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill;
  object-position: center center;
  border: 0;
  border-radius: 0;
}

.eh-book3d-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.85rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #f3e9d8;
  background: linear-gradient(160deg, #5a4634 0%, #2c2118 60%, #17120e 100%);
  box-sizing: border-box;
}

/* Page block (right edge thickness) — Castiel-style translate/rotate/translate */
.eh-book3d-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--eh-b3d-page-top);
  width: var(--eh-b3d-page-w);
  height: calc(var(--eh-b3d-h) - var(--eh-b3d-page-top) * 2);
  transform:
    translateX(calc(var(--eh-b3d-w) - var(--eh-b3d-page-w) / 2))
    rotateY(90deg)
    translateX(calc(var(--eh-b3d-page-w) / 2));
  background: linear-gradient(
    90deg,
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
  );
  transform-style: preserve-3d;
}

/* Back cover */
.eh-book3d-inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--eh-b3d-w);
  height: var(--eh-b3d-h);
  transform: translateZ(calc(var(--eh-b3d-depth) * -1));
  background-color: #01060f;
  border-radius: 0 2px 2px 0;
  box-shadow: -10px 0 50px 10px #666;
}

/* Brand strip on cover (optional overlay sibling after img) */
.eh-book3d-brand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 0.65rem 0.6rem;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 12, 18, 0.85) 40%, rgba(8, 12, 18, 0.95) 100%);
  color: #f4f7fb;
  pointer-events: none;
  transform: translateZ(calc(var(--eh-b3d-depth) + 0.5px));
  border-radius: 0 0 2px 0;
  box-sizing: border-box;
  width: var(--eh-b3d-w);
}

.eh-book3d-brand small {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 0.15rem;
}

.eh-book3d-brand strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Size: list shelf — matches reference 200×300 / depth 17.5 */
.eh-book3d.is-list {
  --eh-b3d-w: 200px;
  --eh-b3d-h: 300px;
  --eh-b3d-depth: 17.5px;
  --eh-b3d-page-w: 35px;
  padding: 0.75rem 2.5rem 1.25rem 0.5rem;
}

/* Size: home bookshelf */
.eh-book3d.is-mosaic {
  --eh-b3d-w: 112px;
  --eh-b3d-h: 168px;
  --eh-b3d-depth: 11px;
  --eh-b3d-page-w: 22px;
  padding: 0.2rem 0.85rem 0.15rem 0;
  transition: none;
}

.eh-book3d.is-mosaic .eh-book3d-inner {
  transition: transform 0.55s ease;
  animation: none;
}

.eh-book3d.is-mosaic:hover .eh-book3d-inner,
.eh-book3d.is-mosaic:focus .eh-book3d-inner,
.eh-book3d.is-mosaic:focus-visible .eh-book3d-inner {
  transform: rotateY(-28deg);
}

/*
  Detail hero — opposite of list:
  Rest open at −45° (page edge visible); hover closes toward −9°.
*/
@keyframes eh-book3d-init-hero {
  0% {
    transform: rotateY(-9deg);
  }
  100% {
    transform: rotateY(-45deg);
  }
}

.eh-book3d.is-hero {
  --eh-b3d-w: 200px;
  --eh-b3d-h: 300px;
  --eh-b3d-depth: 20px;
  --eh-b3d-page-w: 40px;
  --eh-b3d-page-top: 8px;
  perspective: 800px;
  padding: 0.75rem 2.75rem 1.25rem 0.5rem;
}

.eh-book3d.is-hero .eh-book3d-inner {
  transform: rotateY(-45deg);
  transition: transform 3s ease;
  animation: eh-book3d-init-hero 1s ease 0s 1;
}

.eh-book3d.is-hero:hover .eh-book3d-inner,
.eh-book3d.is-hero:focus .eh-book3d-inner,
.eh-book3d.is-hero:focus-visible .eh-book3d-inner {
  transform: rotateY(-9deg);
}

.eh-book3d.is-hero .eh-book3d-inner > :first-child,
.eh-book3d.is-hero .eh-book3d-inner::after {
  border-radius: 0 3px 3px 0;
}

/* Size: spine-shelf pulled-out book */
.eh-book3d.is-spine-pull {
  --eh-b3d-w: 140px;
  --eh-b3d-h: 210px;
  --eh-b3d-depth: 14px;
  --eh-b3d-page-w: 26px;
  padding: 0;
}

.eh-book3d.is-spine-pull .eh-book3d-inner {
  transition: transform 0.7s ease;
  animation: none;
}

@media (max-width: 640px) {
  .eh-book3d.is-list {
    --eh-b3d-w: 150px;
    --eh-b3d-h: 225px;
    --eh-b3d-depth: 14px;
    --eh-b3d-page-w: 28px;
    padding: 0.5rem 1.75rem 1rem 0.35rem;
  }
  .eh-book3d.is-mosaic {
    --eh-b3d-w: 96px;
    --eh-b3d-h: 144px;
    --eh-b3d-depth: 9px;
    --eh-b3d-page-w: 18px;
    padding: 0.15rem 0.7rem 0.1rem 0;
  }
  .eh-book3d.is-hero {
    --eh-b3d-w: 160px;
    --eh-b3d-h: 240px;
    --eh-b3d-depth: 16px;
    --eh-b3d-page-w: 32px;
    --eh-b3d-page-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eh-book3d-inner {
    transition: none;
    animation: none !important;
  }
}