/* Téli overlay és hóesés stílusok */
.winter-overlay {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9500;
	opacity: 0.45;
	background:
		radial-gradient(circle at 20% -10%, rgba(255,255,255,0.12), rgba(255,255,255,0) 55%),
		radial-gradient(circle at 85% 0%, rgba(255,255,255,0.1), rgba(255,255,255,0) 60%),
		radial-gradient(circle at 50% 120%, rgba(72,89,128,0.08), rgba(72,89,128,0) 70%),
		linear-gradient(180deg, rgba(22,34,56,0.08) 0%, rgba(10,16,28,0.18) 100%);
	will-change: opacity;
	transform: translateZ(0);
	backface-visibility: hidden;
	contain: layout style paint;
}

.winter-overlay::before,
.winter-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: repeat;
	pointer-events: none;
	opacity: 0.55;
	transform: translateZ(0);
	backface-visibility: hidden;
	will-change: transform, opacity;
}

.winter-overlay::before {
	background-image:
		radial-gradient(rgba(255,255,255,0.12) 1px, transparent 2px),
		radial-gradient(rgba(255,255,255,0.06) 1px, transparent 2px);
	background-size: 220px 220px, 140px 140px;
	background-position: 0 20px, 60px 120px;
	animation: winter-twinkle 12s linear infinite;
	mix-blend-mode: screen;
}

.winter-overlay::after {
	background-image: radial-gradient(rgba(255,255,255,0.1) 0.8px, transparent 1.6px);
	background-size: 120px 120px;
	animation: winter-twinkle 18s linear infinite reverse;
	mix-blend-mode: screen;
}

@keyframes winter-twinkle {
	0% { 
		transform: translate3d(0, 0, 0) scale(1); 
		opacity: 0.55; 
	}
	50% { 
		transform: translate3d(-6px, 8px, 0) scale(1.02); 
		opacity: 0.8; 
	}
	100% { 
		transform: translate3d(0, 0, 0) scale(1); 
		opacity: 0.55; 
	}
}

/* Hóesés konténer */
.snow-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9999;
	overflow: visible;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

/* Hópehely alapstílusok */
.snowflake {
	position: absolute;
	top: -50px;
	left: 0;
	font-size: 16px;
	color: #ffffff !important;
	opacity: 0.75 !important;
	user-select: none;
	line-height: 1;
	text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
	transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform;
	z-index: 10000;
	display: block;
	visibility: visible;
}

/* Hóesés animáció - szépen szállingózik */
@keyframes snow-fall {
	0% {
		transform: translate3d(0, -50px, 0) rotate(0deg);
		opacity: 0.6;
	}
	25% {
		transform: translate3d(calc(var(--sway, 40px) * -1), calc((100vh + 50px) * 0.25), 0) rotate(calc(var(--rotation, 360deg) * 0.25));
		opacity: 0.75;
	}
	50% {
		transform: translate3d(0, calc((100vh + 50px) * 0.5), 0) rotate(calc(var(--rotation, 360deg) * 0.5));
		opacity: 0.8;
	}
	75% {
		transform: translate3d(var(--sway, 40px), calc((100vh + 50px) * 0.75), 0) rotate(calc(var(--rotation, 360deg) * 0.75));
		opacity: 0.75;
	}
	100% {
		transform: translate3d(0, calc(100vh + 50px), 0) rotate(var(--rotation, 360deg));
		opacity: 0.6;
	}
}

/* Hópehely animáció alkalmazása */
.snowflake {
	animation: snow-fall var(--duration, 15s) linear infinite;
	animation-delay: var(--delay, 0s);
	animation-fill-mode: both;
	opacity: 0.75 !important;
}