/* =====================================================
   RAIN WEATHER EFFECT
   ===================================================== */
.weatherEffectContainer.rain::before {
	content: "";
	position: absolute;
	inset: -80px;
	pointer-events: none;
	opacity: 0.55;

	/* ===============================
	   GOTAS DE CHUVA
	================================ */
	background-image:
		radial-gradient(
			ellipse 1px 10px at center,
			rgba(255,255,255,0.55) 0%,
			rgba(255,255,255,0.55) 40%,
			transparent 70%
		),
		radial-gradient(
			ellipse 1px 14px at center,
			rgba(255,255,255,0.4) 0%,
			rgba(255,255,255,0.4) 40%,
			transparent 70%
		),
		radial-gradient(
			ellipse 0.8px 18px at center,
			rgba(255,255,255,0.3) 0%,
			rgba(255,255,255,0.3) 40%,
			transparent 70%
		);

	background-size:
		20px 40px,
		28px 60px,
		40px 80px;

	/* ===============================
	   PARALLAX (mais agressivo)
	================================ */
	background-position:
		calc(var(--moveParallax-x) * 0.9 + 0.31px)
		calc(var(--moveParallax-y) * 1.2 + 0.17px),

		calc(var(--moveParallax-x) * 0.6 + 0.53px)
		calc(var(--moveParallax-y) * 0.9 + 0.29px),

		calc(var(--moveParallax-x) * 0.35 + 0.77px)
		calc(var(--moveParallax-y) * 0.6 + 0.41px);

	/* resposta mais rápida que a neve */
	transition: background-position 0.12s linear;

	/* ===============================
	   ANIMAÇÃO DA CHUVA
	================================ */
	--base-duration: 10s;

	animation:
		rain-fall
		calc(var(--base-duration) / var(--effect-speed))
		linear
		infinite;

	animation-delay: -6s;

	/* ===============================
	   PERFORMANCE
	================================ */
	will-change: background-position;
	transform: translate3d(0, 0, 0);
}


@keyframes rain-fall {
	from {
		transform: translate3d(
			0,
			-80px,
			0
		);
	}
	to {
		transform: translate3d(
			calc(var(--wind-x) * -60px),
			calc(var(--wind-y) * 80px),
			0
		);
	}
}