.puddle-layer {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	pointer-events: none;
	z-index: 4;
	overflow: hidden;
}

.puddle {
	position: absolute;
	transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
	opacity: 0.95;
	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22));
	transition: opacity 0.5s ease, transform 0.65s ease, filter 0.65s ease;
}

.puddle img {
	display: block;
	width: 100%;
	height: auto;
}

.puddle-sat {
	position: absolute;
	display: block;
	transform: rotate(-14deg);
}

.puddle-sat img {
	width: 100%;
	height: auto;
}

.puddle.is-cleaning {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.72);
	filter: blur(6px);
}

.puddle.is-cleaned {
	display: none;
}

@media screen and (max-width: 1024px) {
	.puddle-layer {
		display: none;
	}
}