@keyframes book-volume-arrive{0%{transform:rotateY(-22deg)}to{transform:rotateY(-5deg)}}.book-showcase{--book-depth:12px;perspective:1300px;transform:translateX(calc(var(--book-depth) / -2));justify-content:center;align-items:center;display:flex}.book-volume{aspect-ratio:225/325;height:16rem;transform-style:preserve-3d;will-change:transform;transition:transform .9s cubic-bezier(.22,1,.36,1);animation:.85s cubic-bezier(.22,1,.36,1) book-volume-arrive;display:block;position:relative;transform:rotateY(-5deg)}.group:hover .book-volume,.book-showcase:focus-visible .book-volume{transform:rotateY(-22deg)}.book-volume__cover{z-index:2;border:1.5px solid color-mix(in srgb, var(--foreground) 5%, transparent);object-fit:cover;width:100%;height:100%;transform:translateZ(var(--book-depth));backface-visibility:hidden;border-radius:2px 6px 6px 2px;position:absolute;inset:0}.book-volume:before{z-index:1;top:5px;left:calc(100% - var(--book-depth));width:calc(var(--book-depth) * 2);content:"";background:repeating-linear-gradient(90deg,#fff 0 3px,#e8e5dc 3px 4px,#faf9f5 4px 7px);height:calc(100% - 10px);position:absolute;transform:rotateY(90deg)}.book-volume:after{z-index:0;content:"";transform:translateZ(calc(var(--book-depth) * -1));background:#c8c3b8;border:1px solid #aaa69c;border-radius:2px 6px 6px 2px;position:absolute;inset:2px -6px 0 0;box-shadow:-12px 6px 32px #00000040}@media (width>=40rem){.book-volume{height:18rem}}