/* ============================================================
   Book card — real-bound-book treatment.
   Ported from psalms-app/src/components/book-card.module.css so
   the Flask creator app gets the same polished bookshelf feel.
   Iterate on look-and-feel HERE; control-home.js owns structure.
   ============================================================ */

/* ─── Outer card (the clickable element) ──────────────────── */
.bc-card {
	flex-shrink: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	/* Perspective so the cover's 3D hover transform reads correctly. */
	perspective: 900px;
}

/* ─── The cover itself ────────────────────────────────────── */
.bc-cover {
	position: relative;
	width: 140px;
	height: 200px;
	border-radius: 6px;
	overflow: hidden;
	/* Brand color flows through the --bc-cover CSS variable set by the
	   parent — keeps decoration in CSS, content/dynamic data in JS. */
	background: var(--bc-cover);
	/* Shadow stack: first offset emulates page thickness behind the cover
	   (driven by --bc-thickness so thickness variants can override); the
	   others are the drop shadow. */
	box-shadow:
		var(--bc-thickness, 3px) 0 0 rgba(0, 0, 0, 0.18),
		0 8px 22px rgba(0, 0, 0, 0.42),
		0 2px 6px rgba(0, 0, 0, 0.22);
	transition:
		transform 0.45s cubic-bezier(0.22, 1.2, 0.36, 1),
		box-shadow 0.45s cubic-bezier(0.22, 1.2, 0.36, 1);
	will-change: transform;
	transform-origin: center bottom;
}

/* Hover: lift + tilt FORWARD (toward viewer) + nudge in 3D space toward
   the camera — "picking the book up off the shelf, not pushing it in." */
.bc-card:hover .bc-cover {
	transform: translateY(-9px) translateZ(14px) rotateX(-4deg) rotateZ(-0.8deg);
	box-shadow:
		var(--bc-thickness, 3px) 0 0 rgba(0, 0, 0, 0.18),
		0 26px 40px rgba(0, 0, 0, 0.52),
		0 8px 14px rgba(0, 0, 0, 0.32);
}

/* Active: press back down, snappier. */
.bc-card:active .bc-cover {
	transform: translateY(2px) scale(0.985);
	box-shadow:
		var(--bc-thickness, 3px) 0 0 rgba(0, 0, 0, 0.15),
		0 4px 10px rgba(0, 0, 0, 0.38);
	transition-duration: 0.14s;
}

/* Animated specular sweep — light catches the cover on hover. */
.bc-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		110deg,
		transparent 30%,
		rgba(255, 255, 255, 0.18) 50%,
		transparent 70%
	);
	transform: translateX(-110%);
	transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 1;
}

.bc-card:hover .bc-cover::before {
	transform: translateX(110%);
}

/* ─── Layered surface decoration ──────────────────────────── */

/* Linen / paper noise — picks up cover color via soft-light blend. */
.bc-noise {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.38;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Top specular sheen — soft highlight on the upper half. */
.bc-sheen {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 50%;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 80%);
}

/* Spine — left edge, deeper shadow with a fold highlight. Width tracks
   --bc-spine-w so thicker books get a chunkier spine. */
.bc-spine {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--bc-spine-w, 9px);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.15) 60%, transparent);
	box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
	z-index: 2;
}

/* Page edges (right) — cream stripe; THE recognizable "book" cue. */
.bc-page-edges {
	position: absolute;
	top: 8px;
	bottom: 8px;
	right: 0;
	width: var(--bc-pages-w, 3px);
	border-radius: 0 1px 1px 0;
	background: linear-gradient(
		90deg,
		rgba(245, 237, 210, 0.9) 0%,
		rgba(225, 210, 170, 0.7) 60%,
		rgba(150, 130, 90, 0.4) 100%
	);
	box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.28);
	z-index: 2;
}

/* Page edges (top) — slim stripe along the top, matching the right. */
.bc-page-edges-top {
	position: absolute;
	top: 0;
	left: 12px;
	right: 5px;
	height: 2px;
	background: linear-gradient(
		180deg,
		rgba(245, 237, 210, 0.6),
		rgba(225, 210, 170, 0.4) 60%,
		transparent
	);
	pointer-events: none;
	z-index: 2;
}

/* ─── Cover content (icon + title) ────────────────────────── */
.bc-content {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 12px 16px;
	z-index: 3;
}

.bc-icon {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.95rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.bc-title-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bc-title {
	font-family: "Lora", Georgia, serif;
	text-align: center;
	color: rgba(255, 255, 255, 0.95);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.02em;
	/* Letterpress: faint highlight above, soft drop below. */
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.1),
		0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ─── Caption (subtitle + meta) below the cover ───────────── */
.bc-caption {
	margin-top: 12px;
	text-align: center;
	max-width: 140px;
}

.bc-subtitle {
	font-size: 0.72rem;
	color: var(--ctrl-text-muted, #8a8a8a);
}

.bc-meta {
	font-size: 0.68rem;
	color: var(--ctrl-text-muted, #8a8a8a);
	opacity: 0.7;
}

/* ============================================================
   The Shelf
   The wrapper (.bc-shelf-wrap) is non-scrolling so the shelf board
   stays put while .bc-shelf-row scrolls horizontally on top of it.
   Tunable knobs live in CSS variables on .bc-shelf-wrap.
   ============================================================ */

.bc-shelf-wrap {
	/* ── Tunable variables — change here, see everywhere. ── */
	--bc-shelf-h: 14px;                              /* board thickness */
	--bc-shelf-r: 30, 22, 16;                         /* walnut RGB triple */
	--bc-shelf-light: rgba(255, 235, 205, 0.13);     /* front-edge highlight */
	--bc-shelf-grain: rgba(0, 0, 0, 0.05);           /* vertical grain ink */
	--bc-cast: rgba(0, 0, 0, 0.5);                   /* books' cast shadow */

	position: relative;
	padding-bottom: var(--bc-shelf-h);

	/* Responsive sizing — the wrap shrinks to the books' natural width on
	   wide screens (so the shelf board matches the row exactly, and the
	   whole thing centers itself horizontally) and caps at viewport width
	   on narrow screens (so the inner row scrolls without the wrap
	   overflowing the page). No media queries needed. */
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* The scrolling row that holds the books — only breathing room for the
   hover-lift / press, nothing decorative. */
.bc-shelf-row {
	position: relative;
	display: flex;
	gap: 28px;
	/* overflow-x:auto forces overflow-y to auto too (CSS spec), so the row
	   becomes a clipping context. Top padding must absorb the hover lift +
	   3D extension or the top of the cover gets clipped. Math (for hover
	   transform translateY(-9)+translateZ(14)+rotateX(-4) with
	   perspective(900)): top edge lands ~14.4px above resting → 18px gives
	   comfortable headroom. */
	padding-top: 18px;
	padding-bottom: 6px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	z-index: 2; /* books above shelf */
}

.bc-shelf-row::-webkit-scrollbar {
	display: none;
}

/* The cast shadow from the books, falling onto the shelf surface.
   Stationary (lives on the non-scrolling wrap). */
.bc-shelf-wrap::before {
	content: "";
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: var(--bc-shelf-h);
	height: 18px;
	background: radial-gradient(ellipse 60% 100% at 50% 100%, var(--bc-cast), transparent 75%);
	pointer-events: none;
	z-index: 1;
}

/* ── The board itself — multi-layered to read as wood, not a line. ── */
.bc-shelf {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--bc-shelf-h);
	pointer-events: none;
	z-index: 0;
	background:
		/* base warm-walnut tint with vertical shading so the top of the
		   board reads slightly lighter than its underside */
		linear-gradient(180deg,
			rgba(var(--bc-shelf-r), 0.96) 0%,
			rgba(var(--bc-shelf-r), 1) 55%,
			rgba(var(--bc-shelf-r), 0.78) 100%);
	box-shadow:
		/* drop shadow below — board floats above the surface behind */
		0 5px 12px rgba(0, 0, 0, 0.42),
		/* top inset highlight — light catches the front lip of the board */
		inset 0 1px 0 var(--bc-shelf-light),
		/* bottom inset shadow — underside falls into shadow */
		inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}

/* Grain layer — fine vertical striations for the wood texture.
   Separated from the board so the grain doesn't catch the inset
   highlights / shadows on .bc-shelf. */
.bc-shelf-grain {
	position: absolute;
	inset: 1px 0 1px 0; /* skip the highlight & shadow rows */
	pointer-events: none;
	opacity: 0.85;
	background:
		repeating-linear-gradient(90deg,
			transparent 0,
			transparent 3px,
			var(--bc-shelf-grain) 3px,
			var(--bc-shelf-grain) 4px),
		/* a couple of subtle wider "knots" via wider repeating lines */
		repeating-linear-gradient(90deg,
			transparent 0,
			transparent 47px,
			rgba(0, 0, 0, 0.05) 47px,
			rgba(0, 0, 0, 0.05) 49px);
	mix-blend-mode: multiply;
}

/* ============================================================
   Material + thickness variants
   Each modifier sets CSS variables read by the base rules above
   and optionally adds variant-specific decoration.
   ============================================================ */

/* ─── Thickness — drives spine width, page-edges width, body offset ─ */
.bc-cover-medium {
	--bc-thickness: 3px;
	--bc-spine-w: 9px;
	--bc-pages-w: 3px;
}

.bc-cover-thick {
	--bc-thickness: 6px;
	--bc-spine-w: 11px;
	--bc-pages-w: 4px;
}

/* ─── Leather (the Bible) — warm cream/gold lettering, foil hairline
       under the title, slightly more grain. The variant doesn't change
       the cover color; it dresses any color as a leather-bound volume. ─ */
.bc-cover-leather .bc-noise {
	opacity: 0.5;
	mix-blend-mode: overlay;
}

.bc-cover-leather .bc-title {
	color: rgba(245, 230, 200, 0.96); /* warm cream — reads as gold foil */
	text-shadow:
		0 1px 0 rgba(255, 235, 180, 0.18),
		0 1px 4px rgba(0, 0, 0, 0.6);
}

.bc-cover-leather .bc-title::after {
	content: "";
	display: block;
	width: 38px;
	height: 1px;
	margin: 8px auto 0;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(225, 195, 125, 0.85) 50%,
		transparent
	);
	box-shadow: 0 0 4px rgba(225, 195, 125, 0.35);
}

/* ─── Cloth (the hymnals) — subtle horizontal weave threads. */
.bc-cover-cloth::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.04) 0px,
		rgba(0, 0, 0, 0.04) 1px,
		transparent 1px,
		transparent 2px
	);
	mix-blend-mode: multiply;
	z-index: 0;
}

/* ─── Mobile — tighter sizing for narrow screens ──────────── */
@media (max-width: 480px) {
	.bc-cover {
		width: 120px;
		height: 175px;
	}
	.bc-caption {
		max-width: 120px;
	}
	.bc-shelf-row {
		gap: 20px;
	}
}

/* ─── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.bc-cover {
		transition: transform 0.18s ease, box-shadow 0.18s ease;
	}
	.bc-card:hover .bc-cover {
		transform: translateY(-4px);
	}
	.bc-card:active .bc-cover {
		transform: none;
	}
	.bc-cover::before {
		display: none;
	}
}