/* 
 * scroll.css - All styles for the buffer scroll system
 * Add this as a new file: public/css/scroll.css
 * Include in HTML: <link rel="stylesheet" href="/css/scroll.css">
 */

/* Hide scrollbars on blog container */
#blog-container {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

#blog-container::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Opera */
}

/* Ensure blog container can be relative positioned */
#blog-container {
	position: relative;
}

/* Blog post inside scroll wrapper */
#scroll-wrapper {
	position: relative;
	width: 100%;
}

#blog-post {
	position: relative;
	will-change: transform, opacity;
}

/* Buffer divs don't need any styling - they're just empty space */
#top-buffer,
#bottom-buffer {
	width: 100%;
	/* Height is set inline by JavaScript */
}

/* ===== DEBUG MODE STYLES ===== */

/* Debug: Blog container outline */
body.debug-blog-container #blog-container {
	outline: 3px solid #3498db;
	outline-offset: -3px;
}

/* Debug: Text content outline */
body.debug-text-content #blog-post .blog-content {
	outline: 3px solid #2ecc71;
	outline-offset: -3px;
}

/* Debug: 50% threshold line and label */
/* These are created as overlay elements by Cat Scratch */
.threshold-overlay {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	background: #e74c3c;
	z-index: 9999;
	pointer-events: none;
	transform: translateY(-1px);
}

.threshold-label {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	background: #e74c3c;
	color: white;
	padding: 4px 8px;
	font-size: 12px;
	border-radius: 3px;
	z-index: 9999;
	pointer-events: none;
}

/* Smooth transitions during post changes */
#blog-post {
	transition-property: transform, opacity;
	transition-duration: 400ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove transition during setup */
#blog-post.no-transition {
	transition: none !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.threshold-label {
		font-size: 10px;
		padding: 2px 6px;
	}
}