/* 定义糖果和蛋糕的样式 */
.candy {
	position: absolute;
	border-radius: 50%;
	transform-style: preserve-3d;
	transition: transform 0.1s ease;
	/* 为下落元素添加透视效果，增强 3D 感 */
	perspective: 1000px;
}

.cake {
	position: absolute;
	border-radius: 50%;
	transform-style: preserve-3d;
	transition: transform 0.1s ease;
	/* 为下落元素添加透视效果，增强 3D 感 */
	perspective: 1000px;
}

.candy {
	width: 70px;
	height: 70px;
}

.cake {
	width: 80px;
	height: 80px;
}

.candy:hover,
.cake:hover {
	transform: rotateX(15deg) rotateY(15deg);
}

/* 定义更自然的下落动画 */
@keyframes fall {
	0% {
		top: -50px;
		/* 初始随机旋转角度 */
		transform: rotate(0deg) translateX(0px);
	}

	50% {
		/* 下落过程中随机左右偏移 */
		transform: rotate(calc(var(--random-rotate) * 1deg)) translateX(calc(var(--random-x) * 1px));
	}

	100% {
		top: 100vh;
		/* 最终随机旋转角度 */
		transform: rotate(calc(var(--random-rotate) * 2deg)) translateX(calc(var(--random-x) * 2px));
	}
}