/* Pas de texte dans la pièce : aucune webfont nécessaire */

body {
	font-family: system-ui, sans-serif;
	overflow-x: hidden;
	margin: 0;
	background: #0c0a09;
	color: #e7e5e4; /* stone-200 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Tout l'écran est cliquable : play / pause */
	cursor: pointer;
}

::selection {
	background: rgba(245, 158, 11, 0.3); /* amber-500/30 */
	color: #fde68a; /* amber-200 */
}

/* Canvas Three.js en fond fixe */
#net-art-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
	pointer-events: none;
}

/* Vignette de cinéma */
#vignette {
	position: fixed;
	inset: 0;
	z-index: -10;
	pointer-events: none;
	background: radial-gradient(
		circle at center,
		rgba(0, 0, 0, 0) 40%,
		rgba(12, 10, 9, 0.95) 95%
	);
}

/* Barre de progression du scroll */
#scroll-progress-track {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #1c1917; /* stone-900 */
	z-index: 50;
}

#scroll-progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(
		to right,
		#ef4444, /* red-500 */
		#06b6d4, /* cyan-500 */
		#a855f7, /* purple-500 */
		#10b981  /* emerald-500 */
	);
	transition: width 75ms linear;
}

/* Espace de défilement */
#scroll-space {
	position: relative;
	z-index: 10;
	height: 1337vh;
}

/* ====== Bouton Play plein écran ====== */
#play-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 40;
	/* Le clic passe à travers : c'est le document qui gère le toggle */
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.6s ease;
}

#play-overlay.is-hidden {
	opacity: 0;
}

#play-btn {
	width: clamp(110px, 18vmin, 170px);
	height: clamp(110px, 18vmin, 170px);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(12, 10, 9, 0.55);
	border: 1px solid rgba(245, 158, 11, 0.45);
	box-shadow:
		0 0 40px rgba(239, 68, 68, 0.25),
		0 0 90px rgba(6, 182, 212, 0.15),
		inset 0 0 30px rgba(245, 158, 11, 0.08);
	animation: play-pulse 3.5s ease-in-out infinite;
	transition: transform 0.6s ease;
}

#play-overlay.is-hidden #play-btn {
	transform: scale(1.6);
}

#play-icon {
	font-size: clamp(34px, 6vmin, 56px);
	color: #f5f5f4;
	text-shadow: 0 0 18px rgba(245, 158, 11, 0.8);
	transform: translateX(4px);
	line-height: 1;
	user-select: none;
}

@keyframes play-pulse {
	0%, 100% {
		box-shadow:
			0 0 40px rgba(239, 68, 68, 0.25),
			0 0 90px rgba(6, 182, 212, 0.15),
			inset 0 0 30px rgba(245, 158, 11, 0.08);
	}
	50% {
		box-shadow:
			0 0 60px rgba(239, 68, 68, 0.4),
			0 0 120px rgba(168, 85, 247, 0.25),
			inset 0 0 40px rgba(245, 158, 11, 0.15);
	}
}

@media (prefers-reduced-motion: reduce) {
	#play-btn { animation: none; }
}

/* Masquage de la scrollbar pour une immersion totale tout en permettant le défilement */
::-webkit-scrollbar {
	width: 2px;
}

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

::-webkit-scrollbar-thumb {
	background: #44403c;
	border-radius: 2px;
}