/* PlaySmart AI — Cyber Minimalist CSS */

/* 1. Base Setup */
body {
	font-family: 'Space Grotesk', sans-serif;
	background-color: #0a0a0a;
	color: #ffffff;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
nav a,
.font-mono,
[class*="text-xs font-mono"] {
	text-transform: uppercase;
}

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

::-webkit-scrollbar-track {
	background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
	background: #333;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #7f13ec;
}

/* 2. WebGL Canvas */
#shader-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	/* Behind content */
	pointer-events: none;
	/* Let clicks pass through */
}

/* 3. Utilities (Matching code.html + extras) */
.glass-card {
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.glow-subtle {
	box-shadow: 0 0 40px -10px rgba(127, 19, 236, 0.3);
}

.text-gradient {
	background: linear-gradient(135deg, #fff 0%, #7f13ec 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* 4. Animations */

/* Marquee for Logic Credibility */
@keyframes marquee {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.animate-marquee {
	animation: marquee 30s linear infinite;
	display: flex;
	white-space: nowrap;
}

.animate-marquee:hover {
	animation-play-state: paused;
}

/* Shimmer Effect for Blueprints connectors */
@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(200%);
	}
}

/* Pulse Glow */
@keyframes pulse-glow {

	0%,
	100% {
		opacity: 0.5;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(1.2);
	}
}

/* Reveal Animation Class (Added by JS intersection observer) */
.animate-reveal {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* Utility to ensure elements are hidden initially for JS reveal */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}