/*
 * 3D book cover hover
 * -------------------
 * main.js eases these variables on the <figure class="cover"> every frame:
 *   --rx / --ry  tilt (deg)       --s        scale
 *   --mx / --my  mouse position, -1 (left/top) to 1 (right/bottom)
 * Only transform and opacity change while the mouse moves, so nothing is
 * repainted per frame. Without the JS (touch, reduced motion) covers just lift.
 */

.book-entry .cover {
  --rx: 0deg;
  --ry: 0deg;
  --s: 1;
  --mx: 0;
  --my: 0;
  position: relative;
  perspective: 900px;
}

/* Cover: tilt is driven by JS, so no CSS transition on transform here */
.book-entry .cover a,
.book-entry .cover a:hover {
  position: relative;
  z-index: 1;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transition: box-shadow 0.4s ease;
}

/* Page block along the right edge (static, fades in once) */
.book-entry .cover a:hover {
  box-shadow:
    1px 0 0 #f6f3ec,
    2px 1px 0 #d8d2c4,
    3px 1px 0 #f6f3ec,
    4px 2px 0 #d8d2c4,
    5px 2px 0 #f6f3ec,
    6px 3px 0 #cfc8b8;
}

/* Drop shadow: a blurred layer behind the cover, shifted away from the tilt */
.book-entry .cover:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8%;
  right: 6%;
  bottom: 0;
  left: 6%;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  filter: blur(16px);
  opacity: 0;
  transform: translate(calc(var(--mx) * -14px), calc(var(--my) * 6px + 16px));
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.book-entry .cover:hover:before {
  opacity: 1;
}

/* Glare: an oversized soft highlight that slides with the mouse */
.book-entry .cover .inner {
  position: relative;
}

.book-entry .cover .inner:after {
  content: "";
  position: absolute;
  z-index: 100;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 35%);
  opacity: 0;
  transform: translate(calc(var(--mx) * 25%), calc(var(--my) * 25%));
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.book-entry .cover a:hover .inner:after {
  opacity: 1;
}

/* Fallback without the JS tilt: a simple lift, like before */
html:not(.has-tilt) .book-entry .cover a {
  transition: transform 0.3s ease, box-shadow 0.4s ease;
}

html:not(.has-tilt) .book-entry .cover a:hover {
  --s: 1.04;
}

/* Book entry page: the large cover gets the same page block, a bit thicker */
.books .single-book .cover {
  border-radius: 5px 3px 3px 5px;
  box-shadow:
    1px 0 0 #f6f3ec,
    2px 1px 0 #d8d2c4,
    3px 1px 0 #f6f3ec,
    4px 2px 0 #d8d2c4,
    5px 2px 0 #f6f3ec,
    6px 3px 0 #d8d2c4,
    7px 3px 0 #f6f3ec,
    8px 4px 0 #d8d2c4,
    9px 4px 0 #f6f3ec,
    10px 5px 0 #cfc8b8,
    6px 18px 30px 0 rgba(0, 0, 0, 0.18);
}