/* ===== Flipbook — base ===== */
* { box-sizing: border-box; }

html, body {
	overflow: hidden;
	background-color: #bec3c7;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	-webkit-tap-highlight-color: transparent;
}

#canvas {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
}
#canvas.is-ready { opacity: 1; }

/* ===== Viewport ===== */
.magazine-viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.magazine-viewport .container {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1400px;
	height: 700px;
	margin: auto;
}

.magazine-viewport .magazine {
	width: 1400px;
	height: 700px;
	left: -700px;
	top: -350px;
	position: absolute;
	cursor: pointer;
}

.magazine-viewport .page {
	width: 700px;
	height: 700px;
	background-color: #bec3c7;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.magazine-viewport .page img {
	-webkit-touch-callout: none;
	user-select: none;
	-webkit-user-select: none;
	margin: 0;
	display: block;
}

.magazine .page {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* soft page shadows while turning */
.magazine-viewport .shadow {
	transition: box-shadow 0.5s;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}

/* turn.js gradients (soft rounded page-turn on both sides) */
.magazine .even .gradient {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-image: linear-gradient(to right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}
.magazine .odd .gradient {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-image: linear-gradient(to left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
}
.magazine-viewport .zoom-in .even .gradient,
.magazine-viewport .zoom-in .odd .gradient { display: none; }

/* loader dot on each page while its image loads */
.magazine-viewport .loader {
	width: 34px; height: 34px;
	position: absolute;
	top: 50%; left: 50%;
	margin: -17px 0 0 -17px;
	border: 3px solid rgba(0, 0, 0, 0.15);
	border-top-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Side navigation bars =====
 * Children of .magazine, pinned just outside each page edge. turn.js moves
 * .magazine when it re-centres a lone page into a spread, and the bars ride
 * along with it — always exactly at the book edge, no JS, no catch-up. */
.nav-arrow {
	position: absolute;
	top: 0;
	height: 100%;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 24, 28, 0.34);
	cursor: pointer;
	z-index: 60;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s ease, background 0.2s ease;
}
.nav-arrow.prev { left:  -30px; border-radius: 14px 0 0 14px; }
.nav-arrow.next { right: -30px; border-radius: 0 14px 14px 0; }

/* revealed by JS only while the pointer is over a lateral zone (see app.js) */
.magazine-viewport.nav-visible .nav-arrow { opacity: 1; pointer-events: auto; }
/* a page turn hides them instantly, without a fade */
.magazine-viewport.nav-hiding .nav-arrow { transition: none; opacity: 0; pointer-events: none; }

.nav-arrow:hover { background: rgba(20, 24, 28, 0.55); }
.nav-arrow:active { background: rgba(20, 24, 28, 0.65); }
.nav-arrow svg { width: 20px; height: 20px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.nav-arrow.is-hidden { display: none !important; }

/* hide side bars while zoomed in */
.is-zoomed .nav-arrow { display: none; }

/* ===== Top-right "ampliar" button ===== */
#expandBtn {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 42px;
	height: 42px;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 11px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	color: #2b2f33;
	transition: background 0.18s ease, transform 0.18s ease;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
#expandBtn:hover { background: rgba(255, 255, 255, 0.92); }
#expandBtn:active { transform: scale(0.94); }
#expandBtn svg { width: 20px; height: 20px; display: block; }
#expandBtn .icon-compress { display: none; }
#expandBtn.zoomed .icon-expand { display: none; }
#expandBtn.zoomed .icon-compress { display: block; }

/* dragging hint while zoomed */
.magazine-viewport.is-zoomed { cursor: grab; }
.magazine-viewport.is-zoomed:active { cursor: grabbing; }

.exit-message {
	position: absolute;
	top: 14px; left: 0;
	width: 100%;
	text-align: center;
	z-index: 1200;
	pointer-events: none;
	font: 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.exit-message span {
	display: inline-block;
	padding: 8px 14px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	border-radius: 999px;
}

/* ===== Responsive ===== */
@media (max-width: 760px), (pointer: coarse) {
	.nav-arrow {
		opacity: 0.6;
		pointer-events: auto;
		width: 30px;
		background: rgba(20, 24, 28, 0.34);
	}
	.nav-arrow.prev { left:  0; border-radius: 0 12px 12px 0; }
	.nav-arrow.next { right: 0; border-radius: 12px 0 0 12px; }
	#expandBtn { top: 12px; right: 12px; width: 38px; height: 38px; }
}