/* =========================================================
   RAYOVAC NAVIDAD - SNOW
   ========================================================= */

.rayovac-snow {
	position: fixed;
	inset: 0;

	width: 100%;
	height: 100%;

	overflow: hidden;

	pointer-events: none;

	z-index: 9990;
}


/* =========================================================
   COPO
   ========================================================= */

.rayovac-snowflake {
	position: absolute;
	top: -40px;
	left: 0;
	display: block;
	width: var(--snow-size);
	height: auto;
	opacity: var(--snow-opacity);
	pointer-events: none;
	will-change: transform;
	animation-name: rayovacSnowFall;
	animation-duration: var(--snow-duration);
	animation-delay: var(--snow-delay);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}


/* =========================================================
   CAÍDA DEL COPO
   ========================================================= */

@keyframes rayovacSnowFall {

	0% {
		transform:
			translate3d(
				var(--snow-x),
				-40px,
				0
			)
			rotate(0deg);
	}

	50% {
		transform:
			translate3d(
				calc(var(--snow-x) + var(--snow-drift)),
				55vh,
				0
			)
			rotate(180deg);
	}

	100% {
		transform:
			translate3d(
				calc(var(--snow-x) - var(--snow-drift)),
				110vh,
				0
			)
			rotate(360deg);
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.rayovac-snowflake {
		animation-duration: var(--snow-duration-mobile);
	}

}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.rayovac-snow {
		display: none;
	}

}