/* Shared 3D book — used by index.html and mockup.html
   Size a book by setting --w on .book-wrap. */
.book-wrap {
  --w: 280px;
  --d: calc(var(--w) * 0.1);
  --ry: 26deg;
  --rx: 3deg;
  position: relative;
  width: var(--w);
  aspect-ratio: 2 / 3;
  perspective: calc(var(--w) * 5.5);
  flex: none;
}
.book-wrap.flip { --ry: -26deg; }

.book {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.book > * { position: absolute; top: 0; height: 100%; backface-visibility: hidden; }

.book .front {
  left: 0; width: 100%;
  background-size: cover; background-position: center;
  transform: translateZ(calc(var(--d) / 2));
  border-radius: 1px 3px 3px 1px;
  overflow: hidden;
}
/* hinge crease + soft light across the cover */
.book .front::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(255,255,255,.14) 1.6%, rgba(0,0,0,.16) 3.2%, rgba(0,0,0,0) 6%),
    linear-gradient(105deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,.12) 100%);
}
.book .back {
  left: 0; width: 100%;
  background: #072c17;
  transform: translateZ(calc(var(--d) / -2)) rotateY(180deg);
}
.book .spine {
  left: 0; width: var(--d);
  transform: translateX(calc(var(--d) / -2)) rotateY(-90deg);
  background: linear-gradient(90deg, #06301a, #0d4a28 45%, #093a1f);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.book .spine span {
  writing-mode: vertical-rl;
  font: 800 calc(var(--d) * .36)/1 "Montserrat", "Segoe UI", Arial, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: #d8f313;
}
.book .pages {
  right: 0; width: var(--d);
  transform: translateX(calc(var(--d) / 2)) rotateY(90deg);
  background: repeating-linear-gradient(90deg, #f4efe2 0 1px, #d9d2c0 1px 2px);
  box-shadow: inset 0 0 calc(var(--d) * .3) rgba(0,0,0,.25);
}
/* floor shadow */
.book-wrap::after {
  content: ""; position: absolute;
  left: 2%; right: -14%; bottom: -5%; height: 9%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0));
  filter: blur(calc(var(--w) * .03));
  z-index: -1;
}
.book-wrap.flip::after { left: -14%; right: 2%; }