.midnight-kiss-logo {
  --kiss-glow-peak: 0.9;
  --kiss-glow-tail: 0.38;
  --kiss-spark-peak: 1;
  --kiss-glow-blur: 0.65rem;
  --kiss-spark-size: 3px;
  position: relative;
  isolation: isolate;
  display: block;
  overflow: visible;
}

.midnight-kiss-logo img {
  position: relative;
  z-index: 1;
}

.midnight-kiss-logo::before {
  position: absolute;
  z-index: 2;
  top: 57%;
  left: 39%;
  width: 29%;
  height: 18%;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse, rgb(255 0 86 / 68%), rgb(255 0 124 / 18%) 45%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(var(--kiss-glow-blur));
  opacity: 0;
  animation: midnight-kiss 9s ease-in-out infinite;
}

.midnight-kiss-logo::after {
  position: absolute;
  z-index: 3;
  top: 61%;
  left: 68%;
  width: var(--kiss-spark-size);
  height: var(--kiss-spark-size);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, #fff 48% 52%, transparent) center / 38px 1px no-repeat,
    linear-gradient(0deg, transparent, #fff 48% 52%, transparent) center / 1px 30px no-repeat,
    #fff;
  opacity: 0;
  animation: kiss-spark 9s ease-out infinite;
}

.midnight-kiss-logo--nav {
  --kiss-glow-peak: 0.62;
  --kiss-glow-tail: 0.26;
  --kiss-spark-peak: 0.78;
  --kiss-glow-blur: 0.45rem;
  --kiss-spark-size: 2px;
}

.midnight-kiss-logo--footer {
  --kiss-glow-peak: 0.55;
  --kiss-glow-tail: 0.23;
  --kiss-spark-peak: 0.7;
  --kiss-glow-blur: 0.42rem;
  --kiss-spark-size: 2px;
}

@keyframes midnight-kiss {
  0%, 48%, 76%, 100% { opacity: 0; transform: scale(0.92); }
  57% { opacity: var(--kiss-glow-peak); transform: scale(1.05); }
  66% { opacity: var(--kiss-glow-tail); transform: scale(1); }
}

@keyframes kiss-spark {
  0%, 62%, 72%, 100% { opacity: 0; transform: scale(0.2) rotate(0); box-shadow: none; }
  66% { opacity: var(--kiss-spark-peak); transform: scale(1.2) rotate(12deg); box-shadow: 0 0 1.2rem 0.35rem rgb(255 61 155 / 55%); }
}

@media (prefers-reduced-motion: reduce) {
  .midnight-kiss-logo::before,
  .midnight-kiss-logo::after {
    display: none;
    animation: none;
  }
}