@font-face {
		font-family: 'Symphony Pro';
		src: url('symphony-pro-regular.otf') format('opentype'),
			 url('symphony-pro-regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'The Seasons';
		src: url('theseasons-regular.otf') format('opentype');
		font-weight: normal;
		font-style: normal;
	}

	/* Forcing The Seasons on the serif utility */
	.font-serif { 
		font-family: 'The Seasons', serif !important; 
	}
	
	.font-symphony { 
		font-family: 'Symphony Pro', Arial, Helvetica, 'Times New Roman', Georgia, cursive; 
	}
	
	body {
		font-family: 'The Seasons', serif;
	}

	html {
		scroll-behavior: smooth;
	}

	.no-scrollbar::-webkit-scrollbar {
		display: none;
	}
	.no-scrollbar {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.feathered-edge {
		mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent), 
					linear-gradient(to right, transparent, black 5%, black 95%, transparent);
		mask-composite: intersect;
		-webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent), 
							linear-gradient(to right, transparent, black 5%, black 95%, transparent);
		-webkit-mask-composite: source-in;
	}

	.grain-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 101;
		opacity: 0.15;
		filter: contrast(120%) brightness(100%);
	}

	.book-content-wrapper {
		position: relative;
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
		/* Changed from height: 100% to min-height to prevent clipping content on overflow */
		min-height: 100%;
		z-index: 5;
	}

	.page-edge-left {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 40px;
		background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
		z-index: 10;
		pointer-events: none;
	}
	.page-edge-right {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 40px;
		background: linear-gradient(to left, rgba(0,0,0,0.06), transparent);
		z-index: 10;
		pointer-events: none;
	}

	@media (min-width: 768px) {
		.page-edge-left {
			width: 80px;
			background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
		}
		.page-edge-right {
			width: 80px;
			background: linear-gradient(to left, rgba(0,0,0,0.06), transparent);
		}
	}

	@keyframes heartbeat {
		0%, 100% { transform: scale(1); opacity: 1; }
		50% { transform: scale(1.15); opacity: 0.8; }
	}
	.animate-heartbeat {
		animation: heartbeat 0.8s ease-in-out infinite;
	}

	.reveal {
		opacity: 0;
		transform: translateY(20px);
		transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.reveal.active {
		opacity: 1;
		transform: translateY(0);
	}
	.reveal-scale {
		opacity: 0;
		transform: scale(0.95);
		transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.reveal-scale.active {
		opacity: 1;
		transform: scale(1);
	}
	.reveal-grow-10 {
		transform: translateX(-50%) scale(1);
		transform-origin: bottom center;
		transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.reveal-grow-10.active {
		transform: translateX(-50%) scale(1.1);
	}