/* Visible by DEFAULT in pure CSS (not display:none waiting on JS) so it
   covers the viewport immediately on paint, before any JS has run. JS
   (loader.js) only ever ADDS a class to hide it — if JS fails entirely,
   the loader still fades per the CSS transition below via the fallback
   in loader.js, and worst case it simply stays as a branded screen
   rather than blocking real content (see max-height/overflow note). */

#vcs-loader{
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: #15130F;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.3s ease;
}

#vcs-loader.vcs-loader-hidden{
	opacity: 0;
	pointer-events: none;
}

.vcs-loader-mark{
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.02em;
	color: #FAF7F2;
	animation: vcs-loader-pulse 1.1s ease-in-out infinite;
}

@keyframes vcs-loader-pulse{
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce){
	.vcs-loader-mark{ animation: none; }
	#vcs-loader{ transition: opacity 0.05s linear; }
}