#petal-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6; /* above background, below paws (20) */
}

.petal {
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
  opacity: 0.9;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23fbe3e6' stop-opacity='0.95'/%3E%3Cstop offset='60%25' stop-color='%23f3b7c3' stop-opacity='0.9'/%3E%3Cstop offset='100%25' stop-color='%23e79aa7' stop-opacity='0.0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 4 C18 10 10 24 12 38 C14 52 24 60 32 60 C40 60 50 52 52 38 C54 24 46 10 32 4 Z' fill='url(%23g)'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;

  filter: blur(0.3px);
}

/* =====================
   PETALS: PHONE SCALE
===================== */
@media (max-width: 600px) {
  .petal {
    width: 18px;
    height: 18px;
    opacity: 0.85;
  }
}