.subscribe-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  filter: blur(0.4px);
  animation: rippleExpand 700ms cubic-bezier(0.22, 0.9, 0.32, 1) forwards;
}
.subscribe-burst {
  position: absolute;
  transform: translate(-50%, -50%) translate(0, 0) scale(1);
  pointer-events: none;
  will-change: transform, opacity;
  line-height: 1;
  opacity: 1;
  animation: burstFly 820ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
.subscribe-burst.subscribe-circle {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #ff3b30;
}
.subscribe-burst.subscribe-star {
  font-size: 16px;
  color: #ffd700;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(241, 218, 83, 0.18);
  transform-origin: 50% 50%;
}
.subscribe-plus-one {
  position: absolute;
  right: -10px;
  top: -8px;
  font-size: 14px;
  color: #d0fb10;
  font-weight: 700;
  pointer-events: none;
  animation: plusUp 900ms forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}
.subscribe-ring {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
}
.subscribe-ring.pulse-subscribe {
  opacity: 1;
  animation: pulse-subscribe 520ms ease-out forwards;
}
#finsery-subscribe-btn.subscribed {
  background-color: #ececec;
  color: #606060;
  box-shadow: none;
}
#finsery-subscribe-btn.subscribed .subscribe-ripple {
  background: rgba(247, 252, 175, 0.12);
}
#finsery-subscribe-btn.subscribed .subscribe-burst.subscribe-circle {
  background: rgb(172, 75, 1);
}
#finsery-subscribe-btn.subscribed .subscribe-burst.subscribe-star {
  color: #fadc6f;
  text-shadow: none;
}
@keyframes rippleExpand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.9;
  }
  60% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0.18;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.6);
    opacity: 0;
  }
}
@keyframes burstFly {
  0% {
    transform: translate(-50%, -50%) translate(0px, 0px) scale(1) rotate(0deg);
    opacity: 1;
  }
  70% {
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, 0px))
      scale(0.45) rotate(var(--rot, 45deg));
    opacity: 0;
  }
}
@keyframes plusUp {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.7);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-18px) scale(0.9);
  }
}
@keyframes pulse-subscribe {
  0% {
    transform: translateY(-50%) scale(0.6);
    opacity: 0.6;
  }
  60% {
    transform: translateY(-50%) scale(1.8);
    opacity: 0.18;
  }
  100% {
    transform: translateY(-50%) scale(2.8);
    opacity: 0;
  }
}