/* ================= HERO FLOWER SHOWER ================= */
.hero-poster__petals {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  --hero-fall: 100%;
}

.hero-petal {
  position: absolute;
  top: 0;
  opacity: 0;
  animation: petalFall linear infinite;
  will-change: transform, opacity;
}

.hero-petal--petal {
  width: var(--size, 14px);
  height: calc(var(--size, 14px) * 1.35);
  border-radius: 50% 50% 50% 0;
  background: var(--petal-color, var(--champagne-light));
  box-shadow: 0 1px 3px rgba(92, 80, 68, 0.12);
}

.hero-petal--leaf {
  width: calc(var(--size, 12px) * 1.45);
  height: calc(var(--size, 12px) * 0.72);
  border-radius: 0 85% 0 85%;
  background: var(--petal-color, #A8B89A);
  box-shadow: 0 1px 2px rgba(92, 80, 68, 0.08);
}

@keyframes petalFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -16px, 0) rotate(var(--rot, 0deg));
  }
  8% {
    opacity: var(--peak-opacity, 0.75);
  }
  88% {
    opacity: calc(var(--peak-opacity, 0.65) * 0.85);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--sway, 40px), var(--hero-fall, 100%), 0)
      rotate(calc(var(--rot, 0deg) + 180deg));
  }
}

.hero-poster:not(.in-view) .hero-petal {
  animation-play-state: paused;
  opacity: 0;
}

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

@media (max-width: 768px) {
  .hero-petal--petal {
    width: var(--size, 8px);
    height: calc(var(--size, 8px) * 1.25);
    border-radius: 50% 50% 42% 0;
    box-shadow: 0 0.5px 1.5px rgba(92, 80, 68, 0.08);
  }

  .hero-petal--leaf {
    width: calc(var(--size, 7px) * 1.35);
    height: calc(var(--size, 7px) * 0.65);
    border-radius: 1px 80% 1px 80%;
  }
}

@media (max-width: 480px) {
  .hero-petal--petal {
    height: calc(var(--size, 7px) * 1.2);
  }

  .hero-petal--leaf {
    width: calc(var(--size, 6px) * 1.3);
    height: calc(var(--size, 6px) * 0.62);
  }
}