/* ==========================================================================
   CLOUDWRAITH - FRONT PAGE BACKDROP

   A fixed layer behind everything on the home page: character rain, a Tron
   grid running to a horizon, and a radial wash that pulls the middle of the
   screen back down to near-black so body copy never fights the artwork.
   Every value resolves to a token; the grid tint follows the accent.
   ========================================================================== */

.cw-backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background: var(--cw-void);

	--cw-grid-line: rgba(75, 255, 139, 0.42);
	--cw-grid-gap:  96px;
	--cw-horizon:   33vh;
}

/* --- Character rain ------------------------------------------------------ */

.cw-backdrop__rain {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.16;
}

/* --- Tron grid ----------------------------------------------------------- */

.cw-backdrop__grid {
	position: absolute;
	left: -60%;
	right: -60%;
	bottom: 0;
	height: 92vh;
	opacity: 1;
	background-image:
		repeating-linear-gradient(to right,
			var(--cw-grid-line) 0 1px, transparent 1px var(--cw-grid-gap)),
		repeating-linear-gradient(to bottom,
			var(--cw-grid-line) 0 1px, transparent 1px var(--cw-grid-gap));
	transform: perspective(700px) rotateX(64deg);
	transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(to top,
		#000 0%, rgba(0, 0, 0, 0.60) 46%, transparent 92%);
	mask-image: linear-gradient(to top,
		#000 0%, rgba(0, 0, 0, 0.60) 46%, transparent 92%);
}

/* The light source the grid runs toward. */
.cw-backdrop__horizon {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--cw-horizon);
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(75, 255, 139, 0.50) 30%,
		rgba(157, 255, 196, 0.70) 50%,
		rgba(75, 255, 139, 0.50) 70%,
		transparent 100%);
	box-shadow: 0 0 48px 8px rgba(75, 255, 139, 0.13);
}

/* --- Legibility wash ----------------------------------------------------- */

.cw-backdrop__wash {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 78% at 50% 28%,
		rgba(4, 7, 10, 0.00)  0%,
		rgba(4, 7, 10, 0.42) 48%,
		rgba(4, 7, 10, 0.72) 100%);
}

/* --- Responsive and motion ----------------------------------------------- */

@media (max-width: 1024px) {
	.cw-backdrop { --cw-grid-gap: 64px; }
	.cw-backdrop__grid { opacity: 0.46; }
}

@media (max-width: 767px) {
	.cw-backdrop { --cw-grid-gap: 48px; --cw-horizon: 22vh; }
	.cw-backdrop__grid { opacity: 0.38; }
	.cw-backdrop__rain { opacity: 0.12; }
}

@media (prefers-reduced-motion: reduce) {
	.cw-backdrop__rain { display: none; }
}