/* ==========================================
   FLOOR MONTHLY BOOK PILE
========================================== */

.mpp-floor-book-pile {
	position: absolute;
	left: 4%;
	bottom: 3%;
	width: 14%;
	height: 25%;
	z-index: 30;
	pointer-events: none;
}

.mpp-floor-book {
	appearance: none;
	position: absolute;

	left: 0;
	bottom: calc(var(--mpp-stack-index) * 5%);

	width: 72%;
	margin: 0;

	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	padding: 0 !important;

	cursor: pointer;
	pointer-events: auto;

	transform:
		translateX(
			calc(
				(var(--mpp-stack-index) % 2) * 2px - 1px
			)
		)
		rotate(
			calc(
				(var(--mpp-stack-index) % 3 - 1) * 0.45deg
			)
		);

	transform-origin: center bottom;

	filter: drop-shadow(0 5px 5px rgb(46 37 31 / 24%));

	transition:
		transform 180ms ease,
		filter 180ms ease;
}

.mpp-floor-book:nth-child(1) {
	transform: translateX(0px) rotate(-0.8deg);
}

.mpp-floor-book:nth-child(2) {
	transform: translateX(-1px) rotate(0.4deg);
}

.mpp-floor-book:nth-child(3) {
	transform: translateX(2px) rotate(-0.3deg);
}

.mpp-floor-book:nth-child(4) {
	transform: translateX(-2px) rotate(0.7deg);
}

.mpp-floor-book:nth-child(5) {
	transform: translateX(1px) rotate(-0.5deg);
}

.mpp-floor-book:nth-child(6) {
	transform: translateX(-1px) rotate(0.2deg);
}

.mpp-floor-book img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

.mpp-floor-book:hover,
.mpp-floor-book:focus,
.mpp-floor-book:focus-visible {
	background: transparent !important;
	background-color: transparent !important;

	z-index: 20;
	outline: none;

	transform:
		translateX(
			calc(
				(var(--mpp-stack-index) % 2) * 2px - 1px
			)
		)
		translateY(-7px)
		rotate(
			calc(
				(var(--mpp-stack-index) % 3 - 1) * 0.45deg
			)
		);

	filter: drop-shadow(0 9px 8px rgb(46 37 31 / 30%));
}

/* ==========================================
   ACTIVE DESK BOOK — SAVED PAGE PREVIEW
========================================== */

.mpp-active-desk-book {
	position: absolute;
}

.mpp-active-desk-book__base {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================
   DESK BOOK PAGE CONTAINERS
========================================== */

.mpp-active-desk-book__left-page,
.mpp-active-desk-book__right-page {
	position: absolute;
	overflow: hidden;
	pointer-events: none;
}

/* Left page */

.mpp-active-desk-book__left-page {
	top: 10%;
	left: 14%;

	width: 38%;
	height: 68%;

	transform: perspective(500px) rotateY(6deg);
	transform-origin: center;
}

/* Right page */

.mpp-active-desk-book__right-page {
	top: 13.5%;
	left: 48.5%;

	width: 38%;
	height: 68%;

	transform: perspective(500px) rotateY(-6deg);
	transform-origin: center;
}

/* ==========================================
   LEFT PAGE — CREATION
========================================== */

.mpp-active-desk-book__creation-frame {
	position: relative;

	box-sizing: border-box;
	width: 68%;
	aspect-ratio: 1 / 1;
	margin: 16% auto 0;
	padding: 5%;

	border: 1px solid rgb(79 71 65 / 18%);
	border-radius: 3px;
	background: #fcf7f1;

	box-shadow:
		0 1px 2px rgb(79 71 65 / 14%);

	overflow: visible;
}

.mpp-active-desk-book__creation {
	display: block;

	width: 100%;
	height: 100%;

	margin: 0;

	border-radius: 2px;
	object-fit: cover;
	object-position: center;

	pointer-events: none;
}

.mpp-active-desk-book__creation-empty {
	display: flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 8%;

	border-radius: 2px;

	background:
		linear-gradient(
			135deg,
			rgb(239 229 217 / 36%),
			rgb(252 247 241 / 70%)
		);

	color: rgb(79 71 65 / 58%);
	font-family: "Montserrat", sans-serif;
	font-size: 7px;
	font-weight: 400;
	line-height: 1.35;
	text-align: center;
}

.mpp-active-desk-book__completion-stamp {
	position: absolute;
	z-index: 3;

	right: -10%;
	bottom: -13%;

	display: block;
	width: 34%;
	height: auto;

	transform: rotate(-8deg);
	transform-origin: center;

	pointer-events: none;
}

/* ==========================================
   RIGHT PAGE — PROMPT ARTWORK
========================================== */

.mpp-active-desk-book__spread {
	display: block;

	width: 68%;
	height: auto;

	margin: 8% auto 0;

	pointer-events: none;
}