body::before,
body::after,
.comm::before {
  z-index: -2;
}

.petali {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.petalo {
  position: absolute;
  top: -32px;
  left: var(--x, 50%);
  width: var(--w, 12px);
  height: calc(var(--w, 12px) * .8);
  border-radius: 150% 0 150% 0;
  background: linear-gradient(135deg, rgba(var(--mob-rose-rgb), .9), rgba(var(--mob-magenta-2-rgb), .7));
  box-shadow: 0 0 8px rgba(var(--mob-magenta-rgb), .3);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: petali-cade var(--d, 18s) linear var(--r, 0s) infinite;
}

@keyframes petali-cade {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  8% { opacity: .62; }
  50% { transform: translate3d(calc(var(--dx, 60px) * -.5), 55vh, 0) rotate(220deg); }
  90% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(var(--dx, 60px), calc(100vh + 64px), 0) rotate(540deg); }
}

@media (max-width: 767.98px) {
  .petalo:nth-child(2n) { display: none; }
  .petalo { width: calc(var(--w, 12px) * .85); height: calc(var(--w, 12px) * .68); }
}

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

@media print {
  .petali { display: none; }
}