/* Deferred CSS - Non-critical styles loaded asynchronously */
/* These styles do not block rendering and can be loaded after page paint */

/* Non-Critical Animations */
@layer utilities {
	@keyframes shimmer {
		0% {
			transform: translateX(-100%);
		}
		100% {
			transform: translateX(100%);
		}
	}

	.animate-shimmer {
		animation: shimmer 2s infinite;
	}

	@keyframes float {
		0%, 100% { transform: translateY(0px); }
		50% { transform: translateY(-10px); }
	}

	.animate-float {
		animation: float 3s ease-in-out infinite;
	}

	@keyframes gradient-xy {
		0%, 100% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
	}

	.animate-gradient-xy {
		animation: gradient-xy 15s ease infinite;
		background-size: 400% 400%;
	}
}

/* Modern Scrollbar Styles - Non-Critical */
* {
	scrollbar-width: thin;
	scrollbar-color: rgb(156 163 175 / 0.3) transparent;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgb(var(--schoolboost-magenta) / 0.3) 0%, rgb(var(--schoolboost-blue) / 0.3) 100%);
	border-radius: 4px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, rgb(var(--schoolboost-magenta) / 0.5) 0%, rgb(var(--schoolboost-blue) / 0.5) 100%);
	background-clip: padding-box;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

/* Dark mode scrollbar */
.dark * {
	scrollbar-color: rgb(75 85 99 / 0.3) transparent;
}

.dark ::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgb(var(--schoolboost-magenta) / 0.2) 0%, rgb(var(--schoolboost-blue) / 0.2) 100%);
	background-clip: padding-box;
}

.dark ::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, rgb(var(--schoolboost-magenta) / 0.4) 0%, rgb(var(--schoolboost-blue) / 0.4) 100%);
	background-clip: padding-box;
}

.scrollbar-hide {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
	display: none;
}

.scrollbar-thin {
	scrollbar-width: thin;
	scrollbar-color: rgb(156 163 175 / 0.2) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.scrollbar-thin::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 2.5px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgb(var(--schoolboost-magenta) / 0.25) 0%, rgb(var(--schoolboost-blue) / 0.25) 100%);
	border-radius: 2.5px;
	border: 1px solid transparent;
	background-clip: padding-box;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, rgb(var(--schoolboost-magenta) / 0.4) 0%, rgb(var(--schoolboost-blue) / 0.4) 100%);
	background-clip: padding-box;
}

/* Dark mode thin scrollbar */
.dark .scrollbar-thin {
	scrollbar-color: rgb(75 85 99 / 0.2) transparent;
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgb(var(--schoolboost-magenta) / 0.15) 0%, rgb(var(--schoolboost-blue) / 0.15) 100%);
	background-clip: padding-box;
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, rgb(var(--schoolboost-magenta) / 0.3) 0%, rgb(var(--schoolboost-blue) / 0.3) 100%);
	background-clip: padding-box;
}

/* Navigation Button Styles - Non-Critical */
@layer components {
	.nav-button-primary {
		padding: 0.5rem 1.25rem;
		background-color: rgb(226 0 122);
		color: white;
		font-size: 0.875rem;
		font-weight: 500;
		border-radius: 0.5rem;
		display: inline-block;
		transition: all 0.2s;
	}

	.nav-button-primary:hover {
		background-color: rgb(226 0 122 / 0.9);
		box-shadow: 0 10px 15px -3px rgb(226 0 122 / 0.2);
	}

	.nav-button-primary:active {
		transform: scale(0.98);
	}

	.nav-button-secondary {
		padding: 0.5rem 1.25rem;
		border: 2px solid rgb(209 213 219);
		color: rgb(55 65 81);
		font-size: 0.875rem;
		font-weight: 500;
		border-radius: 0.5rem;
		display: inline-block;
		transition: all 0.2s;
	}

	.nav-button-secondary:hover {
		border-color: rgb(226 0 122);
		color: rgb(226 0 122);
		background-color: rgb(226 0 122 / 0.05);
	}

	.nav-button-secondary:active {
		transform: scale(0.98);
	}

	/* Navigation Link Styles */
	.nav-link {
		position: relative;
		display: inline-block;
		padding: 0.5rem 0.75rem;
		font-weight: 500;
		color: rgb(55 65 81);
		transition: color 0.2s;
	}

	.nav-link:hover {
		color: rgb(226 0 122);
	}

	.nav-link-active {
		color: rgb(226 0 122);
	}

	.nav-link-underline {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 0.125rem;
		background-color: rgb(226 0 122);
	}

	/* Custom Scrollbar */
	.custom-scrollbar {
		scrollbar-width: thin;
		scrollbar-color: rgb(var(--schoolboost-magenta) / 0.3) transparent;
	}

	.custom-scrollbar::-webkit-scrollbar {
		width: 6px;
	}

	.custom-scrollbar::-webkit-scrollbar-track {
		background: transparent;
		border-radius: 3px;
	}

	.custom-scrollbar::-webkit-scrollbar-thumb {
		background-color: rgb(var(--schoolboost-magenta) / 0.3);
		border-radius: 3px;
		transition: background-color 0.2s;
	}

	.custom-scrollbar::-webkit-scrollbar-thumb:hover {
		background-color: rgb(var(--schoolboost-magenta) / 0.5);
	}
}

/* Fumadocs and Code Styles - Non-Critical */
pre.shiki {
	margin-bottom: 1rem;
	border-radius: 0.5rem;
	padding: 1.5rem;
}

#nd-sidebar {
	background-color: var(--card) !important;
	top: 4.5rem;
}

@media (min-width: 768px) {
	#nd-sidebar {
		height: calc(100dvh - 4.5rem) !important;
	}
}

#nd-sidebar button[data-search-full] {
	background-color: transparent;
}

#nd-page .prose h1 a,
#nd-page .prose h2 a,
#nd-page .prose h3 a,
#nd-page .prose h4 a,
#nd-page .prose h5 a,
#nd-page .prose h6 a {
	text-decoration: none !important;
}

div[role="tablist"].bg-secondary {
	background-color: var(--muted) !important;
}

input[cmdk-input] {
	border: none;
	outline: none;
}

input[cmdk-input]:focus-visible {
	outline: none;
	ring-width: 0;
}