/**
 * Bricks custom element: 3D Book (.fqp-book-3d)
 *
 * Mirrors the scastiel.dev/3dbook generator output exactly. The only
 * additions are the paper colors and the glow, which are exposed as
 * controls; every other value matches the generator's template 1:1.
 *
 *   .fqp-book-3d__stage  = .book-container
 *   .fqp-book-3d__book   = .book
 *   .fqp-book-3d__cover  = .book > :first-child
 *   .fqp-book-3d__pages  = .book::before
 *   .fqp-book-3d__back   = .book::after
 */

.fqp-book-3d {
	display: flex;
}

.fqp-book-3d__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: var(--fqp-book-perspective, 600px);
}

.fqp-book-3d__link {
	text-decoration: none;
	color: inherit;
}

.fqp-book-3d__book {
	width: var(--fqp-book-w, 200px);
	height: var(--fqp-book-h, 300px);
	position: relative;
	transform-style: preserve-3d;
	transform: rotateY(calc(-1 * var(--fqp-book-rotate, 30deg)));
	transition: var(--fqp-book-duration, 1s) ease;
	animation: 1s ease 0s 1 fqp-book-3d-in;
}

.fqp-book-3d__stage:hover .fqp-book-3d__book,
.fqp-book-3d__stage:focus .fqp-book-3d__book {
	transform: rotateY(calc(-1 * var(--fqp-book-rotate-hover, 0deg)));
}

/* Front cover — .book > :first-child */
.fqp-book-3d__cover {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--fqp-book-w, 200px);
	height: var(--fqp-book-h, 300px);
	display: block;
	object-fit: cover;
	transform: translateZ(calc(var(--fqp-book-thickness, 30px) / 2));
	background-color: var(--fqp-book-cover, #01060f);
	border-radius: 0 var(--fqp-book-radius, 2px) var(--fqp-book-radius, 2px) 0;
	box-shadow: var(--fqp-book-cover-shadow, 5px 5px 20px #666);
}

.fqp-book-3d__cover--placeholder {
	background-image: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.14) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 255, 255, 0.14) 50%,
		rgba(255, 255, 255, 0.14) 75%,
		transparent 75%
	);
	background-size: 16px 16px;
}

/* Page block — .book::before */
.fqp-book-3d__pages {
	position: absolute;
	left: 0;
	top: var(--fqp-book-pages-off, 1px);
	width: calc(var(--fqp-book-thickness, 30px) - 2px);
	height: calc(var(--fqp-book-h, 300px) - 2 * var(--fqp-book-pages-off, 1px));
	transform: translateX(
			calc(
				var(--fqp-book-w, 200px) - var(--fqp-book-thickness, 30px) / 2 -
					var(--fqp-book-pages-off, 1px)
			)
		)
		rotateY(90deg);
	background: linear-gradient(
		90deg,
		var(--fqp-book-paper, #fff) 0%,
		var(--fqp-book-paper-line, #f9f9f9) 5%,
		var(--fqp-book-paper, #fff) 10%,
		var(--fqp-book-paper-line, #f9f9f9) 15%,
		var(--fqp-book-paper, #fff) 20%,
		var(--fqp-book-paper-line, #f9f9f9) 25%,
		var(--fqp-book-paper, #fff) 30%,
		var(--fqp-book-paper-line, #f9f9f9) 35%,
		var(--fqp-book-paper, #fff) 40%,
		var(--fqp-book-paper-line, #f9f9f9) 45%,
		var(--fqp-book-paper, #fff) 50%,
		var(--fqp-book-paper-line, #f9f9f9) 55%,
		var(--fqp-book-paper, #fff) 60%,
		var(--fqp-book-paper-line, #f9f9f9) 65%,
		var(--fqp-book-paper, #fff) 70%,
		var(--fqp-book-paper-line, #f9f9f9) 75%,
		var(--fqp-book-paper, #fff) 80%,
		var(--fqp-book-paper-line, #f9f9f9) 85%,
		var(--fqp-book-paper, #fff) 90%,
		var(--fqp-book-paper-line, #f9f9f9) 95%,
		var(--fqp-book-paper, #fff) 100%
	);
}

/* Back cover — .book::after */
.fqp-book-3d__back {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--fqp-book-w, 200px);
	height: var(--fqp-book-h, 300px);
	transform: translateZ(calc(-1 * var(--fqp-book-thickness, 30px) / 2));
	background-color: var(--fqp-book-cover, #01060f);
	border-radius: 0 var(--fqp-book-radius, 2px) var(--fqp-book-radius, 2px) 0;
	box-shadow: -10px 0 var(--fqp-book-glow-blur, 50px) var(--fqp-book-glow-spread, 10px)
		var(--fqp-book-glow, #666);
}

@keyframes fqp-book-3d-in {
	0% {
		transform: rotateY(calc(-1 * var(--fqp-book-rotate-hover, 0deg)));
	}
	100% {
		transform: rotateY(calc(-1 * var(--fqp-book-rotate, 30deg)));
	}
}