html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Space Grotesk', sans-serif;
}

.font-mono-custom {
	font-family: 'Space Mono', monospace;
}

#particles {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

@keyframes slideUp {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@keyframes slideDown {
	from { transform: translateY(0); }
	to   { transform: translateY(100%); }
}

.details-overlay {
	animation: slideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.details-overlay.closing {
	animation: slideDown 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.grain::before {
	content: '';
	position: fixed;
	inset: -50%;
	width: 200%;
	height: 200%;
	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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 1;
	opacity: 0.12;
}

.hero-headline {
	font-size: clamp(3rem, 8vw, 7rem);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.03em;
}

.nav-link {
	position: relative;
}

.nav-link:hover {
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 4px;
}

.cta-btn {
	border: 1px dashed rgba(14, 14, 14, 0.25);
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cta-btn:hover {
	background: #0e0e0e;
	color: #F2F0EB;
	border-color: #0e0e0e;
}

.scroll-line {
	width: 1px;
	height: 60px;
	background: linear-gradient(to bottom, transparent, rgba(14, 14, 14, 0.4));
	animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
	0%, 100% { opacity: 0.3; transform: scaleY(1); }
	50% { opacity: 1; transform: scaleY(1.2); }
}

.tag-pill {
	border: 1px dashed rgba(14, 14, 14, 0.25);
	background: rgba(14, 14, 14, 0.03);
}