/* Layers, back to front: void (html) -> nebula + vignette + grain (body::before)
   -> Noctis pulse (body::after) -> ember canvas -> content. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -3;
	background:
		url("../img/grain.svg"),
		radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(5, 2, 4, .78) 100%),
		linear-gradient(to bottom, rgba(11, 7, 9, .25), rgba(11, 7, 9, .55)),
		url("../img/nebula.webp") center / cover no-repeat;
	pointer-events: none;
}

/* Noctis keeps the time: soft violet flash from above. */
body::after {
	content: "";
	position: fixed;
	inset: -10% -10% auto auto;
	width: 80vmax;
	height: 80vmax;
	z-index: -2;
	background: radial-gradient(circle at 70% 25%, rgba(155, 123, 212, .45), rgba(155, 123, 212, .08) 35%, transparent 60%);
	opacity: 0;
	pointer-events: none;
	animation: noctis-pulse 9s ease-in-out infinite;
}

@keyframes noctis-pulse {
	0%, 100% { opacity: 0; }
	4% { opacity: .9; }
	12% { opacity: .15; }
	18% { opacity: .35; }
	30% { opacity: 0; }
}

.ember-field {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	body::after { animation: none; opacity: .25; }
}