body .has-mouse {
	display: none !important;
}

body.has-mouse .has-mouse {
	display: initial !important;
}

.bookcase-ui {
	background: var(--light-gray);
	@media (prefers-color-scheme: dark) {
		background: var(--dark-gray);	
	}
	position: sticky;
	z-index: 140;
	top: 0;
	left: 0;
	
	user-select: none;
	-webkit-user-select: none;

	font-family: var(--font-selectric-un);
	line-height: 1.2;
	letter-spacing: .03em;
	font-size: var(--figcaption-font-size);
	
	padding-top: calc(var(--margin) / 2);
	padding-bottom: calc(var(--margin) / 2);
	padding-left: var(--margin);
	padding-right: var(--margin);
	margin-bottom: 0;	
	width: 100vw;
	box-sizing: border-box;
	
	display: flex;
	flex-direction: row;
	gap: calc(var(--margin) / 2);
	
	&.is-loading * {
		visibility: hidden;
	}
	&.is-loading:after {
		inset: 0;
		position: absolute;
		background: var(--light-gray);
		content: 'Loading…'; 
	
		font-family: var(--font-selectric-un);
		line-height: 25px;
		letter-spacing: .03em;
		font-size: var(--figcaption-font-size);
		display: flex;
		
		align-items: center;
		padding-left: var(--margin);
	
		z-index: 1000;
	}

	
	input[type="checkbox"] {
		display: none;
	}
	
	.text {
		padding: 3px 0 1px 0;
		border: .5px solid transparent;		
		line-height: 25px;
	}
	
	label:first-of-type {
		margin-left: auto;
	}
	
	label {
		border: .5px solid var(--text-gray);
		padding: 3px 16px 1px 16px;
		&:has(.key) {
			padding-right: 12px;
		}
		
		margin-bottom: -.5px;
		color: var(--text-gray);
		display: inline-block;
		font-size: var(--figcaption-font-size); 
		letter-spacing: .03em;
		line-height: 25px;
		font-family: var(--font-selectric-un);
		user-select: none;
		-webkit-user-select: none;

		cursor: var(--cursor-hand);

		.key {
			margin-left: calc(var(--margin) / 4);
			color: inherit;
			border-color: var(--text-gray) !important;
		}
		
		&:active:not(:disabled) {
			cursor: var(--cursor-hand-pressed);
			padding-top: 4px;
			padding-bottom: 0;
		}
	  &:has(input:checked) {
			background: var(--accent);
			border-color: var(--accent);
			color: var(--background);
			.key {
				border-color: var(--light-gray) !important;
				
				@media (prefers-color-scheme: dark) {
					border-color: var(--dark-gray) !important;	
				}
				
			}
		}
		
		
	}
}

.loupe {
	width: 400px;
	height: 400px;
	left: 0;
	top: 0;
	
	pointer-events: none;
	position: absolute;
	z-index: 200;
	
	opacity: 0;
	transition: opacity 150ms;

	.loupe-outside {
		outline: 0 solid white;
	}
	
	&.visible {
		transition: opacity 300ms;
		opacity: 1;
		
		.loupe-outside {
			outline: 8px solid var(--accent);
		}
	}
	
	&.below:not(.horizontal):not(.slanted) {
		.loupe-outside {
			--vertical-adjustment: 150px;			
		}
	}
	&.below.slanted {
		.loupe-outside {
			--vertical-adjustment: 150px;			
			--horizontal-adjustment: 75px;
			
			.loupe-inside {
				left: -190px;
				top: -75px;
			}			
		}		
	}


	.loupe-outside {
		width: 150px;
		height: 400px;
		position: absolute;
		
		overflow: clip;
		
		border-radius: 150px;

		transition: rotate var(--bezier) 650ms, top var(--bezier) 650ms, left var(--bezier) 650ms, outline 500ms;
		
		--vertical-adjustment: -150px;
		--horizontal-adjustment: calc((400px - 150px) / 2); /* 125px */

		
		left: var(--horizontal-adjustment);
		top: var(--vertical-adjustment);

		.loupe-inside {
			transition: rotate var(--bezier) 650ms, top var(--bezier) 650ms, left var(--bezier) 650ms;

			width: 200vw;
			height: 310vw;
			
			
			left: calc(-1 * var(--horizontal-adjustment));
			top: calc(-1 * var(--vertical-adjustment));
			position: absolute;
			
			transform-origin: 0 0;
		}
	}	

	&.horizontal {
		.loupe-outside {
			rotate: z 90deg;

			--horizontal-adjustment: calc((400px - 150px) / 2);
			--vertical-adjustment: -50px;

			.loupe-inside {
				rotate: z -90deg;
				left: -75px;
				top: 400px;
				
			}
		}
	}

	&.slanted {
		.loupe-outside {
			rotate: z 20deg;
			
			--vertical-adjustment: -150px;
			--horizontal-adjustment: 175px;
		
			.loupe-inside {
				rotate: z -20deg;
				left: -175px;
				top: 250px;			
			}
		}
	}
}



.book-details-center,
.book-details-left,
.book-details-right {
	--width: 300px;
	
	z-index: 200;
	position: fixed;
	top: 50%;
	left: 0;
	min-width: var(--width);
	width: min-content;
	background: var(--background);
	


	font-family: var(--font-selectric-un);
	line-height: 1.2;
	letter-spacing: .03em;
	font-size: var(--figcaption-font-size);
	
	padding: var(--margin);
	padding-top: 0; /* Moved to book to avoid cropping on carousels */
	@media (width > 767px) {
	  padding-right: calc(2 * var(--margin));
	}
	@media (width <= 767px) {
		padding-bottom: calc(3 * var(--margin));
	}
	
	
	box-sizing: border-box;
	background: var(--light-gray);
	@media (prefers-color-scheme: dark) {
		background: var(--dark-gray);
	}

	display: flex;
	flex-direction: column;

	&.book-details-center {
		&.no-transition {
			transition: none !important;
		}
		top: 0;
		transform-origin: 50% 100%;
		transform: translate(calc(50vw - 50%), 100vh);
		transition: transform 250ms var(--bezier);
		/* opacity: 0;*/
		pointer-events: none; 
	
		&.visible {
			transform: translate(calc(50vw - 50%), calc(50vh - 50%));
			transition: transform 500ms var(--bezier);
			pointer-events: auto; 
		}
	}


	&.book-details-right {
		transition: transform 250ms var(--bezier);
		transform: translate(calc(100vw + var(--margin) * 2), -50%);
	
		&.visible {
			transition: transform 500ms var(--bezier);
			transform: translate(calc(100vw - 100% - var(--margin) / 2), -50%);
		}
	}
	
	&.book-details-left {
		transition: transform 250ms var(--bezier);
		transform: translate(calc(-2 * var(--margin) - 100%), -50%);
		
		&.visible {
			transition: transform 500ms var(--bezier);
			transform: translate(calc(var(--margin) / 2), -50%);	
		}
				
	}

	
	.book {
			padding-top: var(--margin);
		
		.cover {
			margin-bottom: 1em;
			display: inline-block;
			width: fit-content;
			position: relative;
			
			background: white;
	
			
			img {
				display: block;
				box-sizing: border-box;
				outline: .5px solid var(--text-gray);
				
				&.loading {
					opacity: 0;
				}
			}
			
			.pages {
				position: absolute;
				pointer-events: none;
				inset: 0;
				z-index: -1;
			
				&:before {
					--bk: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEsBAMAAADwfsTmAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMAIEBggJqGzMgAAACDSURBVHicbVGJEcAgCGOEjMAIjtD9p6qHPIktPU8MCU8x24b9WRyj+5gLhmaf1wrfg1Web69UyByIY4J7Ykg1Osa60hix0PXQCM9wv7yzTa1/NtdVW42j79UZ+O/wjFphZoEoQSqTbpAxvzj/fetuxnS/33jtTjsFTWzUPaiKZpi9PC+9GgvxvranBAAAAABJRU5ErkJggg==');
					
					position: absolute;
					content: '';
					top: calc(-1 * var(--depth));
					width: calc(100% + var(--depth));
					height: var(--depth);
					left: var(--depth);
					
					transform: translateX(calc(-1 * var(--depth)));				
					
					background: white var(--bk);
					background-size: 2px 40px;
					background-repeat: repeat;
					
					clip-path: polygon(var(--depth) 0, 100% 0 , calc(100% - var(--depth)) 100%, 0 100%);
				}
				&:after {
					--bk: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAABBAMAAACWFo4aAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMAIEBggJqGzMgAAABUSURBVHjaBcEBEQNBDAOx3UwB2PcELo+g5U+uElQErmh48jrvoewOnfWWlh3GHK2VJt7pbWKVBfiu64+QQ6UZjPRq0r69YhVDoAIBx7KTcC1Ajp8/1BsF6OH0cxAAAAAASUVORK5CYII='); 
					
					position: absolute;
					content: '';
					right: calc(-1 * var(--depth));
					top: calc(-1 * var(--depth));
					height: calc(100% + var(--depth));
					width: var(--depth);
	
					background: white var(--bk);
					background-size: 40px 2px;
					background-repeat: repeat;
	
					clip-path: polygon(0 var(--depth), 100% 0, 100% calc(100% - var(--depth)), 0 100%);
				}			
			}
		}
		
		.series {
			color: var(--text-gray);
		}
		.commentary {
			margin-top: 1em;
		}
		.beloved-text {
			margin-top: calc(1em + 28px);			
			position: relative;
			
			&:before {
				content: '';
				position: absolute;
				left: -4px;
				top: -28px;
				width: 24px;
				height: 24px;
				background: var(--text);
				mask-position: 50% 50%;
				mask-repeat: no-repeat;
				mask-image: url(ui/buttons/love.svg);
			}
		}
		.author {
			margin-top: 1em;
		}	
		
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			margin-top: 1em;
			margin-bottom: -.3em;
			
			&:empty {
				display: none;
			}
		}

    &, ul, li {		
			cursor: var(--cursor);
			&:not(:disabled):active {
				cursor: var(--cursor-pressed);	
			}
		}

	}
	
	button {
		appearance: none;
		-webkit-appearance: none;
		border: none;
		background: none;
		position: absolute;
		@media (width > 767px) {
			top: 0;
			right: 0;
		}
	  @media (width <= 767px) {
			bottom: 0;
		}
		width: 56px;
		height: 56px;

		&:active {
			border-top: 3px solid transparent;
			height: 59px;
		}
		&:after {
			content: '';
			z-index: 1;
			display: block;
			position: absolute;
			inset: 0;
			background: var(--text);
			mask-position: 50% 50%;
			mask-repeat: no-repeat;
		}
		
		&.close {
			@media (width > 767px) {
				top: 0;
			}			
			@media (width <= 767px) {
				left: calc(50% - 56px / 2);
			}
			&:after {
				mask-image: url(ui/buttons/close.svg);		
			}
		}
		&.previous {
			@media (width > 767px) {
				top: 56px;
			}
			@media (width <= 767px) {
				left: 0;
			}
			&:after {
				mask-image: url(ui/buttons/arrow-left.svg);		
			}
		}
		&.next {
			@media (width > 767px) {
				top: 104px;
			}
			@media (width <= 767px) {
				right: 0;
			}
			&:after {
				mask-image: url(ui/buttons/arrow-right.svg);		
			}
		}
	}
}


.bookcase {
	position: relative;
	
	margin-top: 0;
	
	contain: strict;
	overflow: clip;
	
	&.loupe-visible {
		--cursor-light: -webkit-image-set(url(ui/cursors/cursor-huge.png) 2x) 3 6, default;
		--cursor-light-pressed: -webkit-image-set(url(ui/cursors/cursor-pressed-huge.png) 2x) 3 6, default;

		--cursor-hand-light: -webkit-image-set(url(ui/cursors/hand-huge.png) 2x) 15 3, pointer;
		--cursor-hand-light-pressed: -webkit-image-set(url(ui/cursors/hand-pressed-huge.png) 2x) 15 3, pointer;
	}
	
	& {
		cursor: var(--cursor-light);	
	}
	&:active {
		cursor: var(--cursor-light-pressed);	
	}
	&.on-book {
		cursor: var(--cursor-hand-light);	
	}
	&.on-book:active {
		cursor: var(--cursor-hand-light-pressed);	
	}
	
	&.is-loading * {
		display: none;
	}
	&.is-loading:after {
		inset: 0;
		position: absolute;
		background: var(--light-gray);
		content: '';

		z-index: 1000;
	}
	
	.bookcase-regular,
	.bookcase-hovered,
	.bookcase-hovered-layered,
	.bookcase-no-layers,
	.bookcase-no-plants,
	.bookcase-detailed,
	.bookcase-detailed-layered {
		background: transparent;
		position: absolute;
		inset: 0;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
		-webkit-touch-callout: none; 
		-webkit-user-select: none;
		user-select: none;			
		
		overflow: hidden;
	}
	
	.bookcase-hovered,
	.bookcase-hovered-layered,
	.bookcase-no-layers,
	.bookcase-no-plants,
	.bookcase-detailed,
	.bookcase-detailed-layered {
		pointer-events: none;
	}
	
	.bookcase-no-layers,
	.bookcase-no-plants {
		.inside {
			opacity: 0;
			transition: opacity 1000ms;
		}
		&.visible {
			.inside {
				transition: opacity 300ms;
				opacity: 1;
			}
		}
	}
	
	.bookcase-hovered,
	.bookcase-hovered-layered,
	.bookcase-detailed,
	.bookcase-detailed-layered {		
		.inside {
			opacity: 0;
			transition: opacity 300ms;
		}
		&.visible {
			.inside {
				opacity: 1;
			}
		}			
	}

	
	.bookcase-no-layers, 
	.bookcase-no-plants {
		z-index: 10;
		will-change: left, top, opacity, mask;
	}
	
	.bookcase-hovered, 
	.bookcase-hovered-layered {
		z-index: 100;
		.inside:after {
			inset: 0;
			position: absolute;
			content: '';
			background: var(--accent);
			mix-blend-mode: screen;
			opacity: .25;
		}
	}
	
	.bookcase-detailed,
	.bookcase-detailed-layered {
		z-index: 120;
		.inside:after {
			inset: 0;
			position: absolute;
			content: '';
			background: var(--accent);
			mix-blend-mode: screen;
			opacity: .8;
		}
	}
	
	.inside {
		position: absolute;
		inset: 0;
		
		pointer-events: none;
		background-size: 100% 100%;
		will-change: transform, opacity;
	}
	[data-masked] .inside {
		left: 0;
		top: 0;
		width: 200%; /* opposite of 50% */
		height: 333%; /* opposite of 30% */
		will-change: transform, opacity;
	}
		
	[data-masked='0-0'] {
		mask-image: radial-gradient(ellipse at 50% 50%, white 30%, transparent 35%);
		mask-position: 66% 50%;
		mask-size: 400% 200%;
		mask-repeat: no-repeat;
		
		transform: translate(0, 0);

		left: 0;
		top: 0;
		right: 50%;
		bottom: auto;
		height: 30%;
	}
	[data-masked='0-1'] {
		mask-image: radial-gradient(ellipse at 50% 50%, white 30%, transparent 35%);
		mask-position: 66% 50%;
		mask-size: 400% 200%;
		mask-repeat: no-repeat;
				
		.inside {
			transform: translate(0, -18%);
		}

		transform: translate(0, 60%);
		
		left: 0;
		right: 50%;
		top: 0;
		height: 30%;
		bottom: auto;
	}
	[data-masked='0-2']  {
		mask-image: radial-gradient(ellipse at 50% 50%, white 30%, transparent 35%);
		mask-position: 66% 50%;
		mask-size: 400% 200%;
		mask-repeat: no-repeat;
		
		.inside {
			transform: translate(0, -36.5%);
		}
		
		transform: translate(0, 121.66%);
		
		left: 0;
		right: 50%;
		top: 0;
		/* top: 36.5%; */
		height: 30%;
		bottom: auto;		
	}
	[data-masked='0-3']  {
		mask-image: radial-gradient(ellipse at 50% 50%, white 30%, transparent 35%);
		mask-position: 66% 50%;
		mask-size: 400% 200%;
		mask-repeat: no-repeat;
		
		.inside {
			transform: translate(0, -54%);
		}

		transform: translate(0, 180%);
		
		left: 0;
		right: 50%;
		top: 0;
		/* top: 54%; */
		height: 30%;
		bottom: auto;		 

	}

	[data-masked='1-0'] {
		mask-image: radial-gradient(ellipse at 50% 50%, white 30%, transparent 35%);
		mask-position: 33% 50%;
		mask-size: 400% 200%;
		mask-repeat: no-repeat;
		
		.inside {
			transform: translate(-50%, 0);
		}
		
		transform: translate(100%, 0);

		left: 0;
		right: 50%;
		top: 0;
		bottom: auto;
		height: 30%;

	}
	[data-masked='1-1'] {
		mask-image: radial-gradient(ellipse at 50% 50%, white 30%, transparent 35%);
		mask-position: 33% 50%;
		mask-size: 400% 200%;
		mask-repeat: no-repeat;
		
		.inside {
			transform: translate(-50%, -18%);
		}
		
		transform: translate(100%, 60%);
		
		left: 0;
		right: 50%;
		top: 0;
		height: 30%;
		bottom: auto;
	}
	[data-masked='1-2']  {
		mask-image: radial-gradient(ellipse at 50% 50%, white 30%, transparent 35%);
		mask-position: 33% 50%;
		mask-size: 400% 200%;
		mask-repeat: no-repeat;
		
		.inside {
			transform: translate(-50%, -39.5%);
		}
		
		transform: translate(100%, 131.66%);

		left: 0;
		right: 50%;
		top: 0;
		height: 30%;
		bottom: auto;
	}
	[data-masked='1-3']  {
		mask-image: radial-gradient(ellipse at 50% 50%, white 30%, transparent 35%);
		mask-position: 33% 50%;
		mask-size: 400% 200%;
		mask-repeat: no-repeat;
		
		.inside {
			transform: translate(-50%, -54%);
		}
		
		transform: translate(100%, 180%);

		left: 0;
		right: 50%;
		top: 0;
		height: 30%;
		bottom: auto;		 

	}
	[data-masked='1-4']  {
		mask-image: radial-gradient(ellipse at 50% 50%, white 30%, transparent 35%);
		mask-position: 33% 50%;
		mask-size: 400% 200%;
		mask-repeat: no-repeat;
		
		.inside {
			transform: translate(-50%, -70%);
		}
		
		transform: translate(100%, 233.33%);
		
		left: 0;
		right: 50%;
		top: 0;
		height: 30%;
		bottom: auto;		 

	}

	.beloved-highlight {
		position: absolute;
		inset: 0;
		background: black;
		z-index: 1;
		pointer-events: none;
		filter: 
			drop-shadow(2px 0px 0px #ffffff)
			drop-shadow(-2px 0px 0px #ffffff)
			drop-shadow(0px 2px 0px #ffffff)
			drop-shadow(0px -2px 0px #ffffff);
	}
	
	.temp {
		position: absolute;
		inset: 0;
		background: red;
		opacity: .75;
		z-index: 1;
		pointer-events: none;
		backdrop-filter: saturate(0%) contrast(50%);
	}
	
	.temp-sort {
		position: absolute;
		color: white;
		z-index: 2;
		pointer-events: none;
		font-size: 10px;
	}
	
	.beloved {
		position: absolute;
		z-index: 120;
		text-align: center;
		pointer-events: none;
		
		transition: opacity 1s;
		
		&.hide-layered {
			opacity: 0;
		}
		
		
		@media (width <= 767px) {
		  scale: .5;
			transform: translateY(20%);
		}
		
		filter: drop-shadow(0 0 3px black);
		
		.beloved-inner {
			display: block;
			position: absolute;
			inset: 0;
			z-index: 3;
			
			opacity: .8;

			animation: pulse-size 4s ease-in-out infinite;
			
			&:after {
				content: '';
				position: absolute;
				inset: 0;
				background: var(--background-light);
				mask-position: 50% 50%;
				mask-repeat: no-repeat;
				mask-image: url(ui/buttons/love.svg);
			}
			
			&:before {
				content: '';
				position: absolute;
				inset: 0;
				background: var(--background-light);
				mask-position: 50% 50%;
				mask-repeat: no-repeat;
				mask-image: url(ui/buttons/love-filled.svg);
				animation: pulse-opacity 4s ease-in-out infinite;
			}
		}
	}
	
	&.beloved-hidden {
		.beloved {
			opacity: 0;
		}
	}
}

@keyframes pulse-opacity {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

@keyframes pulse-size {
	0%, 100% {
		scale: 1;
	}
	50% {
		scale: .9;
	}
}