@layer theme, base, mantine, components, utilities;

@import "tailwindcss";

@import "@mantine/core/styles.layer.css";

/* Dark mode base - prevent white flash
* {
	border-color: #1f2937;
} */

/* html {
	background-color: #111827;
	scroll-behavior: smooth;
}

body {
	background-color: #111827 !important;
	color: white;
	margin: 0;
	padding: 0;
} */

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

::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.5);
}

/* View Transitions API Configuration */
/* Enable smooth cross-document view transitions (browser navigation) */
@view-transition {
	navigation: auto;
}

/* Default transition for all elements */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}

/* Fade transition for page root */
::view-transition-old(root) {
	animation-name: fade-out;
}

::view-transition-new(root) {
	animation-name: fade-in;
}

/* Custom transitions for specific elements with view-transition-name */
::view-transition-old(*),
::view-transition-new(*) {
	animation-duration: 0.4s;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	animation-fill-mode: both;
}

/* Smooth image transitions */
::view-transition-image-pair(*) {
	isolation: isolate;
}

/* Keyframes for fade animations */
@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}