@import "tailwindcss";
@import "fumadocs-ui/css/ocean.css";
@import "fumadocs-ui/css/preset.css";

@source '../../../../node_modules/fumadocs-ui/dist/**/*.js';

@custom-variant dark (&:where(.dark, .dark *));

.bg-noise {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
}

.shiny-text {
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 40%,
		rgba(255, 255, 255, 0.8) 50%,
		rgba(255, 255, 255, 0) 60%
	);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	display: inline-block;
	animation: shine 5s linear infinite;
}

@keyframes shine {
	0% {
		background-position: 100%;
	}

	100% {
		background-position: -100%;
	}
}

.shiny-text.disabled {
	animation: none;
}

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

.animate-fadeIn {
	opacity: 0;
	animation: fadeInUp 0.5s ease-out forwards;
}

.border-beam {
	animation: border-beam 3s linear infinite;
}

@keyframes border-beam {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 200% 50%;
	}
}

/* custom scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: rgba(16, 0, 16, 0.493);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(45deg, #666, #888);
	border-radius: 4px;
	border: 2px solid #1a1a1a;
	transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(45deg, #888, #aaa);
}