/* Page transition animations: operate on the inner #page-content to avoid blank flashes */
#page-content {
	transition:
		opacity 280ms ease,
		transform 280ms ease;
	opacity: 1;
	transform: translateY(0);
	will-change: opacity, transform;
}

#page-content.is-exiting {
	opacity: 0;
	transform: translateY(-6px);
}

#page-content.is-entering {
	opacity: 0;
	transform: translateY(6px);
	animation: contentFadeIn 320ms ease forwards;
}

@keyframes contentFadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Thin loading bar at top (simple lightweight NProgress-like indicator) */
#loading-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, #7c3aed, #06b6d4);
	z-index: 10000;
	transition:
		width 300ms ease,
		opacity 200ms ease;
	opacity: 0;
	transform-origin: left;
	pointer-events: none;
}

#loading-bar.visible {
	opacity: 1;
}

/* Reading progress bar */
.progress-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px; /* Adjust height as needed */
	z-index: 1000;
	background-color: transparent;
}

.progress-bar {
	height: 100%;
	width: 0%;
	background-color: #111111; /* Light mode color */
	transition: width 0.1s linear;
}

.dark .progress-bar {
	background-color: #4b4b4b; /* Dark mode color */
}

/* Asegura que los anclajes no queden tapados por el header sticky */
html {
	scroll-padding-top: 100px; /* Espacio para el header */
	scroll-behavior: smooth;
}

/* O específicamente a los encabezados del contenido */
.prose h2,
.prose h3 {
	scroll-margin-top: 100px;
}