.rain-container {
	position: absolute;
	top: calc(-1 * (514px - var(--y)));
	z-index: 9990;
	width: 100%;
	height: 300px;
	pointer-events: none;

	.rain {
		position: absolute;
		inset: 0;
		z-index: 9992;

		&.rain-back {
			bottom: 30px;
			opacity: 0.5;
			z-index: 9991;
		}

		.drop {
			position: absolute;
			bottom: 100%;
			width: 15px;
			height: 120px;
			animation: drop 0.5s linear infinite;

			.stem {
				width: 1px;
				height: 60%;
				margin-left: 7px;
				background: linear-gradient(to bottom,
					transparent,
					oklch(var(--rain) / 0.25));
				animation: stem 0.5s linear infinite;
			}

			.splat {
				width: 15px;
				height: 10px;
				border-top: 2px dotted oklch(var(--rain) / 0.5);
				border-radius: 50%;
				opacity: 1;
				transform: scale(0);
				animation: splat 0.5s linear infinite;
			}
		}
	}
}