/**
*  Softcover in 3D
*
*  Ein dünnes Heft statt eines Hardcovers: dünner Seitenblock, weicher Falz nahe
*  dem Rücken, leichter Glanz, kein starrer Rahmen. Seitenverhältnis wie die
*  Titelbild-Datei (2000 × 2827).
**/

.c-book {
	--book-width: 15rem;
	display: inline-block;
	padding: var(--space-xs) var(--space-m) var(--space-m);
	perspective: 1400px;
}

.c-book__body {
	position: relative;
	inline-size: var(--book-width);
	aspect-ratio: 2000 / 2827;
	transform: rotateY(-24deg) rotateX(2deg);
	transform-style: preserve-3d;
}

.c-book__cover {
	position: absolute;
	inset: 0;
	border-radius: 1px 4px 4px 1px;
	overflow: hidden;
	background: var(--surface-card);
	box-shadow:
		0 1.5rem 1.5rem -0.75rem color-mix(in srgb, var(--ink-navy) 45%, transparent),
		1.25rem 0.5rem 2rem -0.5rem color-mix(in srgb, var(--ink-navy) 30%, transparent);

	/* Falz des Umschlags nahe dem Rücken: dunkle Rille mit hellem Grat */
	&::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 4%;
		inline-size: 3%;
		background: linear-gradient(
			90deg,
			rgb(0 0 0 / 0),
			rgb(0 0 0 / 0.18) 35%,
			rgb(255 255 255 / 0.22) 60%,
			rgb(0 0 0 / 0)
		);
		pointer-events: none;
	}

	/* Weiches Streiflicht und leichte Abdunklung zum Rücken, wie bei bedrucktem Papier */
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(105deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0) 38%),
			linear-gradient(90deg, rgb(0 0 0 / 0.14), rgb(0 0 0 / 0) 14%);
		pointer-events: none;
	}
}

.c-book__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Schmaler Seitenblock rechts (ca. 36 Seiten) */
.c-book__pages {
	position: absolute;
	inset-block: 0.4%;
	inset-inline-end: 0;
	inline-size: 0.5rem;
	background:
		repeating-linear-gradient(90deg, rgb(0 0 0 / 0.05) 0 1px, rgb(255 255 255 / 0) 1px 3px),
		var(--paper-white);
	transform: rotateY(-90deg);
	transform-origin: right center;
}

@media (min-width: 768px) {

	.c-book {
		--book-width: 17rem;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.c-book__body {
		transition: transform 0.6s ease-out;
	}

	.c-book:hover .c-book__body {
		transform: rotateY(-16deg) rotateX(1deg);
	}
}