/* 樱花容器 */
#petals-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1024px;
  height: 100%;
  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.6;
  transform: rotate(45deg);
  animation: petal-fall var(--duration) linear forwards;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
}

/* 樱花飘落动画 */
@keyframes petal-fall {
  0% {
    top: -10%;
    opacity: 0.6;
    transform: translateX(0) rotate(0deg);
  }
  70% {
    opacity: 0.5;
    transform: translateX(calc(var(--x-offset) * 0.5)) rotate(calc(var(--end-rotation) * 0.5));
  }
  88% {
    top: 98%;
    opacity: 0.4;
    transform: translateX(var(--x-offset)) rotate(var(--end-rotation)) scale(1);
  }
  92% {
    top: 98%;
    opacity: 0.3;
    transform: translateX(var(--x-offset)) rotate(var(--end-rotation)) scale(0.8);
  }
  100% {
    top: 98%;
    opacity: 0;
    transform: translateX(var(--x-offset)) rotate(var(--end-rotation)) scale(0.4);
  }
}