.book-motion-stage {
    display: grid;
    place-items: center;
    perspective: 1100px;
    -webkit-tap-highlight-color: transparent;
}

.book-motion-object {
    --book-cover-width: 150pt;
    --book-depth: 68px;
    --book-rotate-x: 0deg;
    --book-rotate-y: 0deg;
    --book-shine: 28%;
    --book-edge: #252129;
    --book-edge-soft: #594f5d;
    --book-page: #f5f0e5;
    --book-page-line: #c8bfac;
    --book-shadow: rgb(0 0 0 / 42%);
    --book-shadow-halo: transparent;
    --book-shadow-soft: rgb(0 0 0 / 24%);
    --book-highlight-edge: rgb(255 255 255 / 18%);
    --book-shine-color: rgb(255 255 255 / 92%);
    position: relative;
    width: min(var(--book-cover-width), 54vw);
    aspect-ratio: 2 / 3;
    transform: rotateX(var(--book-rotate-x)) rotateY(var(--book-rotate-y));
    transform-style: preserve-3d;
    will-change: transform;
}

.book-motion-face,
.book-motion-spine,
.book-motion-pages {
    position: absolute;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.book-motion-front,
.book-motion-back {
    inset: 0;
    border-radius: 2px 7px 7px 2px;
}

.book-motion-front {
    overflow: hidden;
    color: inherit;
    background: var(--book-page);
    box-shadow:
        18px 24px 28px var(--book-shadow),
        10px 18px 34px 4px var(--book-shadow-halo),
        0 0 0 1px var(--book-highlight-edge);
    transform: translateZ(calc(var(--book-depth) / 2));
}

html[data-theme="dark"] .book-motion-object {
    --book-shadow: rgb(0 0 0 / 78%);
    --book-shadow-halo: rgb(190 204 235 / 34%);
    --book-highlight-edge: rgb(255 255 255 / 42%);
}

.book-motion-front img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-motion-back {
    background: linear-gradient(135deg, var(--book-edge-soft), var(--book-edge));
    pointer-events: none;
    transform: rotateY(180deg) translateZ(calc(var(--book-depth) / 2));
}

.book-motion-spine {
    top: 0;
    bottom: 0;
    left: 0;
    display: grid;
    width: var(--book-depth);
    overflow: hidden;
    place-items: center;
    pointer-events: none;
    color: var(--book-page);
    background: linear-gradient(90deg, var(--book-edge), var(--book-edge-soft) 45%, var(--book-edge));
    transform: translateX(-50%) rotateY(-90deg);
}

.book-motion-spine span {
    max-width: 260px;
    overflow: hidden;
    font-family: Georgia, serif;
    font-size: 11px;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: rotate(90deg);
}

.book-motion-pages-side {
    top: 4px;
    right: 0;
    bottom: 4px;
    width: var(--book-depth);
    pointer-events: none;
    border-radius: 0 4px 4px 0;
    background:
        linear-gradient(90deg, var(--book-shadow-soft), transparent 16%, transparent 78%, var(--book-shadow-soft)),
        repeating-linear-gradient(90deg, var(--book-page-line) 0 1px, var(--book-page) 1px 3px);
    box-shadow: inset 0 0 10px var(--book-shadow-soft);
    transform: translateX(50%) rotateY(90deg);
}

.book-motion-pages-top {
    top: 0;
    right: 4px;
    left: 4px;
    height: var(--book-depth);
    pointer-events: none;
    background: repeating-linear-gradient(0deg, var(--book-page-line) 0 1px, var(--book-page) 1px 3px);
    transform: translateY(-50%) rotateX(90deg);
}

.book-motion-pages-bottom {
    right: 4px;
    bottom: 0;
    left: 4px;
    height: var(--book-depth);
    pointer-events: none;
    border-radius: 0 0 4px 4px;
    background:
        linear-gradient(0deg, var(--book-shadow-soft), transparent 35%),
        repeating-linear-gradient(0deg, var(--book-page-line) 0 1px, var(--book-page) 1px 3px);
    box-shadow: inset 0 0 10px var(--book-shadow-soft);
    transform: translateY(50%) rotateX(-90deg);
}

.book-motion-shine {
    position: absolute;
    inset: 0;
    opacity: .32;
    background: linear-gradient(105deg, transparent 30%, var(--book-shine-color) 48%, transparent 66%);
    pointer-events: none;
    transform: translateX(calc(var(--book-shine) - 100%));
}

.book-detail-motion-stage {
    width: min(74vw, 280px);
    min-height: 370px;
    margin: 0 auto;
    overflow: visible;
    cursor: default;
    touch-action: pan-y;
}

.book-mini-motion-stage {
    width: min(64vw, 210px);
    min-height: 280px;
    margin: 0 auto;
    overflow: visible;
    cursor: default;
    touch-action: pan-y;
}

.book-mini-motion-object {
    --book-depth: 40px;
}

.book-motion-stage[data-book-motion-pointer="true"] {
    cursor: grab;
    user-select: none;
}

.book-motion-stage[data-book-motion-pointer="true"]:active {
    cursor: grabbing;
}

.book-detail-motion-object img.couverture,
.book-mini-motion-object img.couverture {
    min-width: 0;
    border: 0;
}

.cover-scroll-perspective {
    perspective: 700px;
}

.cover-scroll-base {
    --cover-scroll-x: 0deg;
    --cover-scroll-y: 0deg;
    --cover-scroll-depth: 28px;
    --cover-scroll-page: #f5f0e5;
    --cover-scroll-page-line: #c8bfac;
    --cover-scroll-shadow: rgb(0 0 0 / 38%);
    --cover-scroll-shadow-halo: transparent;
    position: relative;
    display: block;
}

html[data-theme="dark"] .cover-scroll-base {
    --cover-scroll-shadow: rgb(0 0 0 / 72%);
    --cover-scroll-shadow-halo: rgb(255 255 255 / 20%);
}

.cover-scroll-motion {
    transform: rotateX(var(--cover-scroll-x)) rotateY(var(--cover-scroll-y));
    transform-style: preserve-3d;
    transform-origin: center;
    transition: transform 180ms cubic-bezier(.2, .7, .2, 1);
}

.cover-scroll-pages-top {
    display: none;
}

.cover-scroll-motion::before,
.cover-scroll-motion::after,
.cover-scroll-motion > .cover-scroll-pages-top {
    position: absolute;
    display: block;
    pointer-events: none;
    backface-visibility: hidden;
}

.cover-scroll-motion::before,
.cover-scroll-motion::after {
    content: "";
}

.cover-scroll-motion::after {
    top: 3px;
    right: 0;
    bottom: 3px;
    width: var(--cover-scroll-depth);
    border-radius: 0 3px 3px 0;
    background: repeating-linear-gradient(90deg, var(--cover-scroll-page-line) 0 1px, var(--cover-scroll-page) 1px 3px);
    box-shadow: inset 0 0 5px rgb(0 0 0 / 22%);
    transform: translateX(50%) rotateY(90deg);
}

.cover-scroll-motion::before {
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--cover-scroll-depth);
    border-radius: 2px 0 0 2px;
    background: linear-gradient(90deg, #18151b, #756879 45%, #29232c);
    box-shadow:
        inset 1px 0 2px rgb(255 255 255 / 28%),
        inset -2px 0 3px rgb(0 0 0 / 42%);
    transform: translateX(-50%) rotateY(-90deg);
}

.cover-scroll-motion > .cover-scroll-pages-top {
    top: 0;
    right: 3px;
    left: 3px;
    height: var(--cover-scroll-depth);
    background: repeating-linear-gradient(0deg, var(--cover-scroll-page-line) 0 1px, var(--cover-scroll-page) 1px 3px);
    box-shadow: inset 0 0 4px rgb(0 0 0 / 18%);
    transform: translateY(-50%) rotateX(90deg);
}

.cover-scroll-motion > img,
.cover-scroll-motion > div:first-child {
    position: relative;
    z-index: 1;
    box-shadow:
        10px 14px 18px var(--cover-scroll-shadow),
        8px 12px 28px var(--cover-scroll-shadow-halo);
    transform: translateZ(calc(var(--cover-scroll-depth) / 2));
}

.cover-scroll-motion > img {
    display: block;
}

.cover-scroll-motion > .cover_middle {
    z-index: 2;
    transform: translate3d(0, -135pt, calc(var(--cover-scroll-depth) / 2 + 1px));
}

@media (prefers-reduced-motion: reduce) {
    .book-motion-object {
        transform: none;
        will-change: auto;
    }

    .book-motion-shine {
        display: none;
    }

    .cover-scroll-motion {
        transform: none;
        transition: none;
        will-change: auto;
    }
}