.mefx-active {
  isolation: isolate;
}

.mefx-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 999;
}

.mefx-star,
.mefx-glow,
.mefx-ripple,
.mefx-trail-dot {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.mefx-star {
  z-index: 2;
  line-height: 1;
  animation-fill-mode: forwards;
}

.mefx-glow {
  border-radius: 999px;
  animation: mefx-fade-out 160ms linear forwards;
}

.mefx-trail-dot {
  border-radius: 999px;
  animation: mefx-pulse-out 420ms ease-out forwards;
}

.mefx-ripple {
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: transparent;
  animation: mefx-ripple-out 900ms cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
}

@keyframes mefx-fall-1 {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.3);
    opacity: 0;
  }
  12% {
    transform: translate(-50%, -50%) translate(8px, -8px) rotate(24deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(24px, 160px) rotate(200deg) scale(0.9);
    opacity: 0;
  }
}

@keyframes mefx-fall-2 {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.35);
    opacity: 0;
  }
  10% {
    transform: translate(-50%, -50%) translate(-10px, -6px) rotate(-22deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(-18px, 140px) rotate(-170deg) scale(0.65);
    opacity: 0;
  }
}

@keyframes mefx-fall-3 {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -50%) translate(8px, 4px) rotate(16deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(14px, 116px) rotate(150deg) scale(0.75);
    opacity: 0;
  }
}

@keyframes mefx-fade-out {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
}

@keyframes mefx-pulse-out {
  0% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.6);
  }
}

@keyframes mefx-ripple-out {
  0% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.3);
  }
}