/*!
 * Archivo del Desierto — the reader
 *
 * A separate visual environment: night around, warm paper in the middle, controls that
 * recede. Loaded only on /episodio-N/leer/.
 */

@layer components {

	.add--reader {
		background-color: var(--color-night);
		color: var(--on-dark);
		overflow: hidden;
	}

	.add--reader .site-main {
		display: block;
	}

	.reader {
		position: fixed;
		inset: 0;
		display: flex;
		flex-direction: column;
		background:
			radial-gradient(120% 90% at 50% 8%, #14171d 0%, var(--color-night) 62%),
			var(--color-night);
		color: var(--on-dark);
	}

	/* ── Bars ───────────────────────────────────────────────────────────── */

	.reader__bar {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: var(--space-m);
		padding: 0.7rem clamp(0.75rem, 2.5vw, 1.75rem);
		background-color: color-mix(in oklab, var(--color-night) 88%, transparent);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		transition: opacity var(--motion-slow) var(--ease-standard),
			translate var(--motion-slow) var(--ease-standard);
	}

	.reader__bar--top {
		justify-content: space-between;
		border-bottom: 1px solid color-mix(in oklab, var(--color-paper) 10%, transparent);
	}

	.reader__bar--bottom {
		flex-direction: column;
		gap: 0.55rem;
		padding-block: 0.6rem 0.9rem;
		border-top: 1px solid color-mix(in oklab, var(--color-paper) 10%, transparent);
	}

	/* The bars withdraw while reading and return on any pointer or key activity. The page
	   edges deliberately stay: they are the primary way to turn a page, and hiding them
	   would leave a reader with no visible way forward. */
	.reader.is-idle .reader__bar--top { opacity: 0; translate: 0 -100%; pointer-events: none; }
	.reader.is-idle .reader__bar--bottom { opacity: 0; translate: 0 100%; pointer-events: none; }

	.reader__back {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 0.65rem;
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		text-decoration: none;
		color: var(--on-dark-muted);
		border-radius: var(--radius-s);
		transition: color var(--motion-fast) var(--ease-standard),
			background-color var(--motion-fast) var(--ease-standard);
	}

	.reader__back:hover,
	.reader__back:focus-visible {
		color: var(--color-paper);
		background-color: rgb(255 255 255 / 0.07);
	}

	.reader__identity {
		flex: 1 1 auto;
		min-width: 0;
		text-align: center;
	}

	.reader__title {
		font-family: var(--font-display);
		font-size: 0.9375rem;
		font-weight: 600;
		color: var(--color-paper);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.reader__subtitle {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: color-mix(in oklab, var(--on-dark-muted) 85%, transparent);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.reader__tools {
		display: flex;
		align-items: center;
		gap: 0.2rem;
	}

	.reader__tool {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		color: var(--on-dark-muted);
		border-radius: var(--radius-s);
		text-decoration: none;
		transition: color var(--motion-fast) var(--ease-standard),
			background-color var(--motion-fast) var(--ease-standard);
	}

	.reader__tool:hover,
	.reader__tool:focus-visible {
		color: var(--color-paper);
		background-color: rgb(255 255 255 / 0.09);
	}

	.reader__tool[aria-pressed="true"] {
		color: var(--color-brass);
		background-color: rgb(255 255 255 / 0.07);
	}

	/* ── Stage ──────────────────────────────────────────────────────────── */

	.reader__stage {
		position: relative;
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 0;
		padding: clamp(0.5rem, 2vh, 1.5rem) clamp(0.5rem, 4vw, 4rem);
	}

	.reader__book {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 100%;
		max-height: 100%;
		/* The perspective that makes a turning leaf read as paper rather than as a sprite. */
		perspective: 2400px;
		perspective-origin: 50% 45%;
	}

	.reader__leafs {
		position: relative;
		display: flex;
		align-items: stretch;
		transform-style: preserve-3d;
	}

	.reader__page {
		position: relative;
		background-color: #f3ece0;
		box-shadow:
			0 2px 4px rgb(0 0 0 / 0.4),
			0 26px 60px -18px rgb(0 0 0 / 0.75);
	}

	/* The inner shadow at the spine: paper curving into the gutter. */
	.reader__page--left::after,
	.reader__page--right::after {
		content: "";
		position: absolute;
		inset-block: 0;
		width: 42px;
		pointer-events: none;
	}

	.reader__page--left::after {
		inset-inline-end: 0;
		background: linear-gradient(90deg, transparent, rgb(60 45 25 / 0.22));
	}

	.reader__page--right::after {
		inset-inline-start: 0;
		background: linear-gradient(270deg, transparent, rgb(60 45 25 / 0.22));
	}

	.reader__canvas {
		display: block;
		max-width: 100%;
		height: auto;
		/* The PDFs are pure white scans. A whisper of warmth turns a lit rectangle into
		   paper under a lamp, which is the whole point of the night environment. */
		filter: sepia(0.08) brightness(0.985) contrast(1.02);
	}

	/* Single-page mode: one leaf, centred, no gutter shadow. */
	.reader[data-mode="single"] .reader__page--right { display: none; }
	.reader[data-mode="single"] .reader__page--left::after { display: none; }

	/* The cover, and the last page of an odd book, sit alone. */
	.reader.is-solo .reader__page--right { display: none; }
	.reader.is-solo .reader__page--left::after { display: none; }

	.reader__gutter {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 50%;
		width: 2px;
		translate: -50% 0;
		background: linear-gradient(
			180deg,
			transparent,
			rgb(0 0 0 / 0.35) 12%,
			rgb(0 0 0 / 0.35) 88%,
			transparent
		);
		pointer-events: none;
	}

	.reader[data-mode="single"] .reader__gutter,
	.reader.is-solo .reader__gutter { display: none; }

	/* ── The turning leaf ───────────────────────────────────────────────── */

	.reader__flip {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 50%;
		width: 50%;
		transform-style: preserve-3d;
		transform-origin: left center;
		backface-visibility: visible;
		pointer-events: none;
		opacity: 0;
		z-index: 3;
	}

	.reader.is-flipping .reader__flip { opacity: 1; }

	/* Turning backwards: the leaf lives on the left half and opens rightwards. */
	.reader.is-flipping-back .reader__flip {
		inset-inline-start: 0;
		transform-origin: right center;
	}

	.reader__flip-face {
		position: absolute;
		inset: 0;
		backface-visibility: hidden;
		background-color: #f3ece0;
		overflow: hidden;
		box-shadow: 0 2px 4px rgb(0 0 0 / 0.4);
	}

	.reader__flip-face--back {
		transform: rotateY(180deg);
	}

	/* The shadow that sweeps across the leaf as it lifts. */
	.reader__flip-face::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(
			90deg,
			rgb(0 0 0 / 0.30) 0%,
			rgb(0 0 0 / 0.06) 22%,
			rgb(0 0 0 / 0) 55%
		);
		opacity: var(--flip-shade, 0);
		transition: opacity var(--motion-page-turn) var(--ease-cinematic);
	}

	.reader__flip-face--back::after {
		background: linear-gradient(
			270deg,
			rgb(0 0 0 / 0.30) 0%,
			rgb(0 0 0 / 0.06) 22%,
			rgb(0 0 0 / 0) 55%
		);
	}

	/* ── Edges ──────────────────────────────────────────────────────────── */

	.reader__edge {
		position: absolute;
		inset-block: 0;
		z-index: 4;
		display: flex;
		align-items: center;
		width: clamp(3rem, 8vw, 7rem);
		color: color-mix(in oklab, var(--color-paper) 55%, transparent);
		transition: opacity var(--motion-normal) var(--ease-standard),
			color var(--motion-fast) var(--ease-standard);
	}

	.reader__edge--prev { inset-inline-start: 0; justify-content: flex-start; padding-inline-start: 0.5rem; cursor: w-resize; }
	.reader__edge--next { inset-inline-end: 0; justify-content: flex-end; padding-inline-end: 0.5rem; cursor: e-resize; }

	.reader__edge:hover { color: var(--color-paper); }
	.reader__edge[disabled] { opacity: 0.18; cursor: default; }

	.reader__edge-chevron {
		display: grid;
		place-items: center;
		width: 46px;
		height: 46px;
		border-radius: 50%;
		background-color: rgb(255 255 255 / 0.06);
		border: 1px solid color-mix(in oklab, var(--color-paper) 16%, transparent);
		transition: background-color var(--motion-fast) var(--ease-standard),
			scale var(--motion-fast) var(--ease-standard);
	}

	.reader__edge:hover .reader__edge-chevron {
		background-color: rgb(255 255 255 / 0.14);
		scale: 1.06;
	}

	/* ── Status ─────────────────────────────────────────────────────────── */

	.reader__status {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		translate: -50% -50%;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.9rem 1.4rem;
		font-family: var(--font-mono);
		font-size: 0.75rem;
		letter-spacing: var(--tracking-wide);
		color: var(--on-dark-muted);
		background-color: rgb(0 0 0 / 0.5);
		border: 1px solid color-mix(in oklab, var(--color-paper) 12%, transparent);
		border-radius: var(--radius-m);
		z-index: 6;
	}

	.reader[data-state="ready"] .reader__status { display: none; }

	.reader__spinner {
		width: 14px;
		height: 14px;
		border: 2px solid color-mix(in oklab, var(--color-paper) 22%, transparent);
		border-top-color: var(--color-brass);
		border-radius: 50%;
		animation: reader-spin 700ms linear infinite;
	}

	.reader[data-state="error"] .reader__spinner { display: none; }

	@keyframes reader-spin {
		to { rotate: 360deg; }
	}

	/* ── Progress and pager ─────────────────────────────────────────────── */

	.reader__progress { width: 100%; }

	.reader__progress-bar {
		height: 2px;
		background-color: color-mix(in oklab, var(--color-paper) 12%, transparent);
		border-radius: var(--radius-pill);
		overflow: hidden;
	}

	.reader__progress-fill {
		height: 100%;
		width: 0%;
		background: linear-gradient(90deg, var(--color-oxidized-brass), var(--color-brass));
		transition: width var(--motion-normal) var(--ease-standard);
	}

	.reader__pager {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-wide);
		color: var(--on-dark-muted);
	}

	.reader__page-input {
		width: 4.25rem;
		padding: 0.3rem 0.5rem;
		font-family: var(--font-mono);
		font-size: 0.75rem;
		text-align: center;
		color: var(--color-paper);
		background-color: rgb(255 255 255 / 0.06);
		border: 1px solid color-mix(in oklab, var(--color-paper) 16%, transparent);
		border-radius: var(--radius-s);
	}

	.reader__page-input:focus {
		border-color: var(--color-brass);
		box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-brass) 22%, transparent);
	}

	/* Hide the spinner arrows; the field is a jump box, not a stepper. */
	.reader__page-input::-webkit-outer-spin-button,
	.reader__page-input::-webkit-inner-spin-button { appearance: none; margin: 0; }
	.reader__page-input { appearance: textfield; -moz-appearance: textfield; }

	/* ── Resume prompt ──────────────────────────────────────────────────── */

	.reader__resume {
		position: absolute;
		inset-block-end: clamp(4rem, 12vh, 7rem);
		inset-inline: 50%;
		translate: -50% 0;
		width: min(30rem, calc(100vw - 2rem));
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
		padding: var(--space-m);
		text-align: center;
		background-color: color-mix(in oklab, var(--color-night) 92%, transparent);
		border: 1px solid color-mix(in oklab, var(--color-brass) 40%, transparent);
		border-radius: var(--radius-m);
		box-shadow: var(--shadow-modal);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		z-index: 7;
	}

	.reader__resume[hidden] { display: none !important; }

	.reader__resume-text {
		font-size: 0.9375rem;
		color: var(--color-paper);
	}

	.reader__resume-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		justify-content: center;
	}

	.reader__resume .btn { padding-block: 0.6rem; }

	.reader__noscript {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-m);
		padding: var(--space-l);
		text-align: center;
		background-color: var(--color-night);
		z-index: 10;
	}

	/* ── Mobile ─────────────────────────────────────────────────────────── */

	@media (max-width: 47.99em) {
		/* Never force a spread onto a phone: two pages side by side means neither is
		   readable. Single page, swipe to turn. */
		.reader__page--right,
		.reader__gutter { display: none !important; }

		.reader__page--left::after { display: none; }

		.reader__flip {
			inset-inline-start: 0;
			width: 100%;
			transform-origin: left center;
		}

		.reader__edge { width: 22%; }
		.reader__edge-chevron { width: 38px; height: 38px; }

		.reader__identity { display: none; }

		.reader__stage { padding-inline: 0.25rem; }
	}

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