/* 1. Container base (imutável) */
.weatherEffectContainer {
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 20;
	overflow: hidden;

	/* ===== CONTROLES GLOBAIS DO CLIMA ===== */

	/* Velocidade do efeito (0.3 = lento | 1 = normal | 2 = intenso) */
	--effect-speed: 1;

	/* Direção do vento */
	--wind-x: 0;  /* -1 (esq) → 1 (dir) */
	--wind-y: 1;  /* normalmente 1 */
	
	/* ===== PARALLAX ===== */
	--moveParallax-x: 0px;
	--moveParallax-y: 0px;
}




/* 4. EFEITO: CHUVA */





/* 5. EFEITO: NEVE */
.weatherEffectContainer.snow::before {
	content: "";
	position: absolute;
	inset: -80px;
	pointer-events: none;
	opacity: 0.6;

	/* ===============================
	   CAMADAS DE NEVE
	================================ */
	background-image:
		radial-gradient(circle, rgba(255,255,255,0.9) 0 1px, transparent 2px),
		radial-gradient(circle, rgba(255,255,255,0.7) 0 1.5px, transparent 3px),
		radial-gradient(circle, rgba(255,255,255,0.5) 0 2px, transparent 4px);

	background-size:
		22px 22px,
		35px 35px,
		50px 50px;

	/* ===============================
	   PARALLAX SUAVIZADO
	================================ */
	background-position:
		calc(var(--moveParallax-x) * 0.6) calc(var(--moveParallax-y) * 0.6),
		calc(var(--moveParallax-x) * 0.35) calc(var(--moveParallax-y) * 0.35),
		calc(var(--moveParallax-x) * 0.15) calc(var(--moveParallax-y) * 0.15);

	/* suavização perceptiva */
	transition: background-position 0.25s ease-out;

	/* ===============================
	   ANIMAÇÃO DA NEVE
	================================ */
	--base-duration: 14s;

	animation:
		snow-fall
		calc(var(--base-duration) / var(--effect-speed))
		linear
		infinite;

	animation-delay: -7s;

	/* ===============================
	   PERFORMANCE
	================================ */
	will-change: background-position;
	transform: translate3d(0, 0, 0);
}


@keyframes snow-fall {
	from {
		transform: translate3d(
			calc(var(--wind-x) * 60px),
			-60px,
			0
		);
	}
	to {
		transform: translate3d(
			calc(var(--wind-x) * -60px),
			60px,
			0
		);
	}
}