/*!
 * book3d — interactive 3D book component (v1.0)
 * Portable: no dependency on the host site's CSS. Pair with book3d.js.
 * Docs + markup contract: book3d/README.md · Live example: book3d/demo.html
 *
 * Sizing:  set --bw / --bh / --bd on .book3d (cover width, height, spine thickness).
 *          6x9 trim → bh = bw * 1.5;  bd ≈ bw * (spine inches / trim width inches).
 * Theme:   override the --b3-* variables on .book3d-stage.
 * Host:    give the section containing the book `overflow-x: clip` so the open
 *          spread can't cause sideways scrolling on narrow screens.
 */

/* Self-contained box model so the component doesn't depend on the host page's reset */
.book3d-stage, .book3d-stage *, .book3d-stage *::before, .book3d-stage *::after { box-sizing: border-box; }
.book3d-stage img { max-width: none; }

.book3d-stage {
  /* ---- Theme: override any of these on .book3d-stage (or a parent) ---- */
  --b3-accent: #7c5cff;
  --b3-accent-2: #22d3c5;
  --b3-grad: linear-gradient(135deg, #7c5cff 0%, #4f8cff 50%, #22d3c5 100%);
  --b3-text: #f4f5f9;
  --b3-text-dim: #a7acc0;
  --b3-hint: #7b8099;
  --b3-glow: rgba(124,92,255,.35);
  --b3-link: #5b45d6;
  --b3-link-hover: #7c5cff;
  --b3-font-display: "Space Grotesk", system-ui, sans-serif;
  --b3-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --b3-serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --b3-sans: "Open Sans", Calibri, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 1600px;
  padding: 24px 0 8px;
}
.book3d-hint {
  margin: 18px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b3-hint);
}

.book3d {
  --bw: 270px;            /* cover width  */
  --bh: 405px;            /* cover height (6x9 trim = 1:1.5) */
  --bd: 41px;             /* hardcover thickness (0.92in spine) */
  position: relative;
  width: var(--bw);
  height: var(--bh);
  cursor: grab;
  touch-action: pan-y;
  outline: none;
  transform-style: preserve-3d;
  -webkit-user-select: none;
  user-select: none;
}
.book3d:active { cursor: grabbing; }
.book3d { transition: translate 1.1s cubic-bezier(.65,.05,.25,1); }
.book3d.open { translate: calc(var(--bw) * 0.5) 0; }   /* slide right so the open spread is centred */
.book3d:focus-visible { box-shadow: 0 0 0 3px var(--b3-accent); border-radius: 6px; }

.book3d-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, -6deg)) rotateY(var(--ry, -28deg));
  transition: transform 0.9s cubic-bezier(.2,.8,.2,1);
}
.book3d.dragging .book3d-body,
.book3d.idle .book3d-body { transition: none; }

.b3-face {
  position: absolute;
  top: 0; left: 0;
  width: var(--bw);
  height: var(--bh);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Front cover — hinged at the spine */
.b3-cover {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: translateZ(calc(var(--bd) / 2)) rotateY(0deg);
  transition: transform 1.1s cubic-bezier(.65,.05,.25,1);
  z-index: 2;
}
/* opened cover lies flat, a few px behind the turned leaf so it never cuts through it */
.book3d.open .b3-cover { transform: translateZ(calc(var(--bd) / 2 - 5px)) rotateY(-179deg); }

.b3-front {
  overflow: hidden;
  border-radius: 2px 6px 6px 2px;
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(124,92,255,.55), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(34,211,197,.35), transparent 60%),
    linear-gradient(160deg, #141a33 0%, #0b0d14 100%);
  box-shadow: inset 6px 0 10px -4px rgba(0,0,0,.6), inset -1px 0 0 rgba(255,255,255,.08);
}
.b3-front::before { /* hardcover hinge groove */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 12px;
  width: 3px;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.07));
  z-index: 3;
}
.b3-art { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 30px 24px 26px 32px; }
.b3-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.b3-title-block { position: relative; margin-top: 34%; }
.b3-title {
  display: block;
  font-family: var(--b3-font-display);
  font-weight: 700;
  font-size: calc(var(--bw) * 0.21);
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--b3-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.b3-sub {
  display: block;
  margin-top: 12px;
  font-family: var(--b3-font-display);
  font-size: calc(var(--bw) * 0.058);
  line-height: 1.3;
  color: var(--b3-text);
}
.b3-author {
  position: relative;
  font-family: var(--b3-font-display);
  font-size: calc(var(--bw) * 0.056);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--b3-text-dim);
}
.b3-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.b3-sheen {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%);
  background-size: 250% 100%;
  background-position: var(--sheen, 60%) 0;
}

.b3-inside-cover { /* endpaper */
  transform: rotateY(180deg);
  border-radius: 6px 2px 2px 6px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px),
    linear-gradient(135deg, #1c1c22, #111116);
  box-shadow: inset -10px 0 14px -8px rgba(0,0,0,.7);
}

/* Pages: right-hand page block + one turnable leaf */
.b3-page, .b3-leaf {
  top: 4px; left: 1px;
  width: calc(var(--bw) - 6px);
  height: calc(var(--bh) - 8px);
}
.b3-page { transform: translateZ(calc(var(--bd) / 2 - 3px)); }
.b3-leaf {
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: translateZ(calc(var(--bd) / 2 - 1.5px)) rotateY(0deg);
  transition: transform 1s cubic-bezier(.65,.05,.25,1);
}
.book3d.turned .b3-leaf { transform: translateZ(calc(var(--bd) / 2 - 1.5px)) rotateY(-177deg); }
.b3-leaf-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.b3-leaf-back { transform: rotateY(180deg); }
.b3-page, .b3-leaf-face {
  background: #fff;
  color: #111;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.b3-page, .b3-leaf-front { border-radius: 2px 4px 4px 2px; box-shadow: inset 10px 0 12px -10px rgba(0,0,0,.35); }
.b3-leaf-back { border-radius: 4px 2px 2px 4px; box-shadow: inset -10px 0 12px -10px rgba(0,0,0,.35); }

/* Title page */
.b3-tp { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 calc(var(--bw) * 0.08); }
.b3-tp p { margin: 0; color: #111; }
.b3-tp-title {
  margin-top: calc(var(--bh) * 0.3) !important;
  font-family: var(--b3-serif);
  font-size: calc(var(--bw) * 0.078);
  line-height: 1.32;
}
.b3-tp-sub {
  margin-top: calc(var(--bh) * 0.03) !important;
  font-family: var(--b3-sans);
  font-size: calc(var(--bw) * 0.031);
  letter-spacing: 0.03em;
  color: #6b6b6b !important;
  white-space: nowrap;
}
.b3-tp-author {
  margin-top: calc(var(--bh) * 0.12) !important;
  font-family: var(--b3-serif);
  font-size: calc(var(--bw) * 0.043);
}
.b3-turn {
  margin-bottom: calc(var(--bh) * 0.05);
  font-family: var(--b3-font-body);
  font-size: calc(var(--bw) * 0.036);
  color: #8a8a96;
  letter-spacing: .04em;
}
.b3-tp-buy {
  margin: 6px 0 calc(var(--bh) * 0.04);
  font-family: var(--b3-font-body);
  font-size: calc(var(--bw) * 0.04);
  font-weight: 600;
  color: var(--b3-link);
  text-decoration: none;
  border-bottom: 1px solid rgba(91,69,214,.35);
  padding-bottom: 1px;
}
.b3-tp-buy:hover { color: var(--b3-link-hover); border-color: var(--b3-link-hover); }

/* Table of contents pages */
.b3-toc { align-items: stretch; text-align: left; padding: calc(var(--bh) * 0.055) calc(var(--bw) * 0.075) 0; }
.b3-toc-h {
  margin: calc(var(--bh) * 0.02) 0 calc(var(--bh) * 0.02);
  font-family: var(--b3-sans);
  font-size: calc(var(--bw) * 0.062);
  color: #111;
}
.b3-runhead {
  margin: 0 0 calc(var(--bh) * 0.025);
  text-align: center;
  font-family: var(--b3-serif);
  font-size: calc(var(--bw) * 0.026);
  color: #333;
}
.b3-toc ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.b3-toc li {
  display: flex; align-items: flex-end;
  padding: calc(var(--bh) * 0.0065) 0;
  border-bottom: 1px solid #d9d9d9;
  font-size: calc(var(--bw) * 0.032);
  line-height: 1.3;
  color: #111;
}
.b3-toc li.fm { font-family: var(--b3-sans); }
.b3-toc li.ch { font-family: var(--b3-serif); font-size: calc(var(--bw) * 0.036); }
.b3-toc .t { flex: 0 1 auto; }
.b3-toc .d { flex: 1 0 8px; margin: 0 3px 0.28em; border-bottom: 1.5px dotted #777; min-width: 8px; }
.b3-toc .n { flex: none; }
.b3-toc .b3-tp-buy { align-self: center; }

.b3-back {
  overflow: hidden;
  transform: rotateY(180deg) translateZ(calc(var(--bd) / 2));
  border-radius: 6px 2px 2px 6px;
  background: linear-gradient(200deg, #141a33 0%, #0b0d14 100%);
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: 32px;
  font-family: var(--b3-font-display);
}
.b3-back p { font-size: 1.05rem; color: var(--b3-text); margin: 0; }
.b3-back span { font-size: .72rem; letter-spacing: .2em; color: var(--b3-accent-2); }

.b3-spine {
  overflow: hidden;
  width: var(--bd);
  left: calc((var(--bw) - var(--bd)) / 2);
  transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2));
  background: linear-gradient(90deg, #0b0d14, #1d1840 50%, #0b0d14);
  display: flex; align-items: center; justify-content: center;
}
.b3-spine span {
  writing-mode: vertical-rl;
  font-family: var(--b3-font-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--b3-text);
  white-space: nowrap;
}
.b3-edge { background: repeating-linear-gradient(90deg, #f1eee5 0 1px, #d8d4c8 1px 2px); }
.b3-edge-right {
  width: calc(var(--bd) - 4px);
  left: calc((var(--bw) - var(--bd) + 4px) / 2);
  height: calc(var(--bh) - 8px);
  top: 4px;
  transform: rotateY(90deg) translateZ(calc(var(--bw) / 2 - 4px));
}
.b3-edge-top, .b3-edge-bottom {
  width: calc(var(--bw) - 6px);
  height: calc(var(--bd) - 4px);
  top: calc((var(--bh) - var(--bd) + 4px) / 2);
  background: repeating-linear-gradient(0deg, #f1eee5 0 1px, #d8d4c8 1px 2px);
}
.b3-edge-top { transform: rotateX(90deg) translateZ(calc(var(--bh) / 2 - 4px)); }
.b3-edge-bottom { transform: rotateX(-90deg) translateZ(calc(var(--bh) / 2 - 4px)); }

.book3d-shadow {
  position: absolute;
  left: 8%; right: 8%;
  bottom: -34px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--b3-glow), transparent);
  filter: blur(6px);
  transform: translateZ(-80px);
}

@media (max-width: 420px) {
  .book3d { --bw: 210px; --bh: 315px; --bd: 32px; }
}
@media (max-width: 520px) {
  .book3d { transition: translate 1.1s cubic-bezier(.65,.05,.25,1), scale 1.1s cubic-bezier(.65,.05,.25,1); }
  .book3d.open { scale: .82; translate: calc(var(--bw) * 0.41) 0; }
  .b3-toc { padding-top: calc(var(--bh) * 0.04); }
  .b3-runhead { margin-bottom: calc(var(--bh) * 0.012); }
  .b3-toc li { padding: calc(var(--bh) * 0.003) 0; line-height: 1.18; }
  .b3-toc li.ch { font-size: calc(var(--bw) * 0.034); }
  .b3-toc .b3-tp-buy { margin: 4px 0 calc(var(--bh) * 0.025); }
}
.book3d-nav { display: flex; gap: 10px; margin-top: 12px; }
.book3d-nav[hidden] { display: none; }
/* Default button look; :where() keeps specificity at zero so a host site's own button classes win */
:where(.book3d-nav) :where(button) {
  font: 600 0.85rem/1 var(--b3-font-body);
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--b3-accent);
  background: transparent;
  color: var(--b3-text);
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .book3d, .book3d-body, .b3-cover, .b3-leaf { transition: none; }
}