/* ============================================================
   trouve.nsi.xyz — feuille de style
   Ambiance « Matrix » : noir, vert, monospace. Aucun framework.
   ============================================================ */

:root {
	--fond: #000600;
	--vert: #21ff7a;       /* vert terminal */
	--vert-sombre: #0a7a3a;
	--carte: rgba(0, 12, 4, 0.78);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
	background: var(--fond);
	color: var(--vert);
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow-x: hidden;
}

/* La pluie de caractères occupe l'écran, derrière la carte. */
#pluie {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.carte {
	max-width: 720px;
	width: 100%;
	background: var(--carte);
	border: 1px solid var(--vert-sombre);
	border-radius: 12px;
	padding: 40px 32px;
	box-shadow: 0 0 40px rgba(33, 255, 122, 0.12);
}

h1 {
	margin: 0 0 20px;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-shadow: 0 0 12px rgba(33, 255, 122, 0.6);
}

/* La citation, révélée mot à mot par script.js. */
#citation {
	margin: 0 0 24px;
	padding-left: 16px;
	border-left: 3px solid var(--vert-sombre);
	line-height: 1.8;
	font-size: clamp(0.95rem, 2.6vw, 1.15rem);
	min-height: 6em;
}

/* Le curseur affiché pendant l'écriture (ajouté par le JavaScript). */
#citation .curseur {
	display: inline-block;
	width: 0.6em;
	background: var(--vert);
	animation: clignote 0.8s steps(1) infinite;
}

@keyframes clignote { 50% { opacity: 0; } }

.signature { color: #bfffd8; }

a {
	color: var(--vert);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
a:hover { text-shadow: 0 0 10px var(--vert); }

/* Si l'utilisateur préfère moins d'animation : pas de curseur clignotant. */
@media (prefers-reduced-motion: reduce) {
	#citation .curseur { animation: none; }
}