/* Look-at 3D object (see part.js) + a CSS-only 3D book to look with.

   .look3d = the element part.js turns toward the pointer (transform-style: preserve-3d is set here).
   The book: a box of flat faces, no images. Markup (any face may be left out):
     <div class="look3d l3d-book">
       <div class="l3d-cover">...your cover...<i class="l3d-hinge"></i></div>
       <div class="l3d-cover-in"></div>
       <div class="l3d-back"><i class="l3d-back-hl"></i>...</div>
       <div class="l3d-back-in"></div>
       <div class="l3d-spine">...</div>
       <div class="l3d-fore"></div><div class="l3d-top"></div><div class="l3d-bottom"></div>
       <i class="l3d-edge l3d-edge--rf"></i><i class="l3d-edge l3d-edge--rb"></i>
       <i class="l3d-edge l3d-edge--tf"></i><i class="l3d-edge l3d-edge--tb"></i>
       <i class="l3d-edge l3d-edge--bf"></i><i class="l3d-edge l3d-edge--bb"></i>
     </div>
   Geometry (measured from the source book): 352 x 517, two 4px boards at z +-33..37, a 66px page block set
   23px in from the fore edge and 10px in at top and bottom, a 76px spine that wraps both boards. */
.look3d { transform-style: preserve-3d; will-change: transform; }
.look3d[data-look-mode="drag"] { cursor: grab; user-select: none; -webkit-user-select: none; }   /* drag mode */
.look3d[data-look-mode="drag"].is-dragging { cursor: grabbing; }

.l3d-book {
  --book-w: 352px;
  --book-h: 517px;
  --book-board: 4px;                        /* cover board thickness */
  --book-block: 66px;                       /* page block depth */
  --book-edge-x: 23px;                      /* page block inset from the fore edge */
  --book-edge-y: 10px;                      /* page block inset top and bottom */
  --book-cover: #bebbb3;
  --book-cover-in: #404040;                 /* inside of the front board */
  --book-back: #171716;
  --book-back-in: #050505;
  --book-spine: #bebbb2;
  --book-board-edge: #bdbab2;
  --book-paper: #f1ede4;
  --book-paper-line: #d6d0c3;
  --z: calc(var(--book-block) / 2 + var(--book-board));      /* outer face of a board (37px) */
  --zi: calc(var(--book-block) / 2);                          /* inner face of a board (33px) */
  position: relative; width: var(--book-w); height: var(--book-h); transform-style: preserve-3d;
}
.l3d-book > * { position: absolute; box-sizing: border-box; }
.l3d-cover { inset: 0; overflow: hidden; background: var(--book-cover); transform: translateZ(var(--z)); }
.l3d-cover-in { inset: 0; background: var(--book-cover-in); transform: translateZ(var(--zi)); }
.l3d-back { inset: 0; overflow: hidden; background: var(--book-back); transform: translateZ(calc(var(--z) * -1)) rotateY(180deg); }
.l3d-back-in { inset: 0; background: var(--book-back-in); transform: translateZ(calc(var(--zi) * -1)); }
.l3d-spine {
  top: 0; bottom: 0; width: calc(var(--z) * 2 + 2px); left: calc(var(--z) * -1 - 1px); overflow: hidden;
  background: var(--book-spine); transform: rotateY(-90deg);
}
/* page block: fine lines parallel to the boards */
.l3d-fore, .l3d-top, .l3d-bottom { --lines: var(--book-paper) 0 1.4px, var(--book-paper-line) 1.4px 2px; }
.l3d-fore {
  width: var(--book-block); top: var(--book-edge-y); bottom: var(--book-edge-y);
  left: calc(var(--book-w) - var(--book-edge-x) - var(--book-block) / 2);
  background: linear-gradient(0deg, rgb(0 0 0 / .06), transparent 20% 80%, rgb(0 0 0 / .06)), repeating-linear-gradient(90deg, var(--lines));
  transform: rotateY(90deg);
}
.l3d-top, .l3d-bottom {
  left: 0; width: calc(var(--book-w) - var(--book-edge-x)); height: var(--book-block);
  background: linear-gradient(90deg, rgb(0 0 0 / .08), transparent 30%), repeating-linear-gradient(0deg, var(--lines));
}
.l3d-top { top: calc(var(--book-edge-y) - var(--book-block) / 2); transform: rotateX(90deg); }
.l3d-bottom { top: calc(var(--book-h) - var(--book-edge-y) - var(--book-block) / 2); transform: rotateX(-90deg); }
/* the boards' own 4px edges */
.l3d-edge { background: var(--book-board-edge); }
.l3d-edge--rf, .l3d-edge--rb { top: 0; height: var(--book-h); width: var(--book-board); left: calc(var(--book-w) - var(--book-board) / 2); }
.l3d-edge--rf { transform: translateZ(calc(var(--z) - var(--book-board) / 2)) rotateY(90deg); }
.l3d-edge--rb { transform: translateZ(calc(var(--book-board) / 2 - var(--z))) rotateY(90deg); }
.l3d-edge--tf, .l3d-edge--tb, .l3d-edge--bf, .l3d-edge--bb { left: 0; width: var(--book-w); height: var(--book-board); }
.l3d-edge--tf, .l3d-edge--tb { top: calc(var(--book-board) / -2); }
.l3d-edge--bf, .l3d-edge--bb { top: calc(var(--book-h) - var(--book-board) / 2); box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.l3d-edge--tf, .l3d-edge--bf { transform: translateZ(calc(var(--z) - var(--book-board) / 2)) rotateX(90deg); }
.l3d-edge--tb, .l3d-edge--bb { transform: translateZ(calc(var(--book-board) / 2 - var(--z))) rotateX(90deg); }
/* fixed highlights painted on the boards (the hinge crease on the front, the edge on the back) */
.l3d-hinge { position: absolute; top: 0; bottom: 0; left: 1px; width: 18px; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / .25) 0%, rgb(255 255 255 / 0) 22% 43%, rgb(255 255 255 / .2) 100%); }
.l3d-back-hl { position: absolute; top: 0; bottom: 0; right: 1px; width: 24px; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / .25) 0%, rgb(255 255 255 / 0) 28% 46%, rgb(255 255 255 / .2) 46.5%, rgb(255 255 255 / 0) 85%); }