/* ==========================================================
   book3d: hardcover book in CSS 3D, shared by /press/ and the
   book detail pages. Drag to rotate is added by book3d.js.

   Faces: front + back covers, spine, page block at the fore-edge.
   Each board is stacked from thin plies so the case thickness
   and its rounded corners show from any angle.

   Size knobs: set --w on .book3d. Everything else scales with it.
   Images: inline background-image on the front/back/spine faces.
   ========================================================== */
.book3d {
  --w: 248px;
  --h: calc(var(--w) * 1.5374);   /* front board 1202 x 1848 */
  --t: calc(var(--w) * 0.165);    /* case thickness: ~350-page hardcover */
  --board: calc(var(--w) * 0.018);/* each board */
  --ply: calc(var(--board) / 6);  /* 6 plies per board */
  --inset: calc(var(--w) * 0.01); /* page block sits this far inside the boards */
  --r: calc(var(--w) * 0.011);    /* fore-edge corner radius */
  --sr: calc(var(--w) * 0.005);   /* spine-side corner radius */
  --ry: -28deg;                   /* rotation, updated by book3d.js */
  --case: #f7f2e7;                /* board edge (cover paper wrapped over board) */
  --case-dark: #e9e2d4;
  --shade-front: 0;
  --shade-back: 0.3;
  --shade-spine: 0.3;
  --shade-edge: 0.12;
  position: relative;
  display: block;
  width: var(--w);
  height: var(--h);
  perspective: 1800px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.book3d.is-live { cursor: grabbing; }
.book3d:focus-visible {
  outline: 2px solid var(--accent, #e8562a);
  outline-offset: 1rem;
  border-radius: 0.25rem;
}

/* floor shadow, stays flat while the book turns */
.book3d::before {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: calc(var(--w) * -0.09);
  height: calc(var(--w) * 0.12);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 70%);
  filter: blur(6px);
  pointer-events: none;
}

.book3d-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--ry));
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.book3d.is-live .book3d-body { transition: none; }

.book3d-body > span {
  position: absolute;
  display: block;
}

/* ---------- covers ---------- */
.book3d-front,
.book3d-back {
  inset: 0;
  background: var(--case) center / cover no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.book3d-front {
  transform: translateZ(calc(var(--t) / 2));
  border-radius: var(--sr) var(--r) var(--r) var(--sr);
}
.book3d-back {
  transform: rotateY(180deg) translateZ(calc(var(--t) / 2));
  border-radius: var(--r) var(--sr) var(--sr) var(--r);
}
/* hinge groove: kept at the board's spine edge, since the cover art starts after the hinge
   (a wider groove reads as part of the spine and makes centered art look off-center) */
.book3d-front::before,
.book3d-back::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--w) * 0.035);
  background:
    linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0) 20%),
    linear-gradient(to right, rgba(0,0,0,0) 25%, rgba(0,0,0,.10) 40%, rgba(255,255,255,.22) 55%, rgba(255,255,255,0) 90%);
  pointer-events: none;
}
.book3d-front::before { left: 0; }
.book3d-back::before { right: 0; transform: scaleX(-1); }

/* ---------- board plies (case thickness) ---------- */
.book3d-ply {
  inset: 0;
  background: var(--case);
  border-radius: var(--sr) var(--r) var(--r) var(--sr);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.035);
}
.book3d-ply.f { transform: translateZ(calc(var(--t) / 2 - var(--i) * var(--ply))); }
.book3d-ply.b { transform: translateZ(calc(var(--t) / -2 + var(--i) * var(--ply))); }

/* ---------- spine ---------- */
.book3d-spine {
  top: 0;
  left: calc((var(--w) - var(--t)) / 2);
  width: var(--t);
  height: 100%;
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background: var(--case) center / auto 100% no-repeat;
  border-radius: calc(var(--sr) * 1.5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
/* rounded-spine light falloff */
.book3d-spine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(0,0,0,.16), rgba(0,0,0,.03) 16%, rgba(255,255,255,.10) 45%,
    rgba(0,0,0,0) 70%, rgba(0,0,0,.14));
  pointer-events: none;
}

/* ---------- fore-edge: board edges + page block ---------- */
.book3d-edge {
  top: var(--r);
  left: calc((var(--w) - var(--t)) / 2);
  width: var(--t);
  height: calc(100% - 2 * var(--r));
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
  /* local x runs front -> back: front board band, open gap, back board band */
  background: linear-gradient(to right,
    #fffdf8 0, var(--case) 1.5px, var(--case) calc(var(--board) - 1.5px), var(--case-dark) var(--board),
    transparent var(--board), transparent calc(100% - var(--board)),
    var(--case-dark) calc(100% - var(--board)), var(--case) calc(100% - var(--board) + 1.5px), var(--case) calc(100% - 1.5px), #fffdf8 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.book3d-pages {
  top: var(--inset);
  left: calc((var(--w) - var(--t)) / 2 + var(--board));
  width: calc(var(--t) - 2 * var(--board));
  height: calc(100% - 2 * var(--inset));
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - var(--inset)));
  border-radius: 2px;
  background:
    linear-gradient(to right, rgba(60,40,10,.16), rgba(0,0,0,0) 9%, rgba(0,0,0,0) 91%, rgba(60,40,10,.16)),
    linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,0) 6%, rgba(0,0,0,0) 94%, rgba(0,0,0,.06)),
    repeating-linear-gradient(to right, #fffdf9 0 2px, #f1ece2 2px 3px, #fdfaf4 3px 5px, #eee8dd 5px 6px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* angle-based shading, values come from book3d.js */
.book3d-front::after,
.book3d-back::after,
.book3d-spine::after,
.book3d-pages::after,
.book3d-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000;
  pointer-events: none;
}
.book3d-front::after { opacity: var(--shade-front); }
.book3d-back::after  { opacity: var(--shade-back); }
.book3d-spine::after { opacity: var(--shade-spine); }
.book3d-pages::after,
.book3d-edge::after  { opacity: var(--shade-edge); }
/* keep the transparent gap of the edge strip unshaded */
.book3d-edge::after {
  -webkit-mask: linear-gradient(to right, #000 var(--board), transparent var(--board), transparent calc(100% - var(--board)), #000 calc(100% - var(--board)));
  mask: linear-gradient(to right, #000 var(--board), transparent var(--board), transparent calc(100% - var(--board)), #000 calc(100% - var(--board)));
}

.book3d-hint {
  margin-top: calc(var(--w, 248px) * 0.16);
  color: var(--muted, #8b8f98);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .book3d-body { transition: none; }
}