.ember-container {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
}

.ember {
  position: absolute;
  top: var(--spawn-top, 100%);
  left: var(--spawn-left, 50%);
  width: var(--size, 10px);
  height: var(--size, 10px);
  border-radius: 50%;
  background-color: hsl(var(--hue-start, 30), 100%, 70%);
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity, filter;

  animation:
    floatUp var(--duration, 24s) linear forwards,
    glowPulse var(--pulse-speed, 8s) ease-in-out infinite,
    fadeInOut var(--lifespan, 6s) ease-in-out forwards,
    hueShift var(--duration, 24s) ease-in-out forwards;
}

@keyframes floatUp {
  0% {
    transform: translate(0, 0) scale(var(--scale, 1)) rotate(var(--rotation, 0deg));
  }
  25% {
    transform: translate(calc((var(--drift-x, 0px) + var(--wind-x, 0px)) * 0.5), -40vh) rotate(var(--rotation, 0deg));
  }
  50% {
    transform: translate(calc((var(--drift-x, 0px) + var(--wind-x, 0px)) * 1), -80vh) rotate(var(--rotation, 0deg));
  }
  75% {
    transform: translate(calc((var(--drift-x, 0px) + var(--wind-x, 0px)) * 1.5), -115vh) rotate(var(--rotation, 0deg));
  }
  100% {
    transform: translate(calc((var(--drift-x, 0px) + var(--wind-x, 0px)) * 2), -150vh) scale(0.3) rotate(var(--rotation, 0deg));
  }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 10px hsl(var(--hue-start), 100%, 60%);
    filter: brightness(1) blur(1px);
  }
  50% {
    box-shadow: 0 0 24px hsl(var(--hue-start), 100%, 90%);
    filter: brightness(1.4) blur(2px);
  }
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  15% { opacity: var(--opacity, 0.5); }
  85% { opacity: var(--opacity, 0.5); }
  100% { opacity: 0; }
}

@keyframes hueShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(60deg); }
}