.petal {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle at center, #ffb6c1 0%, #ff69b4 100%);
  border-radius: 50% 0 50% 50%;
  opacity: 0.7;
  transform-origin: center;
  box-shadow: 0 0 5px rgba(255, 182, 193, 0.5);
}

@keyframes falling {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  25% {
    transform: translate(25px, 25vh) rotate(90deg) scale(1.1);
    opacity: 0.9;
  }
  50% {
    transform: translate(-25px, 50vh) rotate(180deg) scale(1.2);
    opacity: 0.8;
  }
  75% {
    transform: translate(25px, 75vh) rotate(270deg) scale(1.1);
    opacity: 0.6;
  }
  100% {
    transform: translate(0, 100vh) rotate(360deg) scale(1);
    opacity: 0;
  }
}