.ws-spotlight {
	position: relative;
	overflow: hidden;

	--stripes: repeating-linear-gradient(
		100deg,
		#fff 0%,
		#fff 7%,
		transparent 10%,
		transparent 12%,
		#fff 16%
	);
	--stripesDark: repeating-linear-gradient(
		100deg,
		#000 0%,
		#000 7%,
		transparent 10%,
		transparent 12%,
		#000 16%
	);
	--rainbow: repeating-linear-gradient(
		100deg,
		#fa60e5 10%,
		#e879f9 15%,
		#60a5fa 20%,
		#5eead4 25%,
		#60a5fa 30%
	);
	--speed: 60s;
	--easing: linear;
}

.ws-spotlight__wrapper {
	position: absolute;
	inset: 0px;
	overflow: hidden;
	pointer-events: none;
}

.ws-spotlight__spotlight {
	position: absolute;
	inset: -10px;

	background-size: 300%, 200%;
	background-position: 50% 50%, 50% 50%;

	mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
	pointer-events: none;
	will-change: transform, opacity;
}

.ws-spotlight__spotlight::after {
	content: "";
	position: absolute;
	inset: 0;

	background-size: 200%, 100%;
	animation: spotlight var(--speed) var(--easing) infinite;
	background-attachment: fixed;
	mix-blend-mode: difference;
}

.ws-spotlight[data-mode="light"] .ws-spotlight__spotlight {
	background-image: var(--stripes), var(--rainbow);
	filter: blur(5px) invert(100%);
}

.ws-spotlight[data-mode="dark"] .ws-spotlight__spotlight {
	background-image: var(--stripesDark), var(--rainbow);
	filter: blur(5px) opacity(50%) saturate(150%);
}

.ws-spotlight[data-mode="light"] .ws-spotlight__spotlight::after {
	background-image: var(--stripes), var(--rainbow);
}

.ws-spotlight[data-mode="dark"] .ws-spotlight__spotlight::after {
	background-image: var(--stripesDark), var(--rainbow);
}

@keyframes spotlight {
	from {
		background-position: 50% 50%, 50% 50%;
	}
	to {
		background-position: 250% 50%, 250% 50%;
	}
}

.ws-spotlight[data-flickering="1"] {
	opacity: 0;
}

.ws-spotlight__content {
	position: relative;
	z-index: 1;
}

.ws-spotlight__content > * {
	position: relative;
	z-index: 1;
}