/*!
 * Snowflake background utility for Kind Holiday Lights.
 */

@property --khol-snow-y1 {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

@property --khol-snow-y2 {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

@property --khol-snow-y3 {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

.snowflake-bg {
	position: relative;
	z-index: 0;
	overflow: hidden;
	isolation: isolate;
	background-image:
		radial-gradient(circle at 14% 20%, hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-1, 0.34)) 0 var(--khol-snow-flake-1, clamp(0.6px, 0.18vmin, 1.4px)), transparent var(--khol-snow-flake-1, clamp(0.6px, 0.18vmin, 1.4px))),
		radial-gradient(circle at 55% 8%,  hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-1, 0.34)) 0 var(--khol-snow-flake-1, clamp(0.6px, 0.18vmin, 1.4px)), transparent var(--khol-snow-flake-1, clamp(0.6px, 0.18vmin, 1.4px))),
		radial-gradient(circle at 82% 46%, hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-1, 0.34)) 0 var(--khol-snow-flake-1, clamp(0.6px, 0.18vmin, 1.4px)), transparent var(--khol-snow-flake-1, clamp(0.6px, 0.18vmin, 1.4px))),
		radial-gradient(circle at 28% 72%, hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-1, 0.34)) 0 var(--khol-snow-flake-1, clamp(0.6px, 0.18vmin, 1.4px)), transparent var(--khol-snow-flake-1, clamp(0.6px, 0.18vmin, 1.4px))),
		radial-gradient(circle at 62% 88%, hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-1, 0.34)) 0 var(--khol-snow-flake-1, clamp(0.6px, 0.18vmin, 1.4px)), transparent var(--khol-snow-flake-1, clamp(0.6px, 0.18vmin, 1.4px)));
	background-repeat: repeat;
	background-size:
		var(--khol-snow-tile-1, 3vmin) var(--khol-snow-tile-1, 3vmin),
		var(--khol-snow-tile-1, 3vmin) var(--khol-snow-tile-1, 3vmin),
		var(--khol-snow-tile-1, 3vmin) var(--khol-snow-tile-1, 3vmin),
		var(--khol-snow-tile-1, 3vmin) var(--khol-snow-tile-1, 3vmin),
		var(--khol-snow-tile-1, 3vmin) var(--khol-snow-tile-1, 3vmin);
	background-position:
		0 var(--khol-snow-y1), 0 var(--khol-snow-y1), 0 var(--khol-snow-y1), 0 var(--khol-snow-y1), 0 var(--khol-snow-y1);
	animation: khol-snow-fall-1 var(--khol-snow-speed-1, 7s) linear infinite;
	will-change: background-position;
}

.snowflake-bg::before,
.snowflake-bg::after {
	content: "";
	position: absolute;
	inset: -12%;
	pointer-events: none;
	z-index: -1;
	background-repeat: repeat;
}

.snowflake-bg::before {
	background-image:
		radial-gradient(circle at 12% 28%, hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-2, 0.31)) 0 var(--khol-snow-flake-2, clamp(0.8px, 0.26vmin, 1.9px)), transparent var(--khol-snow-flake-2, clamp(0.8px, 0.26vmin, 1.9px))),
		radial-gradient(circle at 38% 10%, hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-2, 0.31)) 0 var(--khol-snow-flake-2, clamp(0.8px, 0.26vmin, 1.9px)), transparent var(--khol-snow-flake-2, clamp(0.8px, 0.26vmin, 1.9px))),
		radial-gradient(circle at 74% 62%, hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-2, 0.31)) 0 var(--khol-snow-flake-2, clamp(0.8px, 0.26vmin, 1.9px)), transparent var(--khol-snow-flake-2, clamp(0.8px, 0.26vmin, 1.9px))),
		radial-gradient(circle at 18% 76%, hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-2, 0.31)) 0 var(--khol-snow-flake-2, clamp(0.8px, 0.26vmin, 1.9px)), transparent var(--khol-snow-flake-2, clamp(0.8px, 0.26vmin, 1.9px)));
	background-size:
		var(--khol-snow-tile-2, 3vmin) var(--khol-snow-tile-2, 3vmin),
		var(--khol-snow-tile-2, 3vmin) var(--khol-snow-tile-2, 3vmin),
		var(--khol-snow-tile-2, 3vmin) var(--khol-snow-tile-2, 3vmin),
		var(--khol-snow-tile-2, 3vmin) var(--khol-snow-tile-2, 3vmin);
	background-position:
		0 var(--khol-snow-y2), 0 var(--khol-snow-y2), 0 var(--khol-snow-y2), 0 var(--khol-snow-y2);
	animation: khol-snow-fall-2 var(--khol-snow-speed-2, 5s) linear infinite;
}

.snowflake-bg::after {
	background-image:
		radial-gradient(circle at 20% 18%, hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-3, 0.39)) 0 var(--khol-snow-flake-3, clamp(1px, 0.34vmin, 2.4px)), transparent var(--khol-snow-flake-3, clamp(1px, 0.34vmin, 2.4px))),
		radial-gradient(circle at 65% 22%, hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-3, 0.39)) 0 var(--khol-snow-flake-3, clamp(1px, 0.34vmin, 2.4px)), transparent var(--khol-snow-flake-3, clamp(1px, 0.34vmin, 2.4px))),
		radial-gradient(circle at 30% 84%, hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-3, 0.39)) 0 var(--khol-snow-flake-3, clamp(1px, 0.34vmin, 2.4px)), transparent var(--khol-snow-flake-3, clamp(1px, 0.34vmin, 2.4px))),
		radial-gradient(circle at 86% 78%, hsl(var(--khol-snow-color, 0 0% 100%) / var(--khol-snow-alpha-3, 0.39)) 0 var(--khol-snow-flake-3, clamp(1px, 0.34vmin, 2.4px)), transparent var(--khol-snow-flake-3, clamp(1px, 0.34vmin, 2.4px)));
	background-size:
		var(--khol-snow-tile-3, 4vmin) var(--khol-snow-tile-3, 4vmin),
		var(--khol-snow-tile-3, 4vmin) var(--khol-snow-tile-3, 4vmin),
		var(--khol-snow-tile-3, 4vmin) var(--khol-snow-tile-3, 4vmin),
		var(--khol-snow-tile-3, 4vmin) var(--khol-snow-tile-3, 4vmin);
	background-position:
		0 var(--khol-snow-y3), 0 var(--khol-snow-y3), 0 var(--khol-snow-y3), 0 var(--khol-snow-y3);
	animation: khol-snow-fall-3 var(--khol-snow-speed-3, 3s) linear infinite;
}

@keyframes khol-snow-fall-1 {
	to {
		--khol-snow-y1: var(--khol-snow-tile-1, 3vmin);
	}
}

@keyframes khol-snow-fall-2 {
	to {
		--khol-snow-y2: var(--khol-snow-tile-2, 3vmin);
	}
}

@keyframes khol-snow-fall-3 {
	to {
		--khol-snow-y3: var(--khol-snow-tile-3, 4vmin);
	}
}

@media (prefers-reduced-motion: reduce) {
	.snowflake-bg {
		animation: none !important;
		background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
	}

	.snowflake-bg::before,
	.snowflake-bg::after {
		animation: none !important;
		background-position: 0 0, 0 0, 0 0, 0 0;
	}
}