.va-book-container {
    perspective:        var(--va-book-perspective, 2500px);
    width:              var(--va-book-width, 360px);
    height:             var(--va-book-height, 540px);
    position:           relative;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    transform-style:    preserve-3d;
    z-index:            50;
    cursor:             grab;
    pointer-events:     auto;
    margin:             0 auto;

    filter:             drop-shadow(0 30px 60px rgba(2, 6, 23, 0.5));
}


.va-book-container::after {
    content:        "";
    position:       absolute;
    inset:          -18px;
    background:     radial-gradient(circle at 50% 40%, var(--va-book-glow, rgba(255,255,255,0.22)), transparent 60%);
    z-index:        -1;
    filter:         blur(12px);
    pointer-events: none;
}




@keyframes va-book-float {
    0%   { transform: rotateY(var(--va-book-ry0,  30deg)) rotateX(var(--va-book-rx0,  10deg)) translateY(0); }
    50%  { transform: rotateY(var(--va-book-ry50, 25deg)) rotateX(var(--va-book-rx50, 15deg)) translateY(var(--va-book-lift, -20px)); }
    100% { transform: rotateY(var(--va-book-ry0,  30deg)) rotateX(var(--va-book-rx0,  10deg)) translateY(0); }
}



.va-book {
    width:              var(--va-book-width,  360px);
    height:             var(--va-book-height, 540px);
    position:           absolute;
    transform-style:    preserve-3d;

    transform:          rotateY(var(--va-book-ry0, 30deg));
    transition:         transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change:        transform;
    pointer-events:     none;
}


.va-book--idle {
    animation: va-book-float 8s ease-in-out infinite;
}


@media (hover: hover) {
    .va-book-container:hover .va-book--idle {
        animation:  none !important;
        transition: none !important;
    }
}


@media (prefers-reduced-motion: reduce) {
    .va-book--idle {
        animation: none;
    }
}


@media (max-width: 768px) {
    .va-book-container {

        --va-book-mobile-width: calc(100vw - 24px);
        --va-book-width: var(--va-book-mobile-width);
        --va-book-height: calc(var(--va-book-mobile-width) * var(--va-book-aspect-ratio, 1.5));
    }
}



.va-book__face {
    position:               absolute;
    box-sizing:             border-box;
    backface-visibility:    hidden;
}



.va-book__face--front {
    width:      var(--va-book-width,  360px);
    height:     var(--va-book-height, 540px);
    left:       50%;
    top:        50%;

    transform:  translate(-50%, -50%) translateZ(calc(var(--va-book-depth, 50px) / 2));
}

.va-book__face--front img {
    width:              100%;
    height:             100%;
    object-fit:         cover;
    border-radius:      2px 4px 4px 2px;

    box-shadow:         inset 4px 0 12px rgba(0, 0, 0, 0.2),
                        0 18px 35px rgba(2, 6, 23, 0.45);
    pointer-events:     none;
    user-select:        none;
    -webkit-user-drag:  none;
}



.va-book__face--back {
    width:          var(--va-book-width,  360px);
    height:         var(--va-book-height, 540px);
    left:           50%;
    top:            50%;
    transform:      translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--va-book-depth, 50px) / 2));
    background:     linear-gradient(135deg, var(--va-book-spine-color, #1e293b), var(--va-book-spine-dark, #0f172a));
    border-radius:  4px 2px 2px 4px;
    box-shadow:     -10px 10px 50px rgba(0, 0, 0, 0.3),
                    inset 0 0 20px var(--va-book-spine-hl, rgba(255, 255, 255, 0.08));
}



.va-book__face--right {
    width:      calc(var(--va-book-depth, 50px) + 1px);
    height:     var(--va-book-height, 540px);
    left:       50%;
    top:        50%;
    transform:  translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--va-book-width, 360px) / 2));
    background: linear-gradient(90deg,
                    #e2e2e2 0%,
                    #f7f7f7 20%,
                    var(--va-book-page-color, #f0f0f0) 40%,
                    #f7f7f7 60%,
                    #e2e2e2 100%);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.12);
}



.va-book__face--left {
    width:              calc(var(--va-book-depth, 50px) + 1px);
    height:             var(--va-book-height, 540px);
    left:               50%;
    top:                50%;
    transform:          translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--va-book-width, 360px) / 2));
    background:         linear-gradient(180deg, var(--va-book-spine-color, #1e293b), var(--va-book-spine-dark, #0f172a));
    color:              #fff;
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    text-orientation:   mixed;
    writing-mode:       vertical-rl;
    padding:            24px 0;
    box-shadow:         inset 5px 0 14px rgba(0, 0, 0, 0.3);
}

.va-book__spine-title {
    font-weight:    700;
    font-size:      14px;
    white-space:    nowrap;
    letter-spacing: 0.1em;
}

.va-book__spine-author {
    font-weight:    400;
    font-size:      11px;
    color:          rgba(255, 255, 255, 0.65);
    white-space:    nowrap;
}



.va-book__face--top,
.va-book__face--bottom {
    width:      var(--va-book-width, 360px);
    height:     calc(var(--va-book-depth, 50px) + 1px);
    left:       50%;
    top:        50%;
    background: linear-gradient(90deg, #e2e2e2 0%, #f7f7f7 50%, #e2e2e2 100%);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.va-book__face--top {
    transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--va-book-height, 540px) / 2));
}

.va-book__face--bottom {
    transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--va-book-height, 540px) / 2));
}