/* ===========================================================================
   Mode: SPREAD — storybook, two facing pages, page-turn on navigation
   =========================================================================== */

body.m-spread {
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 50% 20%, #223140 0%, #131c26 55%, #0a1017 100%);
}

.desk {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	padding: clamp(12px, 3vw, 40px);
	perspective: 2400px;
}

.book {
	position: relative;
	width: min(1120px, 95vw);
	height: min(78vh, 660px);
	display: flex;
	transform-style: preserve-3d;
	filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
}

/* A single page */
.leaf {
	position: relative;
	width: 50%;
	height: 100%;
	background: var(--paper);
	background-image:
		linear-gradient(105deg, rgba(0,0,0,0.04), transparent 40%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.35'/%3E%3C/svg%3E");
	background-blend-mode: multiply;
	color: var(--paper-ink);
	overflow: hidden;
}
.leaf--text { border-radius: 4px 0 0 4px; }
.leaf--img  { border-radius: 0 4px 4px 0; }

/* Binding / gutter shadow */
.book::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 60px;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 5;
	background: linear-gradient(to right,
		transparent, rgba(0,0,0,0.22) 45%, rgba(0,0,0,0.28) 50%, rgba(0,0,0,0.22) 55%, transparent);
}

/* Text page */
.leaf__inner {
	position: absolute;
	inset: 0;
	padding: clamp(26px, 4.4vw, 60px) clamp(24px, 4vw, 56px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.leaf__inner::-webkit-scrollbar { width: 6px; }
.leaf__inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }

.spread__text {
	margin: 0;
	font-size: clamp(1.05rem, 0.85rem + 0.7vw, 1.42rem);
	line-height: 1.66;
	text-wrap: pretty;
}
.spread__text:first-letter {
	initial-letter: 2.2;
	font-family: var(--display);
	font-weight: 600;
	margin-right: 0.06em;
	color: var(--sea);
}

/* Illustration page */
.leaf--img .spread__art {
	position: absolute;
	inset: clamp(22px, 3.5vw, 48px);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
}

/* Page numbers */
.folio {
	position: absolute;
	bottom: 16px;
	font-family: var(--display);
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	color: rgba(53, 41, 28, 0.6);
}
.leaf--text .folio { left: clamp(24px, 4vw, 56px); }
.leaf--img  .folio { right: clamp(22px, 3.5vw, 48px); }

/* Turn affordances */
.turnzone {
	position: absolute;
	top: 0; bottom: 0;
	width: 12%;
	min-width: 60px;
	z-index: 8;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.turnzone--prev { left: -6%; }
.turnzone--next { right: -6%; }
.turnzone::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 40px; height: 40px;
	transform: translate(-50%, -50%);
	border-top: 2px solid rgba(255,255,255,0.6);
	border-right: 2px solid rgba(255,255,255,0.6);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}
.turnzone--next::after { transform: translate(-50%, -50%) rotate(45deg); }
.turnzone--prev::after { transform: translate(-50%, -50%) rotate(-135deg); }
.turnzone:hover::after { opacity: 0.9; }

/* The turning page (an overlay that folds during navigation) */
.turnpage {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: 12;
	transform-style: preserve-3d;
	pointer-events: none;
	opacity: 0;
	will-change: transform;
}
.turnpage--next { left: 50%; transform-origin: left center; }
.turnpage--prev { left: 0;   transform-origin: right center; }
.turnpage__face {
	position: absolute;
	inset: 0;
	background: var(--paper);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	backface-visibility: hidden;
	box-shadow: 0 0 40px rgba(0,0,0,0.3);
}
.turnpage--next .turnpage__face { border-radius: 0 4px 4px 0; }
.turnpage--prev .turnpage__face { border-radius: 4px 0 0 4px; }
.turnpage__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to left, rgba(0,0,0,0.5), transparent 60%);
	opacity: 0;
}
.turnpage--prev .turnpage__shade { background: linear-gradient(to right, rgba(0,0,0,0.5), transparent 60%); }

.book.is-turning-next .turnpage--next { animation: fold-next 0.82s var(--ease) forwards; }
.book.is-turning-next .turnpage--next .turnpage__shade { animation: shade 0.82s var(--ease) forwards; }
.book.is-turning-prev .turnpage--prev { animation: fold-prev 0.82s var(--ease) forwards; }
.book.is-turning-prev .turnpage--prev .turnpage__shade { animation: shade 0.82s var(--ease) forwards; }

@keyframes fold-next {
	0%   { opacity: 1; transform: rotateY(0deg); }
	100% { opacity: 1; transform: rotateY(-172deg); }
}
@keyframes fold-prev {
	0%   { opacity: 1; transform: rotateY(0deg); }
	100% { opacity: 1; transform: rotateY(172deg); }
}
@keyframes shade { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 0.4; } }

/* Gentle settle on the freshly loaded spread */
.book.is-entering .leaf--img { animation: settle 0.6s var(--ease); }
@keyframes settle { from { transform: rotateY(-14deg); } to { transform: rotateY(0); } }

/* Mobile: stack image over text, no fold (just a slide) */
@media (max-width: 760px) {
	.book {
		flex-direction: column;
		width: 94vw;
		height: min(84vh, 720px);
	}
	.leaf { width: 100%; }
	.leaf--img { height: 46%; border-radius: 6px 6px 0 0; }
	.leaf--text { height: 54%; border-radius: 0 0 6px 6px; }
	.book::after { display: none; }
	.leaf--img .spread__art { inset: 16px; }
	.turnzone { width: 16%; }
	.turnzone--prev { left: 0; }
	.turnzone--next { right: 0; }
	.turnpage { display: none; }
	.spread__text { font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
	.book.is-turning-next .turnpage--next,
	.book.is-turning-prev .turnpage--prev,
	.book.is-entering .leaf--img { animation: none; }
}