.book-container{--float-duration:4s;--float-distance:-10px;--hover-duration:1s;--hover-easing:cubic-bezier(.34, 1.56, .64, 1);--hover-scale:1.1;--shadow-duration:.1s;--rim-intensity:.15;--rim-intensity-hover:.25;--rotate-y:-25deg;--rotate-x:5deg;perspective:1000px;justify-content:center;align-items:center;display:flex;position:relative}.book-clickable{cursor:pointer}.book-float-wrapper{animation:bookFloat var(--float-duration) ease-in-out infinite;transition:transform var(--hover-duration) var(--hover-easing)}.book-clickable:hover .book-float-wrapper{animation-play-state:paused}.book{width:180px;height:260px;transform-style:preserve-3d;transform:rotateY(var(--rotate-y)) rotateX(var(--rotate-x));transition:transform var(--hover-duration) var(--hover-easing);position:relative}.book-clickable:hover .book{transform:rotateY(0deg) rotateX(0deg) scale(var(--hover-scale))}.book-clickable:focus-visible{outline-offset:20px;border-radius:8px;outline:2px solid #ffffff4d}.book-cover{width:100%;height:100%;box-shadow:calc(-3px * var(--rim-intensity) / .15) 0 calc(15px * var(--rim-intensity) / .15) rgba(255, 255, 255, var(--rim-intensity)), calc(-1px * var(--rim-intensity) / .15) 0 calc(5px * var(--rim-intensity) / .15) rgba(255, 255, 255, calc(var(--rim-intensity) * .67)), 0 calc(-2px * var(--rim-intensity) / .15) calc(20px * var(--rim-intensity) / .15) rgba(255, 255, 255, calc(var(--rim-intensity) * .67)), calc(3px * var(--rim-intensity) / .15) 0 calc(10px * var(--rim-intensity) / .15) rgba(100, 100, 255, calc(var(--rim-intensity) * .67)), 0 0 calc(40px * var(--rim-intensity) / .15) rgba(255, 255, 255, calc(var(--rim-intensity) * .33));transition:box-shadow var(--shadow-duration) var(--hover-easing);background:linear-gradient(145deg,#0a0a0a 0%,#1a1a1a 50%,#0a0a0a 100%) 50%/cover;border-radius:2px 8px 8px 2px;justify-content:center;align-items:center;display:flex;position:absolute;overflow:hidden;transform:translateZ(15px)}.book-clickable:hover .book-cover{box-shadow:calc(-5px * var(--rim-intensity-hover) / .25) 0 calc(25px * var(--rim-intensity-hover) / .25) rgba(255, 255, 255, var(--rim-intensity-hover)), calc(-2px * var(--rim-intensity-hover) / .25) 0 calc(10px * var(--rim-intensity-hover) / .25) rgba(255, 255, 255, calc(var(--rim-intensity-hover) * .6)), 0 calc(-5px * var(--rim-intensity-hover) / .25) calc(35px * var(--rim-intensity-hover) / .25) rgba(255, 255, 255, calc(var(--rim-intensity-hover) * .6)), calc(5px * var(--rim-intensity-hover) / .25) 0 calc(15px * var(--rim-intensity-hover) / .25) rgba(100, 100, 255, calc(var(--rim-intensity-hover) * .6)), 0 0 calc(60px * var(--rim-intensity-hover) / .25) rgba(255, 255, 255, calc(var(--rim-intensity-hover) * .4))}.book-overlay{background:linear-gradient(#0000 0%,#0000004d 50%,#000000b3 100%);position:absolute;inset:0}.book-title{z-index:1;letter-spacing:8px;color:#fff;text-shadow:0 0 30px #ffffff4d,0 2px 10px #00000080;font-size:42px;font-weight:100;position:relative}.book-spine{width:30px;height:100%;transition:transform var(--hover-duration) var(--hover-easing);background:linear-gradient(90deg,#0a0a0a 0%,#1a1a1a 50%,#0a0a0a 100%);border-radius:2px 0 0 2px;position:absolute;transform:rotateY(90deg)translateZ(0)translate(-15px);box-shadow:inset 2px 0 10px #ffffff1a,inset -2px 0 10px #00000080}.book-clickable:hover .book-spine{transform:rotateY(90deg)translateZ(-5px)translate(-15px)}.book-pages{width:calc(100% - 10px);height:calc(100% - 4px);transition:transform var(--hover-duration) var(--hover-easing);background:linear-gradient(90deg,#1a1a1a 0%,#2a2a2a 3%,#1a1a1a 6%,#2a2a2a 9%,#1a1a1a 12%,#222 100%);border-radius:0 6px 6px 0;position:absolute;top:2px;right:0;transform:translateZ(-5px)}.book-clickable:hover .book-pages{transform:translateZ(-10px)}.book-shadow{filter:blur(10px);width:200px;height:30px;transition:all var(--shadow-duration) var(--hover-easing);background:radial-gradient(#0006 0%,#0000 70%);position:absolute;bottom:-40px;transform:rotateX(90deg)}.book-clickable:hover .book-shadow{opacity:.6;width:220px}@keyframes bookFloat{0%,to{transform:translateY(0)}50%{transform:translateY(var(--float-distance))}}