@import "tailwindcss";

/* Intro font family - Self hosted */
@font-face {
	font-family: "Intro";
	src:
		local("Intro Demo"),
		url("/fonts/IntroDemoBlackCaps.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Intro Inline";
	src:
		local("Intro Demo"),
		url("/fonts/IntroDemoBlackCapsInline.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Smooth scrolling for the entire page */
html {
	scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */
html {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

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

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

::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 3px;
}

/* Sticky scroll container with snap points */
.sticky-scroll-container {
	height: 400vh; /* 4 sections x 100vh */
	position: relative;
}

.sticky-section {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
}

/* Scroll snap for the whole page - mandatory snapping to closest section */
html {
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
}

.snap-section {
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Ensure snap works consistently in both directions */
.snap-section {
	scroll-margin-top: 0;
}
