.embers-container {
  height: 100vh;
  height: 100lvh;
  inset: 0;
  margin-right: var(--scrollbar-offset, 0);
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  width: 100vw;
  z-index: 3;
}
.ember-particle {
  animation: risingEmberArc var(--e-duration) linear infinite;
  animation-delay: var(--e-delay);
  background: var(--color-accent);
  border-radius: var(--border-radius-round);
  bottom: -5vh;
  box-shadow: 0 0 var(--e-intensity) var(--e-spreadRadius)
    var(--color-accent-light);
  height: var(--e-size);
  left: var(--e-left);
  opacity: 0;
  position: absolute;
  width: var(--e-size);
}
@keyframes risingEmberArc {
  0% {
    opacity: 0;
    transform: translateY(0) translate(0);
  }
  16%,
  24% {
    opacity: var(--e-bright);
  }
  20% {
    opacity: var(--e-dim);
  }
  50% {
    filter: blur(0);
    transform: translateY(-55vh) translate(var(--e-driftXMid));
  }
  60%,
  68% {
    opacity: calc(var(--e-bright) * 0.5);
  }
  64% {
    opacity: calc(var(--e-bright) * 0.5 + 0.2);
  }
  to {
    filter: blur(2px);
    opacity: 0;
    transform: translateY(-110vh) translate(var(--e-driftXFinal));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ember-particle {
    display: none;
  }
}