/* ═══════════════════════════════════════════
   BookVw — Frontend Book Hover Effect
═══════════════════════════════════════════ */

.bvw-wrap {
    display: inline-block;
    line-height: 0;
}

.bvw-link {
    display: inline-block;
    text-decoration: none;
}

/* ── Scene: sets perspective depth ─────── */
.bvw-scene {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    padding: 20px 30px 30px 10px; /* room for shadow */
    box-sizing: content-box;
}

/* ── Book container ─────────────────────── */
.bvw-book {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-25deg) rotateX(3deg);
    transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    filter: drop-shadow(8px 16px 24px rgba(0,0,0,0.35));
}

.bvw-book:hover {
    /* JS sets the exact angle via CSS variable */
    transform: rotateY(var(--bvw-open-angle, -50deg)) rotateX(3deg);
    filter: drop-shadow(12px 22px 32px rgba(0,0,0,0.45));
}

/* ── Spine ──────────────────────────────── */
.bvw-spine {
    position: absolute;
    height: 100%;
    top: 0;
    transform-origin: right center;
    border-radius: 3px 0 0 3px;
    /* background & width set via inline style from PHP */
}

/* ── Page stack ─────────────────────────── */
.bvw-page {
    position: absolute;
    top: 0.5%;
    height: 99%;
    width: 97%;
    background: #fefdf8;
    border-radius: 1px 4px 4px 1px;
    transform-origin: left center;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    /* z-index & left set by PHP/JS */
}

/* Stagger pages on hover — JS adds nth-child overrides */
.bvw-book:hover .bvw-page:nth-child(2) { transform: rotateY(calc(var(--bvw-page-spread, 10deg) * -3)); }
.bvw-book:hover .bvw-page:nth-child(3) { transform: rotateY(calc(var(--bvw-page-spread, 10deg) * -2)); }
.bvw-book:hover .bvw-page:nth-child(4) { transform: rotateY(calc(var(--bvw-page-spread, 10deg) * -1.3)); }
.bvw-book:hover .bvw-page:nth-child(5) { transform: rotateY(calc(var(--bvw-page-spread, 10deg) * -0.8)); }
.bvw-book:hover .bvw-page:nth-child(6) { transform: rotateY(calc(var(--bvw-page-spread, 10deg) * -0.4)); }
.bvw-book:hover .bvw-page:nth-child(7) { transform: rotateY(calc(var(--bvw-page-spread, 10deg) * -0.15)); }

/* ── Covers ─────────────────────────────── */
.bvw-cover {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    backface-visibility: hidden;
}

.bvw-cover-front {
    border-radius: 2px 5px 5px 2px;
    z-index: 20;
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
}

.bvw-cover-back {
    border-radius: 5px 2px 2px 5px;
    z-index: 1;
    background-color: #1a1a2e; /* fallback when no back cover */
    transform: rotateY(180deg);
    transform-origin: left center;
}

/* ── No-back fallback ───────────────────── */
.bvw-no-back {
    display: block;
    width: 100%; height: 100%;
}

/* ── Accessible focus ring ──────────────── */
.bvw-link:focus-visible .bvw-book {
    outline: 3px solid #2271b1;
    outline-offset: 4px;
    border-radius: 3px;
}

/* ── Reduced motion ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bvw-book,
    .bvw-page,
    .bvw-cover { transition: none !important; }
}