.petals-effect {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: none;
  contain: layout style paint;
}

.petals-effect__petal {
  position: absolute;
  top: 0;
  left: var(--petal-start-x);
  width: var(--petal-size);
  opacity: var(--petal-opacity);
  animation: petal-fall var(--petal-duration) linear var(--petal-delay) infinite both;
  will-change: transform;
}

.petals-effect__petal img {
  display: block;
  width: 100%;
  height: auto;
  animation: petal-sway var(--petal-sway-duration) ease-in-out var(--petal-sway-delay) infinite alternate;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

@keyframes petal-fall {
  0% {
    transform: translate3d(0, -16vh, 0) rotate(0deg);
  }

  30% {
    transform: translate3d(var(--petal-drift-30), 24vh, 0) rotate(var(--petal-rotate-30));
  }

  65% {
    transform: translate3d(var(--petal-drift-65), 68vh, 0) rotate(var(--petal-rotate-65));
  }

  100% {
    transform: translate3d(var(--petal-drift-100), 116vh, 0) rotate(var(--petal-rotate-100));
  }
}

@keyframes petal-sway {
  0% {
    transform: translateX(var(--petal-sway-start)) rotateX(0deg) rotateY(0deg) scale(0.96);
  }

  50% {
    transform: translateX(0) rotateX(58deg) rotateY(32deg) scale(1);
  }

  100% {
    transform: translateX(var(--petal-sway)) rotateX(12deg) rotateY(68deg) scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .petals-effect {
    display: none;
  }
}