/* Storybook Hero: the click-to-open sample book (book-viewer.js). */
.bk-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; font: inherit; }
.bk-open img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 14px 34px rgba(30,38,80,.22), -6px 0 0 #1E2650 inset; transition: transform .2s; }
.bk-open:hover img, .bk-open:focus-visible img { transform: translateY(-3px) rotate(-.4deg); }
.bk-open .hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--coral, #E5604A); color: #fff; font-weight: 800; border-radius: 999px; padding: .6rem 1.2rem; box-shadow: 0 4px 0 var(--coral-dk, #C94A35); white-space: nowrap; }
body.bk-lock { overflow: hidden; }
.bk-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(20,24,54,.94); }
.bk-modal.on { display: flex; }
.bk-x { position: absolute; top: 10px; right: 14px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.bk-nav { flex: none; z-index: 3; width: 52px; height: 72px; border: 0; background: transparent; color: #fff; font-size: 3.4rem; line-height: 1; cursor: pointer; opacity: .85; }
.bk-nav:hover { opacity: 1; }
.bk-stage { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; perspective: 2400px; width: min(1000px, calc(100vw - 130px), calc((100vh - 120px) * 2)); }
.bk-book { position: relative; width: 100%; transition: transform .45s ease; }
.bk-book.wide { aspect-ratio: 2 / 1; }
.bk-book.closed-front { transform: translateX(-25%); } .bk-book.closed-back { transform: translateX(25%); }
.bk-book.single { width: min(92vw, calc(100vh - 150px)); aspect-ratio: 1; margin: 0 auto; }
.bk-half { position: absolute; top: 0; width: 50%; height: 100%; cursor: pointer; }
.bk-half.L { left: 0; } .bk-half.R { left: 50%; }
.bk-pg { width: 100%; height: 100%; background: #FFF8EC; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.bk-pg img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.bk-pg.empty { visibility: hidden; box-shadow: none; } .bk-pg.paper { background: #F1E6CF; }
.bk-half.L .bk-pg { border-radius: 6px 0 0 6px; background-image: linear-gradient(to left, rgba(0,0,0,.18), transparent 7%); }
.bk-half.R .bk-pg { border-radius: 0 6px 6px 0; }
.bk-leaf { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.45,.05,.3,1); z-index: 2; }
.bk-leaf.fwd { left: 50%; transform-origin: left center; } .bk-leaf.fwd.turn { transform: rotateY(-180deg); }
.bk-leaf.back { left: 0; transform-origin: right center; } .bk-leaf.back.turn { transform: rotateY(180deg); }
.bk-leaf .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk-leaf .face.b { transform: rotateY(180deg); }
.bk-cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #fff; font-weight: 700; opacity: .9; }
@media (max-width: 759px) { .bk-nav { position: absolute; top: 50%; margin-top: -36px; width: 44px; background: rgba(0,0,0,.25); border-radius: 8px; } .bk-nav.prev { left: 4px; } .bk-nav.next { right: 4px; } .bk-stage { width: 100vw; } }
@media (prefers-reduced-motion: reduce) { .bk-book, .bk-leaf { transition: none; } }