.petal_board {
		left: 0;
		right: 0;
		top: -10px;
		bottom: 0;
		margin: auto;
}
.petal-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		overflow: hidden;
}

.petal {
		position: absolute;
		top: -20px;
		width: 10px;
		height: 10px;
		background: radial-gradient(ellipse at center, #FFB6C1 0%, #FFC0CB 50%, #FFD1DC 100%);
		border-radius: 50% 0 50% 0;
		opacity: 0.8;
		animation: fall-wind linear infinite;
		transform-origin: center;
}
@keyframes fall-wind {
		0% {
				transform: translateY(0) translateX(0) rotate(0deg);
				opacity: 1;
		}
		25% {
				transform: translateY(25vh) translateX(-60px) rotate(90deg);
				opacity: 0.9;
		}
		50% {
				transform: translateY(50vh) translateX(-100px) rotate(180deg);
				opacity: 0.8;
		}
		75% {
				transform: translateY(75vh) translateX(-140px) rotate(270deg);
				opacity: 0.6;
		}
		100% {
				transform: translateY(100vh) translateX(-180px) rotate(360deg);
				opacity: 0;
		}
}
@keyframes fall-wind-strong {
		0% {
				transform: translateY(0) translateX(0) rotate(0deg);
				opacity: 1;
		}
		25% {
				transform: translateY(25vh) translateX(-80px) rotate(120deg);
				opacity: 0.9;
		}
		50% {
				transform: translateY(50vh) translateX(-150px) rotate(240deg);
				opacity: 0.8;
		}
		75% {
				transform: translateY(75vh) translateX(-200px) rotate(360deg);
				opacity: 0.6;
		}
		100% {
				transform: translateY(100vh) translateX(-250px) rotate(480deg);
				opacity: 0;
		}
}
@keyframes fall-wind-light {
		0% {
				transform: translateY(0) translateX(0) rotate(0deg);
				opacity: 1;
		}
		25% {
				transform: translateY(25vh) translateX(-40px) rotate(60deg);
				opacity: 0.9;
		}
		50% {
				transform: translateY(50vh) translateX(-70px) rotate(120deg);
				opacity: 0.8;
		}
		75% {
				transform: translateY(75vh) translateX(-100px) rotate(180deg);
				opacity: 0.6;
		}
		100% {
				transform: translateY(100vh) translateX(-130px) rotate(240deg);
				opacity: 0;
		}
}
/* 創建多個花瓣 - 不同風力效果 */
.petal:nth-child(1) {
		left: 5%;
		animation-duration: 8s;
		animation-delay: 0s;
}
.petal:nth-child(2) {
		left: 10%;
		animation-duration: 10s;
		animation-delay: 1s;
		width: 12px;
		height: 12px;
		animation-name: fall-wind-strong;
}
.petal:nth-child(3) {
		left: 15%;
		animation-duration: 7s;
		animation-delay: 2s;
		animation-name: fall-wind-light;
}
.petal:nth-child(4) {
		left: 20%;
		animation-duration: 9s;
		animation-delay: 0.5s;
		width: 8px;
		height: 8px;
}
.petal:nth-child(5) {
		left: 25%;
		animation-duration: 11s;
		animation-delay: 1.5s;
		animation-name: fall-wind-strong;
}
.petal:nth-child(6) {
		left: 30%;
		animation-duration: 8.5s;
		animation-delay: 3s;
}
.petal:nth-child(7) {
		left: 35%;
		animation-duration: 9.5s;
		animation-delay: 0.8s;
		width: 11px;
		height: 11px;
		animation-name: fall-wind-light;
}
.petal:nth-child(8) {
		left: 40%;
		animation-duration: 10.5s;
		animation-delay: 2.5s;
		animation-name: fall-wind-strong;
}
.petal:nth-child(9) {
		left: 45%;
		animation-duration: 7.5s;
		animation-delay: 1.2s;
}
.petal:nth-child(10) {
		left: 50%;
		animation-duration: 8.8s;
		animation-delay: 0.3s;
		width: 9px;
		height: 9px;
		animation-name: fall-wind-light;
}
.petal:nth-child(11) {
		left: 55%;
		animation-duration: 9.8s;
		animation-delay: 2.8s;
}
.petal:nth-child(12) {
		left: 60%;
		animation-duration: 11.5s;
		animation-delay: 1.8s;
		animation-name: fall-wind-strong;
}
.petal:nth-child(13) {
		left: 65%;
		animation-duration: 8.2s;
		animation-delay: 0.6s;
		width: 10px;
		height: 10px;
}
.petal:nth-child(14) {
		left: 70%;
		animation-duration: 10.2s;
		animation-delay: 2.2s;
		animation-name: fall-wind-light;
}
.petal:nth-child(15) {
		left: 75%;
		animation-duration: 7.8s;
		animation-delay: 1.4s;
		animation-name: fall-wind-strong;
}
.petal:nth-child(16) {
		left: 80%;
		animation-duration: 9.2s;
		animation-delay: 0.9s;
		width: 11px;
		height: 11px;
}
.petal:nth-child(17) {
		left: 85%;
		animation-duration: 10.8s;
		animation-delay: 2.6s;
		animation-name: fall-wind-light;
}
.petal:nth-child(18) {
		left: 90%;
		animation-duration: 8.6s;
		animation-delay: 1.6s;
		animation-name: fall-wind-strong;
}
.petal:nth-child(19) {
		left: 95%;
		animation-duration: 9.6s;
		animation-delay: 0.4s;
		width: 12px;
		height: 12px;
}
.petal:nth-child(20) {
		left: 12%;
		animation-duration: 11.2s;
		animation-delay: 3.2s;
		animation-name: fall-wind-light;
}
.petal:nth-child(21) {
		left: 22%;
		animation-duration: 7.2s;
		animation-delay: 1.1s;
}
.petal:nth-child(22) {
		left: 32%;
		animation-duration: 10.1s;
		animation-delay: 2.4s;
		width: 9px;
		height: 9px;
		animation-name: fall-wind-strong;
}
.petal:nth-child(23) {
		left: 42%;
		animation-duration: 8.4s;
		animation-delay: 0.7s;
		animation-name: fall-wind-light;
}
.petal:nth-child(24) {
		left: 52%;
		animation-duration: 9.4s;
		animation-delay: 1.9s;
}
.petal:nth-child(25) {
		left: 62%;
		animation-duration: 11.8s;
		animation-delay: 2.9s;
		width: 10px;
		height: 10px;
		animation-name: fall-wind-strong;
}
.petal:nth-child(26) {
		left: 72%;
		animation-duration: 7.6s;
		animation-delay: 1.3s;
		animation-name: fall-wind-light;
}
.petal:nth-child(27) {
		left: 82%;
		animation-duration: 10.6s;
		animation-delay: 0.2s;
}
.petal:nth-child(28) {
		left: 92%;
		animation-duration: 8.9s;
		animation-delay: 2.7s;
		width: 11px;
		height: 11px;
		animation-name: fall-wind-strong;
}
.petal:nth-child(29) {
		left: 17%;
		animation-duration: 9.9s;
		animation-delay: 1.7s;
		animation-name: fall-wind-light;
}
.petal:nth-child(30) {
		left: 27%;
		animation-duration: 11.4s;
		animation-delay: 3.4s;
}
/* 白色花瓣變化 */
.petal:nth-child(3n) {
		background: radial-gradient(ellipse at center, #FFF 0%, #FFFACD 50%, #FFF8DC 100%);
}
.petal:nth-child(5n) {
		background: radial-gradient(ellipse at center, #FFE4E1 0%, #FFF0F5 50%, #FFF 100%);
}