/* ==========================================================================
   Ebook Studio — Base Engine Styles
   Shared by every category. Theme files (theme-horror.css etc.) only
   override CSS variables + a few visual layers — they never redefine
   layout or state-transition logic. This is what keeps one engine
   working for every category.
   ========================================================================== */

:root {
	--es-accent: #8b0000;
	--es-bg: #0a0a0c;
	--es-text: #f2ede4;
	--es-text-muted: #b8b2a6;
	--es-panel-bg: rgba(10, 10, 12, 0.72);
	--es-radius: 6px;
	--es-transition-fast: 220ms ease;
	--es-transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);
	--es-font-display: Georgia, 'Times New Roman', serif;
	--es-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body.ebook-studio-body {
	margin: 0;
	padding: 0;
	background: var(--es-bg);
	color: var(--es-text);
	font-family: var(--es-font-body);
	overflow-x: hidden;
}

.es-stage {
	position: relative;
	min-height: 100vh;
	width: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* ---------- Environment layer ---------- */
.es-environment {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.es-bg {
	position: absolute;
	inset: 0;
	background: var(--es-bg-image, radial-gradient(circle at 50% 30%, #1a1a1f, var(--es-bg)));
	background-size: cover;
	background-position: center;
	transition: filter var(--es-transition-slow);
}
.es-weather, .es-particles { position: absolute; inset: 0; }

/* Spotlight-on-approach effect: EnvironmentStage dims as user nears the book */
.es-stage[data-state="approaching"] .es-bg,
.es-stage[data-state="bookFocused"] .es-bg,
.es-stage[data-state="pickedUp"] .es-bg {
	filter: brightness(0.55) blur(1px);
}

/* ---------- Minimal back link (pre-reader states only) ---------- */
.es-back-minimal {
	position: fixed; top: 18px; left: 18px; z-index: 50;
	color: rgba(255,255,255,0.75); font-size: 13px; text-decoration: none;
	background: rgba(0,0,0,0.3); padding: 6px 12px; border-radius: 999px;
	transition: color var(--es-transition-fast), background var(--es-transition-fast);
}
.es-back-minimal:hover { color: #fff; background: rgba(0,0,0,0.5); }
.es-stage[data-state="exploring"] .es-back-minimal,
.es-stage[data-state="storyMode"] .es-back-minimal,
.es-stage[data-state="lockedContent"] .es-back-minimal,
.es-stage[data-state="purchasePrompt"] .es-back-minimal { display: none; }
.es-btn {
	background: var(--es-panel-bg);
	color: var(--es-text);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: var(--es-radius);
	padding: 8px 14px;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--es-transition-fast), background var(--es-transition-fast);
}
.es-btn:hover { background: rgba(255,255,255,0.12); }
.es-btn:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 2px; }

/* ---------- Book stage ---------- */
.es-book-stage {
	position: relative;
	z-index: 5;
	text-align: center;
	transition: transform var(--es-transition-slow);
}
.es-book-3d-mount {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 340px; height: 460px; max-width: 80vw; max-height: 60vh;
	pointer-events: none; transition: opacity var(--es-transition-slow);
}
.es-book-3d-mount canvas { display: block; }
.es-book-stage.es-3d-active .es-book-cover { opacity: 0; pointer-events: none; }
.es-book {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.es-book-cover {
	width: 220px;
	height: 320px;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.6);
	animation: es-book-idle 5s ease-in-out infinite;
	transition: transform var(--es-transition-slow), box-shadow var(--es-transition-slow);
}
.es-book-cover-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: #1c1c22; color: var(--es-text); font-family: var(--es-font-display);
	padding: 20px; text-align: center;
}

/* "Living book" idle animation — breathing/floating, never distracting */
@keyframes es-book-idle {
	0%, 100% { transform: translateY(0) rotate(-0.4deg); }
	50%      { transform: translateY(-8px) rotate(0.4deg); }
}

.es-stage[data-state="approaching"] .es-book-cover,
.es-stage[data-state="bookFocused"] .es-book-cover {
	transform: scale(1.06);
	box-shadow: 0 0 60px 10px color-mix(in srgb, var(--es-accent) 45%, transparent);
}
.es-stage[data-state="pickedUp"] .es-book-cover,
.es-stage[data-state="opening"] .es-book-cover {
	transform: scale(1.35) translateY(-40px);
	animation: none;
}

.es-approach-hint {
	margin-top: 14px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--es-text-muted);
	opacity: 0;
	transition: opacity var(--es-transition-fast);
}
.es-stage[data-state="approaching"] .es-approach-hint,
.es-stage[data-state="bookFocused"] .es-approach-hint {
	opacity: 1;
}

/* ---------- Intro panel ---------- */
.es-intro-panel {
	position: relative;
	z-index: 5;
	text-align: center;
	max-width: 560px;
	margin-top: 24px;
	padding: 0 20px;
	transition: opacity var(--es-transition-fast);
}
.es-title { font-family: var(--es-font-display); font-size: 2rem; margin: 0 0 4px; }
.es-author { color: var(--es-text-muted); margin: 0 0 12px; font-style: italic; }
.es-description { color: var(--es-text-muted); line-height: 1.5; }

.es-stage[data-state="opening"] .es-intro-panel,
.es-stage[data-state="exploring"] .es-intro-panel,
.es-stage[data-state="storyMode"] .es-intro-panel {
	display: none;
}

/* Once the reader takes over, hide EVERY pre-reader layer completely —
   book stage, environment/particles, minimal-back link. Without this the
   book cover kept floating above the reader, splitting the page into two
   disconnected-looking sections. */
.es-stage[data-state="exploring"] .es-book-stage,
.es-stage[data-state="storyMode"] .es-book-stage,
.es-stage[data-state="lockedContent"] .es-book-stage,
.es-stage[data-state="purchasePrompt"] .es-book-stage,
.es-stage[data-state="exploring"] .es-environment,
.es-stage[data-state="storyMode"] .es-environment,
.es-stage[data-state="lockedContent"] .es-environment,
.es-stage[data-state="purchasePrompt"] .es-environment {
	display: none;
}

/* ---------- Summary experience ---------- */
.es-summary-experience {
	position: relative;
	z-index: 5;
	width: min(720px, 92vw);
	margin: 20px auto 60px;
}
.es-progress {
	text-align: center;
	color: var(--es-text-muted);
	font-size: 13px;
	margin-bottom: 14px;
}
.es-summary-point {
	background: var(--es-panel-bg);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 18px;
	opacity: 0;
	transform: translateY(16px);
	animation: es-point-reveal var(--es-transition-slow) forwards;
}
@keyframes es-point-reveal { to { opacity: 1; transform: translateY(0); } }
.es-summary-point h3 { font-family: var(--es-font-display); margin: 0 0 8px; }
.es-summary-point p { color: var(--es-text-muted); line-height: 1.55; margin: 0 0 10px; }
.es-summary-point .es-point-image {
	width: 100%; border-radius: 8px; margin-bottom: 12px;
	overflow: hidden;
}
.es-summary-point .es-point-image img {
	width: 100%; display: block; transition: transform 8s ease-out;
}
.es-summary-point.es-anim-kenBurns .es-point-image img { transform: scale(1.12); }

.es-mode-toggle { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }

/* ---------- Lock / purchase ---------- */
.es-lock-panel {
	position: relative;
	z-index: 5;
	text-align: center;
	background: var(--es-panel-bg);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 12px;
	padding: 40px 30px;
	max-width: 420px;
	margin: 0 auto 60px;
}
.es-lock-icon { font-size: 2rem; margin-bottom: 10px; }
.es-lock-message { color: var(--es-text-muted); margin-bottom: 18px; }
.es-btn-purchase {
	display: inline-block;
	background: var(--es-accent);
	color: #fff;
	padding: 12px 28px;
	border-radius: 999px;
	font-weight: 600;
	transition: transform var(--es-transition-fast);
}
.es-btn-purchase:hover { transform: translateY(-2px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.es-book-cover { animation: none !important; }
	.es-summary-point { animation: none !important; opacity: 1; transform: none; }
	.es-point-image img { transition: none !important; transform: none !important; }
	* { scroll-behavior: auto !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.es-book-cover { width: 160px; height: 230px; }
	.es-title { font-size: 1.5rem; }
	.es-back-minimal { top: 10px; left: 10px; }
	.es-btn { padding: 6px 10px; font-size: 12px; }
}

/* ---------- Book Portal (cinematic slideshow interlude) ---------- */
.es-portal {
	position: fixed; inset: 0; z-index: 40; background: #000;
	overflow: hidden;
}
.es-portal-slides { position: absolute; inset: 0; }
.es-portal-slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; transform: scale(1.08);
	transition: opacity 1.1s ease;
}
.es-portal-slide.es-active {
	opacity: 1;
	animation: es-portal-kenburns 4.2s ease-out forwards;
}
@keyframes es-portal-kenburns {
	from { transform: scale(1.14); }
	to   { transform: scale(1.0); }
}
.es-portal-vignette {
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.75) 100%),
	            linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 30%);
	pointer-events: none;
}
.es-portal-caption {
	position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%);
	width: min(640px, 86vw); text-align: center;
	color: #f2ede4; font-family: var(--es-font-display); font-size: 1.3rem;
	text-shadow: 0 2px 12px rgba(0,0,0,0.8);
	opacity: 0;
}
.es-portal-caption.es-caption-in { animation: es-caption-fade 4.2s ease forwards; }
@keyframes es-caption-fade {
	0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
	15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
	85%  { opacity: 1; }
	100% { opacity: 0; }
}
.es-portal-dots {
	position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%);
	display: flex; gap: 8px;
}
.es-portal-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: rgba(255,255,255,0.35); transition: background var(--es-transition-fast), transform var(--es-transition-fast);
}
.es-portal-dot.es-active { background: #fff; transform: scale(1.3); }
.es-portal-skip {
	position: absolute; top: 20px; right: 20px; z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
	.es-portal { display: none !important; }
}
@media (max-width: 640px) {
	.es-portal-caption { font-size: 1.05rem; bottom: 70px; }
	.es-portal-dots { bottom: 44px; }
}

/* ---------- Archive page ---------- */
.es-archive-wrap { max-width: 1100px; margin: 0 auto; padding: 40px 20px; }
.es-archive-title { font-family: var(--es-font-display); }
.es-archive-filters { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.es-archive-filters input, .es-archive-filters select {
	padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc;
}
.es-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 20px;
}
.es-archive-card { text-decoration: none; color: inherit; }
.es-archive-card img { width: 100%; border-radius: 6px; display: block; margin-bottom: 8px; }
.es-archive-card h2 { font-size: 1rem; margin: 0 0 2px; }
.es-archive-card p { font-size: 0.85rem; color: #777; margin: 0; }