/* The books retain their own hover, reading and sorting transforms. */
.bookshelf-scene{--jerry-size:clamp(115px,12vw,170px);--tom-size:clamp(175px,18vw,245px);--book-lean:0deg;--jerry-push:0px;position:relative;max-width:1460px;margin:20px auto 0;padding-right:var(--jerry-size);padding-left:calc(var(--tom-size)*.91);border-bottom:1px solid #ffffff20}
.bookshelf-scene .album-shelf{position:relative;z-index:8;border-bottom:0;padding-top:85px}
.bookshelf-scene.is-ready .album-spine{rotate:var(--book-lean);transform-origin:50% 100%;transition:rotate .32s cubic-bezier(.2,.8,.3,1),transform .42s,box-shadow .42s}
.bookshelf-scene.is-pushing .album-spine,.bookshelf-scene.is-toppling .album-spine{transition:rotate 65ms linear,transform .42s,box-shadow .42s}
.book-push-control{position:absolute;left:0;bottom:calc(var(--tom-size)*-.055);z-index:7;width:var(--tom-size);height:var(--tom-size);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:3px;border-radius:35%;visibility:hidden}
.is-ready .book-push-control{visibility:visible}
.book-push-control:focus,.book-push-control:focus-visible{outline:none}
.tom-pose{position:absolute;inset:0;background:url('assets/tom-bookshelf-poses.png') 0 0 / 200% 100% no-repeat;pointer-events:none;transform-origin:50% 92%;transition:opacity .12s}
.tom-pose--push{background-size:185% 100%;opacity:0;rotate:var(--tom-lean,0deg);scale:1 var(--tom-squash,1);transition:opacity .12s,rotate .12s,scale .12s}
.tom-pose--rest{background-position:100% 0;clip-path:inset(0 0 0 12%);opacity:1}
.tom-cue{position:absolute;left:30%;bottom:100%;color:#c9bdab;white-space:nowrap;font-size:11px;letter-spacing:.03em;pointer-events:none;transition:opacity .2s}
.is-toppling .book-push-control{cursor:grabbing;transition:none}
.has-lean .tom-pose--rest,.is-toppling .tom-pose--rest{opacity:0}
.has-lean .tom-pose--push,.is-toppling .tom-pose--push{opacity:1}
.is-toppling .tom-cue,.is-pushing .tom-cue,.is-settling .tom-cue{opacity:0}
.bookshelf-scene .album-shelf.is-sorting .album-spine{rotate:0deg}
.jerry-control{position:absolute;z-index:6;right:calc(0px - var(--jerry-push));bottom:calc(var(--jerry-size)*-.065);width:var(--jerry-size);height:var(--jerry-size);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:3px;border-radius:40%;transition:right .4s ease;visibility:hidden}
.is-ready .jerry-control{visibility:visible}
.jerry-control:focus,.jerry-control:focus-visible{outline:none}
.is-pushing .jerry-control{cursor:grabbing;transition:none}
.jerry-pose{position:absolute;inset:0;background:url('assets/jerry-bookshelf-poses.png') 0 0 / 200% 100% no-repeat;pointer-events:none;transform-origin:50% 90%}
.jerry-pose--rest{background-position:100% 0;opacity:0;transition:opacity .25s}
.is-ready:not(.is-settling):not(.is-resting) .jerry-pose--push{animation:jerry-effort .34s ease-in-out infinite alternate}
.is-pushing .jerry-pose--push{animation-duration:.14s!important}
.is-resting .jerry-pose--push{opacity:0}
.is-resting .jerry-pose--rest{opacity:1;animation:jerry-breathe 2.8s ease-in-out infinite}
.is-resting .jerry-control{cursor:default;right:-12px}
.jerry-cue{position:absolute;z-index:9;bottom:calc(var(--jerry-size)*.94 + 6px);right:calc(0px - var(--jerry-push) + var(--jerry-size)*.45);transform:translateX(50%);padding:3px 6px;border-radius:3px;font-size:11px;line-height:1.5;letter-spacing:.04em;white-space:nowrap;color:#dfd5c5;background:#080808d9;opacity:0;transition:right .4s ease,opacity .15s;pointer-events:none}
.is-ready.has-lean .jerry-cue{opacity:1}
.is-pushing .jerry-cue{transition:opacity .15s}
.bookshelf-balance-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1460px;margin:18px auto 0;color:var(--muted);font-size:12px;line-height:1.6}
.balance-instruction{display:flex;align-items:center;gap:12px}
.balance-meter{display:inline-block;width:52px;height:2px;background:#ffffff24;overflow:hidden;flex:none}
.balance-meter i{display:block;width:100%;height:100%;background:var(--red);transform:scaleX(var(--balance-progress,0));transform-origin:left;transition:transform .1s}
.balance-replay{background:none;color:var(--fg);font:inherit;white-space:nowrap;padding:5px 0;border-bottom:1px solid #ffffff35}
.balance-replay[hidden]{display:none}
@keyframes jerry-effort{from{transform:translateX(0) rotate(-.4deg)}to{transform:translateX(-1px) rotate(.4deg)}}
@keyframes jerry-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.018)}}
@media(max-width:600px){
 .bookshelf-scene{--jerry-size:clamp(56px,14vw,84px);--tom-size:clamp(70px,18vw,105px);margin-top:0;padding-left:calc(var(--tom-size)*.91)}
 .bookshelf-scene .album-shelf{padding-top:45px;gap:28px 2px}
 .bookshelf-scene .album-spine{height:calc(var(--book-height)*.4px)}
 .bookshelf-scene .album-spine-title{font-size:8px;letter-spacing:-.03em}
 .bookshelf-scene .binding-label .album-spine-title,.bookshelf-scene .binding-band .album-spine-title{padding:5px 0;font-size:8px}
 .bookshelf-scene .binding-monograph .album-spine-title,.bookshelf-scene .binding-poster .album-spine-title{font-size:9px}
 .tom-cue{font-size:9px;left:0}
 .jerry-cue{font-size:9px;padding:2px 4px}
 .tom-cue{bottom:105%}
 .bookshelf-balance-caption{font-size:11px;gap:10px}
 .balance-instruction{gap:8px}.balance-meter{width:26px}
}
@media(prefers-reduced-motion:reduce){
 .bookshelf-scene .album-spine,.jerry-control,.jerry-pose,.balance-meter i,.book-push-control,.tom-pose{transition:none!important;animation:none!important}
}
