/*
     __            __
    / /\          / /\
   / /  \        / / /
  / / /\ \      / / /
 / / /\ \ \    / /  \  __
/_/ /  \_\ |  /_/ /\ \/ /\
\ \ \  / / |  \_\/\ \ \/ /
 \ \ \/ / /        \_\  /
  \ \ \/ /  __     / / /  __
   \_\__/  /_/\   /_/ /  /_/\
           \_\/   \_\/   \_\/

Copyright 2025-2026 Daniel Harlow.

Big thanks to Daniil Baunov on Bluesky for helping me troubleshoot the gradient.
Check his repo(s) here:
https://github.com/baunov/gradients-bg
https://codepen.io/juri911/pen/dyLyyQw

*/
:root {
	--color-interactive: 212,255,0;
	--circle-size: 80%;
	--blending: hard-light;
}
@keyframes moveInCircle {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes moveVertical {
	0% {
		transform: translateY(-50%);
	}
	50% {
		transform: translateY(50%);
	}
	100% {
		transform: translateY(-50%);
	}
}
@keyframes moveHorizontal {
	0% {
		transform: translateX(-50%) translateY(-10%);
	}
	50% {
		transform: translateX(50%) translateY(10%);
	}
	100% {
		transform: translateX(-50%) translateY(-10%);
	}
}
.gradient-bg {
	width: 100vw;
	height: 100vh;
	position: fixed;
	overflow: hidden;
	user-select: none;
	pointer-events: none;
}
.gradient-bg svg {
	display: none;
}
.gradient-bg .gradients-container {
	filter: url(#goo) blur(0px);
	width: 100%;
	height: 100%;
	z-index: -9999999999999;
}
.gradient-bg .interactive {
	position: absolute;
	background: radial-gradient(circle at center, rgba(var(--color-interactive), 1) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
	mix-blend-mode: var(--blending);
	width: 100%;
	height: 100%;
	top: -50%;
	left: -50%;
	opacity: 1;
}