@media (prefers-reduced-motion: no-preference) {
	.shine {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100vw;
		height: 100dvh;
		z-index: 999999;
		pointer-events: none;
		background-image: radial-gradient(
			at var(--x) var(--y),
			hsla(var(--highlight-hue), var(--highlight-sat), var(--highlight-lum), 1),
			var(--hotpink)
		);
		background-size: 100%;
		mix-blend-mode: hard-light;
		animation: pulse ease infinite alternate 10s;
	}
	@keyframes pulse {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	@media (color-gamut: p3) {
		.shine {
			background-image: radial-gradient(
				at var(--x) var(--y),
				oklch(
					var(--highlight-lum) var(--highlight-sat) var(--highlight-hue) / 1
				),
				var(--hotpink)
			);
		}
	}
	.bg {
		position: fixed;
		z-index: 9999999999;
		top: -50%;
		left: -50%;
		right: -50%;
		bottom: -50%;
		width: 200%;
		height: 200vh;
		background: transparent url('/v/https/etcd.wtf/visual-snow-transparent.png') repeat 0 0;
		background-repeat: repeat;
		animation: bg-animation 0.2s infinite;
		opacity: 0.9;
		pointer-events: none;
	}
	@keyframes bg-animation {
		0% {
			transform: translate(0, 0);
		}
		10% {
			transform: translate(-5%, -5%);
		}
		20% {
			transform: translate(-10%, 5%);
		}
		30% {
			transform: translate(5%, -10%);
		}
		40% {
			transform: translate(-5%, 15%);
		}
		50% {
			transform: translate(-10%, 5%);
		}
		60% {
			transform: translate(15%, 0);
		}
		70% {
			transform: translate(0, 10%);
		}
		80% {
			transform: translate(-15%, 0);
		}
		90% {
			transform: translate(10%, 5%);
		}
		100% {
			transform: translate(5%, 0);
		}
	}
}