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

.petal {
  position: absolute;
  top: -28px;
  width: 18px;
  height: 22px;
  opacity: 0;
  animation: petal-fall var(--fall-duration, 22s) linear var(--fall-delay, 0s) infinite;
}

.petal i {
  position: absolute;
  inset: 2px 4px 4px 3px;
  display: block;
  border: 1px solid color-mix(in srgb, var(--petal-color, #ffc3d4) 55%, transparent);
  border-radius: 70% 12% 70% 18%;
  background:
    radial-gradient(ellipse at 29% 31%, #fff6f0, transparent 35%),
    linear-gradient(135deg, var(--petal-color, #ffc3d4), color-mix(in srgb, var(--petal-color, #ffc3d4) 70%, #b8324a));
  box-shadow: 0 0 10px color-mix(in srgb, var(--petal-color, #ffc3d4) 55%, transparent);
  transform: scale(var(--petal-scale, 1)) rotate(28deg);
  animation: petal-sway var(--sway-duration, 4s) ease-in-out infinite alternate;
}

.petal-small {
  width: 12px;
  height: 15px;
}

@keyframes petal-fall {
  0% { opacity: 0; transform: translate3d(0, -4vh, 0) rotate(0deg); }
  9% { opacity: .68; }
  85% { opacity: .55; }
  100% { opacity: 0; transform: translate3d(0, 108vh, 0) rotate(390deg); }
}

@keyframes petal-sway {
  from { translate: -16px 0; rotate: -28deg; }
  to { translate: 18px 0; rotate: 34deg; }
}

@media (max-width: 720px) {
  .blossom-layer { opacity: .6; }
}

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