.fep-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--fep-z, 20);
}

.fep-item{
  position: absolute;
  top: -40px;
  pointer-events: none;
  animation: fepFall linear infinite;
  will-change: transform, opacity;
}

.fep-petal-shape{
  border-radius: 70% 30% 65% 35%;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.fep-petal-shape::after{
  content:"";
  position:absolute;
  inset:2px 3px 5px 3px;
  border-radius:inherit;
  background:rgba(255,255,255,.20);
}

.fep-snow-shape{
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,255,255,.45);
}
.fep-rain-shape{
  border-radius: 999px;
  opacity: .75 !important;
}
.fep-cloud-shape{
  width: 30px !important;
  height: 16px !important;
  border-radius: 999px;
  box-shadow: 12px 2px 0 2px rgba(255,255,255,.9), -10px 3px 0 1px rgba(255,255,255,.88);
}
.fep-bubble-shape{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset -4px -6px 8px rgba(255,255,255,.08), 0 0 10px rgba(255,255,255,.1);
}

@keyframes fepFall{
  0%{
    transform: translate3d(0,-30px,0) rotate(0deg);
    opacity:0;
  }
  10%{ opacity:1; }
  100%{
    transform: translate3d(var(--fep-drift-x, 40px),110vh,0) rotate(var(--fep-rotate, 220deg));
    opacity:0;
  }
}