/* Christmas Snow Effect - CSS
 * Active only between December 15th and January 5th
 * Performant, elegant, and non-intrusive
 */

/* Snow container - positioned absolutely to cover entire viewport */
.snow-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9999;
	overflow: hidden;
}

/* Individual snowflake styling */
.snowflake {
	position: absolute;
	top: -10px;
	color: #ffffff;
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
	font-size: 1em;
	opacity: 0.8;
	pointer-events: none;
	user-select: none;
	animation-name: snowfall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform, opacity;
}

/* Snowfall animation - creates natural falling motion */
@keyframes snowfall {
	0% {
		transform: translateY(0) translateX(0) rotate(0deg);
		opacity: 0.8;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 0.8;
	}
	100% {
		transform: translateY(100vh) translateX(var(--drift)) rotate(360deg);
		opacity: 0;
	}
}

/* Varying snowflake sizes for depth perception */
.snowflake.small {
	font-size: 0.6em;
	animation-duration: 8s;
}

.snowflake.medium {
	font-size: 1em;
	animation-duration: 10s;
}

.snowflake.large {
	font-size: 1.4em;
	animation-duration: 12s;
}

/* Horizontal drift variations for natural movement */
.snowflake.drift-left {
	--drift: -50px;
}

.snowflake.drift-center {
	--drift: 0px;
}

.snowflake.drift-right {
	--drift: 50px;
}

/* Subtle blur for distant snowflakes (optional - can be disabled for performance) */
.snowflake.small {
	filter: blur(0.5px);
}

/* Performance optimization - reduce animations on mobile */
@media (max-width: 768px) {
	.snowflake {
		/* Limit number of snowflakes on mobile - handled in JS */
		font-size: 0.9em;
	}

	.snowflake.small {
		filter: none; /* Remove blur on mobile for better performance */
	}
}

/* Accessibility - respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.snow-container {
		display: none;
	}
}