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

.tulip-petal {
  position: absolute;
  top: -12vh;
  left: var(--petal-left);
  width: var(--petal-size);
  height: calc(var(--petal-size) * 1.55);
  border-radius: 72% 28% 66% 34% / 58% 34% 66% 42%;
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.58), transparent 0.45rem),
    linear-gradient(145deg, var(--petal-light), var(--petal-color) 56%, var(--petal-shadow));
  box-shadow: 0 10px 24px rgba(57, 68, 57, 0.12);
  opacity: var(--petal-opacity);
  transform: translate3d(0, 0, 0) rotate(var(--petal-rotate));
  animation: tulipPetalFall var(--petal-duration) linear var(--petal-delay) infinite;
}

.tulip-petal::after {
  content: "";
  position: absolute;
  inset: 15% 42% 10% 43%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transform: rotate(12deg);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  filter: blur(4px);
  transition:
    opacity 1.15s ease,
    filter 1.15s ease,
    transform 1.15s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform, filter;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

@keyframes tulipPetalFall {
  0% {
    transform: translate3d(0, -12vh, 0) rotate(var(--petal-rotate));
  }

  34% {
    transform: translate3d(var(--petal-drift-mid), 34vh, 0) rotate(calc(var(--petal-rotate) + 112deg));
  }

  68% {
    transform: translate3d(var(--petal-drift-end), 72vh, 0) rotate(calc(var(--petal-rotate) + 224deg));
  }

  100% {
    transform: translate3d(var(--petal-drift-final), 112vh, 0) rotate(calc(var(--petal-rotate) + 360deg));
  }
}

@media (max-width: 520px) {
  .tulip-petal {
    width: calc(var(--petal-size) * 0.82);
    height: calc(var(--petal-size) * 1.25);
  }
}

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

  .reveal-on-scroll {
    opacity: 1;
    filter: none;
    transform: none;
  }
}