.petal-layer {
  position: fixed;
  z-index: 50;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.petal-layer__petal {
  position: absolute;
  top: -32px;
  left: var(--petal-x);
  width: 16px;
  height: 16px;
  opacity: var(--petal-opacity);
  animation: petal-fall var(--petal-duration) linear var(--petal-delay) infinite;
  will-change: transform;
}

.petal-layer__sprite {
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("../../../assets/stardew/sprites/spring-petal-strip.png");
  background-repeat: no-repeat;
  background-size: 176px 16px;
  image-rendering: pixelated;
  animation: petal-flutter 1.1s steps(11) var(--petal-frame-delay) infinite;
}

.petal-layer.is-paused .petal-layer__petal,
.petal-layer.is-paused .petal-layer__sprite {
  animation-play-state: paused;
}

@keyframes petal-fall {
  0% {
    transform: translate3d(0, -32px, 0) rotate(0deg) scale(var(--petal-scale));
  }
  48% {
    transform: translate3d(var(--petal-drift-mid), 50vh, 0) rotate(180deg) scale(var(--petal-scale));
  }
  100% {
    transform: translate3d(var(--petal-drift), calc(100vh + 48px), 0) rotate(var(--petal-spin)) scale(var(--petal-scale));
  }
}

@keyframes petal-flutter {
  to {
    background-position: -176px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .petal-layer__petal {
    animation-duration: 28s !important;
  }

  .petal-layer__sprite {
    animation-duration: 2.4s;
  }
}