.logo-premium-wrap {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.logo-premium {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: logoPulse 4s ease-in-out infinite;
}

.logo-premium img {
  display: block;
  position: relative;
  z-index: 3;
}

/* soft premium aura */
.logo-premium::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(42,186,102,0.42) 0%,
      rgba(42,186,102,0.22) 38%,
      transparent 72%);
  filter: blur(16px);
  animation: premiumAura 3.8s ease-in-out infinite;
  z-index: 1;
}

/* sparkles */
.spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 4;

  background:
    radial-gradient(circle,
      #ffffff 0%,
      #bfffd7 22%,
      #2ABA66 50%,
      transparent 72%);

  box-shadow:
    0 0 8px rgba(255,255,255,0.9),
    0 0 16px rgba(42,186,102,0.85),
    0 0 28px rgba(42,186,102,0.45);
}

.s1 { width: 6px; height: 6px; left: 18%; top: 58%; animation: sparkFloat1 3.2s infinite; }
.s2 { width: 8px; height: 8px; left: 38%; top: 20%; animation: sparkFloat2 3.8s infinite .4s; }
.s3 { width: 5px; height: 5px; left: 65%; top: 24%; animation: sparkFloat3 3.4s infinite .8s; }
.s4 { width: 10px; height: 10px; left: 82%; top: 55%; animation: sparkFloat4 4.1s infinite .2s; }
.s5 { width: 6px; height: 6px; left: 55%; top: 82%; animation: sparkFloat5 3.6s infinite 1s; }
.s6 { width: 7px; height: 7px; left: 5%; top: 35%; animation: sparkFloat6 4s infinite .6s; }
.s7 { width: 5px; height: 5px; left: 92%; top: 25%; animation: sparkFloat7 3.7s infinite 1.2s; }
.s8 { width: 9px; height: 9px; left: 30%; top: 92%; animation: sparkFloat8 4.3s infinite .9s; }

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}

@keyframes premiumAura {
  0%, 100% {
    transform: scale(1);
    opacity: 0.62;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes rotateRing {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes sparkFloat1 {
  0% { transform: translate(0,0) scale(.5); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(-10px,-28px) scale(1.2); opacity: 0; }
}

@keyframes sparkFloat2 {
  0% { transform: translate(0,0) scale(.5); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(8px,-30px) scale(1.1); opacity: 0; }
}

@keyframes sparkFloat3 {
  0% { transform: translate(0,0) scale(.5); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(14px,-26px) scale(1.15); opacity: 0; }
}

@keyframes sparkFloat4 {
  0% { transform: translate(0,0) scale(.5); opacity: 0; }
  28% { opacity: 1; }
  100% { transform: translate(18px,-20px) scale(1.2); opacity: 0; }
}

@keyframes sparkFloat5 {
  0% { transform: translate(0,0) scale(.5); opacity: 0; }
  28% { opacity: 1; }
  100% { transform: translate(-6px,-26px) scale(1.1); opacity: 0; }
}

@keyframes sparkFloat6 {
  0% { transform: translate(0,0) scale(.5); opacity: 0; }
  26% { opacity: 1; }
  100% { transform: translate(-18px,-18px) scale(1.2); opacity: 0; }
}

@keyframes sparkFloat7 {
  0% { transform: translate(0,0) scale(.5); opacity: 0; }
  28% { opacity: 1; }
  100% { transform: translate(16px,-28px) scale(1.15); opacity: 0; }
}

@keyframes sparkFloat8 {
  0% { transform: translate(0,0) scale(.5); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-8px,-24px) scale(1.2); opacity: 0; }
}

@media (max-width: 480px) {
  .logo-premium-wrap {
    padding: 2px;
  }

  .logo-premium::before {
    inset: -16px;
    filter: blur(13px);
  }

  .logo-premium::after {
    inset: -8px;
  }
}