:root{--bounce-easing:cubic-bezier(0.175,0.885,0.32,1.275);--ease-in:cubic-bezier(0.2,0,0,1)}.cards{display:flex;flex-wrap:wrap;padding:20px;gap:20px}.card-container{position:relative;display:inline-block}.card-container .card-link{display:block;width:240px;height:300px;background:#fff;border-radius:16px;border:1px solid #ccc}.card-container .book{bottom:16px;left:16px;--book-width:160px;--book-height:192px;--book-cover-transform-rotate-Y:0deg;--book-transform-translate-Y:0px;--book-transform-translate-X:0px;--book-scale:0.25;--book-animation-duration:0.5s;--cover-easing:var(--bounce-easing);--x:calc(-1 * var(--book-width) / 2 * (1 - var(--book-scale)) + var(--book-transform-translate-X));--y:calc(var(--book-height) / 2 * (1 - var(--book-scale)) + var(--book-transform-translate-Y) - 16px)}.book:hover,.card-container:hover>.book{--book-animation-duration:0.5s;--book-cover-transform-rotate-Y:-35deg;--book-transform-translate-Y:-12px;--book-transform-translate-X:0px;--book-scale:0.25}.book{--book-cover-box-shadow:rgba(50,50,93,0.25) 0px 50px 100px -20px,rgba(0,0,0,0.3) 0px 30px 60px -30px,rgba(10,37,64,0.35) 0px -2px 6px 0px inset;position:absolute;perspective:500px;width:var(--book-width,200px);height:var(--book-width,240px);transform:translate3d(var(--x),var(--y),0) scale(var(--book-scale,.25));transition:transform var(--book-animation-duration) var(--ease-in),box-shadow var(--book-animation-duration) var(--ease-in)}.book .cover{transform-style:preserve-3d;transform-origin:left;transform:rotateY(var(--book-cover-transform-rotate-Y,0));transition:transform var(--book-animation-duration) var(--cover-easing);box-shadow:var(--book-cover-box-shadow)}.book .back,.book .cover{position:absolute;inset:0;width:100%;height:100%;background:#eee;border:1px solid #ccc;border-radius:16px}.book .back{transform-style:preserve-3d}.dialog{--dialog-overlay-bg:rgba(0,0,0,0);position:fixed;inset:0;background:var(--dialog-overlay-bg);transition:background .2s var(--ease-in) var(--dialog-overlay-delay,.2s)}.dialog .content{position:absolute;top:50%;left:50%;transform:translate3d(-50%,var(--dialog-content-translate-Y,-20%),0);opacity:var(--dialog-content-opacity,0);max-width:360px;width:100%;height:480px;background:#fff;border-radius:32px;transition:transform .4s var(--ease-in),opacity .4s var(--ease-in)}.dialog .book{top:50%;left:50%;--book-cover-box-shadow:rgba(50,50,93,0) 0px 50px 100px -20px,rgba(0,0,0,0) 0px 30px 60px -30px,rgba(10,37,64,0) 0px -2px 6px 0px inset;--book-width:160px;--book-height:192px;--book-cover-transform-rotate-Y:-180deg;--book-scale:1;--x:0;--y:-120%;--cover-easing:var(--ease-in);--book-animation-duration:0.4s}.dialog .book .back,.dialog .book .cover{border-left:1px solid rgba(0,0,0,0);border-top-left-radius:0;border-bottom-left-radius:0}