/* ==========================================
   PAGE COMPLETE CELEBRATION
========================================== */

.mpp-book-viewer__celebration {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
	width: 100%;
	padding: clamp(72px, 8vh, 120px) 5% 34px;

	text-align: center;
	overflow: visible;

	animation:
		mppCelebratePanel
		1.1s
		ease-out
		both;
}

.mpp-book-viewer__celebration[hidden] {
	display: none !important;
}

.mpp-book-viewer__celebration-heading {
	margin: 0 0 16px;

	color: #4f4741;
	font-family: "Playfair Display", serif;
	font-size: clamp(24px, 1.8vw, 34px);
	font-weight: 500;
	line-height: 1.1;
	white-space: nowrap;

	animation:
		mppCelebrationTextReveal
		1s
		ease-out
		0.25s
		both;
}

.mpp-book-viewer__celebration-intro {
	max-width: 320px;
	margin: 0 0 20px;

	color: #4f4741;
	font-family: "Montserrat", sans-serif;
	font-size: clamp(14px, 1vw, 18px);
	font-weight: 400;
	line-height: 1.55;

	animation:
		mppCelebrationTextReveal
		1s
		ease-out
		0.4s
		both;
}

.mpp-book-viewer__celebration-image {
	display: block;
	width: min(320px, 86%);
	height: auto;
	margin: 0 auto 10px;
	object-fit: contain;

	filter:
		drop-shadow(
			0 10px 16px
			rgb(79 71 65 / 12%)
		);

	animation:
		mppRewardReveal
		1.8s
		cubic-bezier(.2, .75, .25, 1)
		0.55s
		both;
}

.mpp-book-viewer__celebration-image[hidden] {
	display: none !important;
}

.mpp-book-viewer__celebration-title {
	margin: 0 0 18px;

	color: #4f4741;
	font-family: "Playfair Display", serif;
	font-size: clamp(20px, 1.35vw, 27px);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;

	animation:
		mppCelebrationTextReveal
		1s
		ease-out
		0.9s
		both;
}

.mpp-book-viewer__celebration-message {
	max-width: 300px;
	margin: 0 0 24px;

	color: #4f4741;
	font-family: "Montserrat", sans-serif;
	font-size: clamp(13px, 0.9vw, 17px);
	font-weight: 400;
	line-height: 1.55;
	text-align: center;

	animation:
		mppCelebrationTextReveal
		1s
		ease-out
		1.05s
		both;
}

.mpp-book-viewer__celebration-continue {
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 10px 20px !important;

	border: 0 !important;
	border-radius: 6px;
	background: #9ba584 !important;
	color: #ffffff !important;

	box-shadow:
		0 6px 14px
		rgb(79 71 65 / 12%) !important;

	font-family: "Montserrat", sans-serif;
	font-size: clamp(12px, 0.85vw, 14px);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;

	cursor: pointer;

	animation:
		mppCelebrationTextReveal
		1s
		ease-out
		1.2s
		both;

	transition:
		background-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.mpp-book-viewer__celebration-continue:hover,
.mpp-book-viewer__celebration-continue:focus,
.mpp-book-viewer__celebration-continue:focus-visible {
	background: #879170 !important;
	color: #ffffff !important;
	border: 0 !important;

	box-shadow:
		0 8px 18px
		rgb(79 71 65 / 18%) !important;

	outline: none;
	transform: translateY(-1px);
}

.mpp-book-viewer__celebration-continue:active {
	background: #7d8768 !important;
	color: #ffffff !important;
	border: 0 !important;

	box-shadow:
		0 4px 10px
		rgb(79 71 65 / 12%) !important;

	outline: none;
	transform: translateY(0);
}

/* ==========================================
   PAGE COMPLETE SPARKLES
========================================== */

.mpp-book-viewer__celebration::before,
.mpp-book-viewer__celebration::after {
	content: "✦";
	position: absolute;
	z-index: 4;

	color: #d5bd73;
	opacity: 0;
	pointer-events: none;

	transform: translateY(4px);

	will-change:
		opacity,
		filter,
		transform;
}

/* First sparkle cluster */

.mpp-book-viewer__celebration::before {
	top: 36%;
	left: 27%;

	font-size: 20px;

	text-shadow:
		72px -22px 0 #e6d49a,
		142px 14px 0 #cdb56d,
		28px 82px 0 #eadca8,
		164px 104px 0 #d8c27d,
		98px 142px 0 #f0e3b4;

	animation:
		mppSparkleClusterOne
		7s
		ease-in-out
		0.8s
		both;
}

/* Second sparkle cluster */

.mpp-book-viewer__celebration::after {
	top: 43%;
	left: 34%;

	font-size: 14px;

	text-shadow:
		92px -38px 0 #f0e3b4,
		168px 10px 0 #d8c27d,
		-18px 54px 0 #e5d095,
		128px 88px 0 #cdb56d,
		48px 126px 0 #eadca8,
		174px 146px 0 #e2ce8e;

	animation:
		mppSparkleClusterTwo
		7.8s
		ease-in-out
		1.25s
		both;
}

/* ==========================================
   COMPLETION STAMP ANIMATION
========================================== */

.mpp-page-completion-stamp:not([hidden]) {
	animation:
		mppCompletionStampReveal
		2.6s
		cubic-bezier(.22, .75, .28, 1)
		both;
}

.mpp-page-completion-stamp:not([hidden]) img {
	animation:
		mppCompletionStampGlow
		3.4s
		ease-in-out
		0.5s
		both;
}

/* ==========================================
   ANIMATION KEYFRAMES
========================================== */

@keyframes mppCelebratePanel {
	0% {
		opacity: 0;

		transform:
			translateX(-50px)
			translateY(20px);
	}

	100% {
		opacity: 1;

		transform:
			translateX(-50px)
			translateY(0);
	}
}

@keyframes mppCelebrationTextReveal {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes mppRewardReveal {
	0% {
		opacity: 0;

		transform:
			translateY(12px)
			scale(0.84);

		filter:
			drop-shadow(
				0 0 0
				rgb(216 194 125 / 0%)
			);
	}

	55% {
		opacity: 1;

		transform:
			translateY(0)
			scale(1.04);

		filter:
			drop-shadow(
				0 0 18px
				rgb(216 194 125 / 34%)
			);
	}

	100% {
		opacity: 1;

		transform:
			translateY(0)
			scale(1);

		filter:
			drop-shadow(
				0 10px 16px
				rgb(79 71 65 / 12%)
			);
	}
}

@keyframes mppSparkleClusterOne {
	0% {
		opacity: 0;

		filter:
			drop-shadow(
				0 0 0
				rgb(255 244 190 / 0%)
			);

		transform: translateY(4px);
	}

	18% {
		opacity: 0.42;

		filter:
			drop-shadow(
				0 0 5px
				rgb(255 244 190 / 45%)
			);

		transform: translateY(2px);
	}

	36% {
		opacity: 0.9;

		filter:
			drop-shadow(
				0 0 10px
				rgb(255 244 190 / 80%)
			);

		transform: translateY(0);
	}

	52% {
		opacity: 0.48;

		filter:
			drop-shadow(
				0 0 5px
				rgb(255 244 190 / 40%)
			);

		transform: translateY(-1px);
	}

	69% {
		opacity: 0.95;

		filter:
			drop-shadow(
				0 0 12px
				rgb(255 244 190 / 90%)
			);

		transform: translateY(0);
	}

	84% {
		opacity: 0.52;

		filter:
			drop-shadow(
				0 0 6px
				rgb(255 244 190 / 48%)
			);

		transform: translateY(1px);
	}

	100% {
		opacity: 0;

		filter:
			drop-shadow(
				0 0 0
				rgb(255 244 190 / 0%)
			);

		transform: translateY(3px);
	}
}

@keyframes mppSparkleClusterTwo {
	0% {
		opacity: 0;

		filter:
			drop-shadow(
				0 0 0
				rgb(255 244 190 / 0%)
			);

		transform: translateY(5px);
	}

	22% {
		opacity: 0.38;

		filter:
			drop-shadow(
				0 0 4px
				rgb(255 244 190 / 38%)
			);

		transform: translateY(3px);
	}

	40% {
		opacity: 0.88;

		filter:
			drop-shadow(
				0 0 9px
				rgb(255 244 190 / 76%)
			);

		transform: translateY(1px);
	}

	58% {
		opacity: 0.44;

		filter:
			drop-shadow(
				0 0 4px
				rgb(255 244 190 / 35%)
			);

		transform: translateY(0);
	}

	74% {
		opacity: 0.92;

		filter:
			drop-shadow(
				0 0 11px
				rgb(255 244 190 / 86%)
			);

		transform: translateY(1px);
	}

	88% {
		opacity: 0.48;

		filter:
			drop-shadow(
				0 0 5px
				rgb(255 244 190 / 42%)
			);

		transform: translateY(2px);
	}

	100% {
		opacity: 0;

		filter:
			drop-shadow(
				0 0 0
				rgb(255 244 190 / 0%)
			);

		transform: translateY(4px);
	}
}

@keyframes mppCompletionStampReveal {
	0% {
		opacity: 0;

		transform:
			translateX(-50%)
			translateY(14px)
			scale(0.78)
			rotate(-5deg);
	}

	65% {
		opacity: 1;

		transform:
			translateX(-50%)
			translateY(-2px)
			scale(1.04)
			rotate(1deg);
	}

	100% {
		opacity: 1;

		transform:
			translateX(-50%)
			translateY(0)
			scale(1)
			rotate(0);
	}
}

@keyframes mppCompletionStampGlow {
	0% {
		filter:
			drop-shadow(
				0 0 0
				rgb(216 194 125 / 0%)
			);
	}

	45% {
		filter:
			drop-shadow(
				0 0 14px
				rgb(216 194 125 / 38%)
			);
	}

	100% {
		filter:
			drop-shadow(
				0 4px 8px
				rgb(79 71 65 / 10%)
			);
	}
}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {
	.mpp-book-viewer__celebration,
	.mpp-book-viewer__celebration-heading,
	.mpp-book-viewer__celebration-intro,
	.mpp-book-viewer__celebration-image,
	.mpp-book-viewer__celebration-title,
	.mpp-book-viewer__celebration-message,
	.mpp-book-viewer__celebration-continue,
	.mpp-book-viewer__celebration::before,
	.mpp-book-viewer__celebration::after,
	.mpp-page-completion-stamp,
	.mpp-page-completion-stamp img {
		animation: none !important;
	}
}

/* ==========================================
   BOOK COMPLETE — OPEN BOOK PAGE 11
   Single consolidated implementation.
========================================== */

.mpp-book-viewer__dialog.is-book-complete {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	place-items: center;

	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: #050505;
	box-shadow: none;
}

/* The artwork itself stays visible at all times. */
.mpp-book-viewer__dialog.is-book-complete
.mpp-book-viewer__book {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	justify-self: center;

	width: min(112vw, calc(116vh * 1.5));
	max-width: none;
	aspect-ratio: 3 / 2;
	margin: 0;
	overflow: visible;
	background: transparent;

	transform: translateY(4%);
	transform-origin: center;
}

.mpp-book-viewer__dialog.is-book-complete
.mpp-book-viewer__pages {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;

	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;

	filter:
		drop-shadow(
			0 28px 48px
			rgb(0 0 0 / 72%)
		);
}

/* ==========================================
   PAGE 11 OVERLAY
========================================== */

.mpp-book-viewer__book-complete {
	position: absolute;
	inset: 0;
	z-index: auto;

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;

	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 8.6% 12.2% 13.6%;
	overflow: visible;
	pointer-events: auto;
	isolation: auto;
}

.mpp-book-viewer__book-complete[hidden] {
	display: none !important;
}

.mpp-book-complete__left,
.mpp-book-complete__right {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
	min-height: 0;
	text-align: center;
}

/* Centre each composition within its own printed page. */

.mpp-book-complete__left {
	padding: 6% 8% 0 3%;
	transform: translateX(5.5%) rotate(-0.35deg);
	transform-origin: center;
}

.mpp-book-complete__right {
	padding: 6% 8% 0 3%;
	transform: translateX(-0.5%) rotate(-0.55deg);
	transform-origin: center;
}

.mpp-book-complete__left > *,
.mpp-book-complete__right > * {
	flex: 0 0 auto;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

/* ==========================================
   TYPOGRAPHY
========================================== */

.mpp-book-complete__eyebrow,
.mpp-book-complete__reward-label {
	margin-top: 0 !important;
	color: #9ba584;
	font-family: "Montserrat", sans-serif;
	font-size: clamp(15px, 1.1vw, 20px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
}

.mpp-book-complete__eyebrow {
	margin-bottom: clamp(20px, 1.4vw, 30px) !important;
}

.mpp-book-complete__heading {
	max-width: 100%;
	margin: 0 0 clamp(34px, 2.2vw, 48px) !important;
	color: #4f4741;
	font-family: "Playfair Display", serif;
	font-size: clamp(50px, 4.7vw, 82px);
	font-weight: 400;
	line-height: 0.91;
	text-align: center;
	text-shadow: 0 2px 10px rgb(79 71 65 / 7%);
}

.mpp-book-complete__message,
.mpp-book-complete__submessage {
	width: 78%;
	max-width: 380px;
	color: #4f4741;
	font-family: "Montserrat", sans-serif;
	font-size: clamp(13px, 1vw, 18px);
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

.mpp-book-complete__message {
	margin: 0;
}

.mpp-book-complete__submessage {
	margin: 0 !important;
}

.mpp-book-complete__stamp {
	display: flex;
	justify-content: center;
	align-items: center;

	margin-top: clamp(10px, 0.8vw, 14px) !important;
}

.mpp-book-complete__stamp-image {
	display: block;

	width: clamp(165px, 11.5vw, 225px);
	height: auto;

	opacity: 0.94;

	filter:
		drop-shadow(
			0 7px 12px
			rgb(79 71 65 / 12%)
		);
}

/* ==========================================
   REWARD
========================================== */

.mpp-book-complete__reward-label {
	margin: 0 0 clamp(46px, 3.1vw, 64px) !important;
}

.mpp-book-complete__reward-image {
	display: block;
    margin: 0 !important;
	width: min(58.5%, 315px);
	max-width: 100%;
	max-height: min(43vh, 315px);

	object-fit: contain;

	transform:
		perspective(1100px)
		rotate(-0.6deg);

	transform-origin: center bottom;

	filter:
		drop-shadow(0 15px 22px rgb(79 71 65 / 17%))
		drop-shadow(0 0 18px rgb(216 194 125 / 18%));
}

.mpp-book-complete__reward-image[hidden] {
	display: none !important;
}

.mpp-book-complete__reward-title {
	margin: 0 0 clamp(28px, 2vw, 40px) !important;
	color: #4f4741;
	font-family: "Playfair Display", serif;
	font-size: clamp(23px, 2vw, 36px);
	font-weight: 400;
	line-height: 1.12;
	text-align: center;
	
	transform: 
	    rotate(-0.6deg);
}

.mpp-book-complete__collect {
	position: relative;
	overflow: hidden;

	min-width: 0;
	margin-top: clamp(32px, 2.2vw, 44px) !important;
	padding: 11px 19px;

	border: 0 !important;
	border-radius: 6px;

	background: #9ba584 !important;
	color: #ffffff !important;

	font-family: "Montserrat", sans-serif;
	font-size: clamp(14px, 1vw, 18px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;

	box-shadow: none;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}


.mpp-book-complete__collect:hover,
.mpp-book-complete__collect:focus-visible {
	background: #8e9977 !important;
	transform: translateY(-2px);
	box-shadow:
		0 12px 22px rgb(79 71 65 / 18%),
		0 0 25px rgb(221 198 123 / 30%);
	outline: none;
}

.mpp-book-complete__collect:disabled {
	cursor: wait;
	opacity: 0.7;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1100px) {
	.mpp-book-viewer__dialog.is-book-complete
	.mpp-book-viewer__book {
		width: min(118vw, calc(116vh * 1.5));
	}

	.mpp-book-viewer__book-complete {
		padding: 9% 11.5% 14%;
	}

	.mpp-book-complete__heading {
		font-size: clamp(43px, 6vw, 72px);
	}

	.mpp-book-complete__message,
	.mpp-book-complete__submessage {
		font-size: clamp(11px, 1.3vw, 16px);
	}

	.mpp-book-complete__reward-image {
		width: min(78%, 350px);
	}
}

@media (max-width: 760px) {
	.mpp-book-viewer__dialog.is-book-complete {
		overflow: auto;
	}

	.mpp-book-viewer__dialog.is-book-complete
	.mpp-book-viewer__book {
		width: 1280px;
		min-width: 1280px;
	}

	.mpp-book-viewer__book-complete {
		padding: 108px 150px 165px;
	}
}


/* ==========================================
   PAGE 11 — CANVAS FIREWORKS LAYER
========================================== */

.mpp-book-complete__fireworks {
	position: absolute;
	top: calc(50% - 50vh);
	left: calc(50% - 50vw);
	z-index: 0;

	display: block;
	width: 100vw;
	height: 100vh;

	pointer-events: none;
	opacity: 1;
}

.mpp-book-complete__fireworks[hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.mpp-book-complete__fireworks {
		display: none !important;
	}
}


/* ==========================================
   PAGE 11 FIREWORK CANVAS LAYERS — V10
========================================== */

.mpp-book-complete__fireworks--trails {
	z-index: 0 !important;
}

.mpp-book-complete__fireworks:not(.mpp-book-complete__fireworks--trails) {
	z-index: 1 !important;
}