/* petals.css */
#petals-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1024px, 100%);
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* 樱花样式 */
.petals-petal {
  position: absolute;
  width: 20px;
  height: 26px;
  background: linear-gradient(145deg, #ffb3d9 30%, #ff85c0 70%);
  border-radius: 50% 50% 30% 50%;
  opacity: 0;
  transform: rotate(45deg); /* 初始旋转 */
  animation: petal-fall var(--duration) linear forwards; /* 使用 JS 设置的随机时间 */
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
}

/* 动画 */
@keyframes petal-fall {
  0% {
    top: -10%; /* 起始位置 */
    opacity: 1;
    transform: translateX(0) rotate(0deg); /* 重置初始旋转 */
  }
  100% {
    top: 110%; /* 结束位置 */
    opacity: 0;
    transform: translateX(var(--x-offset)) rotate(720deg); /* 使用 JS 的偏移量 */
  }
}