/* Flipbook for the AI-scan white paper: the teaser on /ai-scan and the full reader on
   /ai-scan/read. Markup is built by book.js; every class starts with bk-. */
.bk { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0;
  user-select: none; -webkit-user-select: none; }
.bk-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center;
  justify-content: center; }
.bk-book { position: relative; perspective: 2600px; transition: transform .6s cubic-bezier(.3,.1,.2,1); }
/* the cover sits alone on the right half, the back page alone on the left: centre them */
.bk-book.is-first { transform: translateX(-25%); }
.bk-book.is-last { transform: translateX(25%); }
.bk.is-single .bk-book.is-first, .bk.is-single .bk-book.is-last { transform: none; }

.bk-pg { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; background: #fff; }
.bk-pg img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bk-l { left: 0; }
.bk-r { left: 50%; }
.bk.is-single .bk-r { left: 0; width: 100%; }
.bk-pg.is-empty { visibility: hidden; }
/* a soft fold at the spine */
.bk-l::after, .bk-r::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; }
.bk-l::after { right: 0; background: linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,0)); }
.bk-r::after { left: 0; background: linear-gradient(to right, rgba(0,0,0,.14), rgba(0,0,0,0)); }
.bk.is-single .bk-pg::after { display: none; }
.bk-shadow { position: absolute; inset: 0; pointer-events: none; }
.bk-shadow::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--bk-sl, 0); right: var(--bk-sr, 0);
  box-shadow: 0 22px 50px rgba(8,10,14,.28), 0 2px 6px rgba(8,10,14,.12); }

/* the turning leaf */
.bk-leaf { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; z-index: 3;
  transition: transform .7s cubic-bezier(.45,.05,.35,1); }
.bk-leaf.fwd { left: 50%; transform-origin: left center; }
.bk-leaf.back { left: 0; transform-origin: right center; }
.bk-leaf.fwd.go { transform: rotateY(-180deg); }
.bk-leaf.back.go { transform: rotateY(180deg); }
.bk-face { position: absolute; inset: 0; overflow: hidden; background: #fff; backface-visibility: hidden;
  -webkit-backface-visibility: hidden; }
.bk-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bk-face.b { transform: rotateY(180deg); }
.bk-face::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .7s; pointer-events: none; }
.bk-leaf.fwd .bk-face.f::after { background: linear-gradient(to left, rgba(0,0,0,.25), rgba(0,0,0,0) 60%); }
.bk-leaf.back .bk-face.f::after { background: linear-gradient(to right, rgba(0,0,0,.25), rgba(0,0,0,0) 60%); }
.bk-leaf.go .bk-face.f::after { opacity: 1; }

/* single-page mode (narrow screens) slides instead of turning */
.bk.is-single .bk-r.slide-in-l { animation: bkInL .35s ease both; }
.bk.is-single .bk-r.slide-in-r { animation: bkInR .35s ease both; }
@keyframes bkInL { from { opacity: 0; transform: translateX(6%); } to { opacity: 1; transform: none; } }
@keyframes bkInR { from { opacity: 0; transform: translateX(-6%); } to { opacity: 1; transform: none; } }

/* pages past the teaser */
.bk-pg.is-locked img, .bk-face.is-locked img { filter: blur(7px) saturate(.6); transform: scale(1.06); }
.bk-lock { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
  padding: 18px; }
.bk-lock[hidden] { display: none; }
.bk-lock-card { max-width: 300px; padding: 22px 22px 20px; text-align: center; background: #fff;
  border-top: 2px solid var(--orange); box-shadow: 0 18px 44px rgba(8,10,14,.18); }
.bk-lock-card b { display: block; font-family: var(--f-d); font-weight: 500; font-size: 22px; line-height: 1.2;
  color: var(--ink); }
.bk-lock-card span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.bk-lock-card .btn { margin-top: 14px; width: 100%; }

/* arrows and the bottom bar */
.bk-nav { position: absolute; top: 50%; z-index: 5; width: 44px; height: 64px; margin-top: -32px; display: flex;
  align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: inherit;
  opacity: .75; transition: opacity .2s; }
.bk-nav:hover { opacity: 1; }
.bk-nav:disabled { opacity: 0; pointer-events: none; }
.bk-nav svg { width: 18px; height: 36px; }
.bk-prev { left: 0; }
.bk-next { right: 0; }
.bk.is-single .bk-nav { width: 32px; }
.bk-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; padding: 14px 6px 0; }
.bk-bar.is-min { justify-content: center; text-align: center; }
.bk-count { min-width: 70px; font-family: var(--f-m); font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
.bk-range { flex: 1 1 auto; max-width: 420px; margin: 0 auto; accent-color: var(--orange); }
.bk-full { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none;
  border: 0; cursor: pointer; color: inherit; opacity: .75; }
.bk-full:hover { opacity: 1; }
.bk-full svg { width: 18px; height: 18px; }
.bk-nav:focus-visible, .bk-full:focus-visible, .bk-range:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* light (teaser panel) and dark (reader) */
.bk-light { color: var(--ink); }
.bk-light .bk-count { color: var(--muted-2); }
.bk-dark { color: #F2F2EE; }
.bk-dark .bk-count { color: rgba(242,242,238,.7); }
/* dark pages on a dark ground still need an edge */
.bk-dark .bk-shadow::before { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 22px 50px rgba(0,0,0,.45); }

@media (prefers-reduced-motion: reduce) {
  .bk-book, .bk-leaf, .bk-face::after { transition: none; }
  .bk.is-single .bk-r.slide-in-l, .bk.is-single .bk-r.slide-in-r { animation: none; }
}
