/* Embers: sparks rising and burning out. */
.bgfx--embers::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(transparent, rgba(255, 96, 32, 0.12));
}
.bgfx--embers .bgfx-p > i {
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fff4c8 0 30%, #ffae42 55%, #ff5a1f 100%);
  box-shadow: 0 0 calc(var(--s) * 2.5) rgba(255, 120, 40, 0.75);
}
@media (prefers-reduced-motion: no-preference) {
  .bgfx--embers .bgfx-p { top: 100%; animation-name: bgfx-ember-rise; }
  .bgfx--embers .bgfx-p > i {
    animation:
      bgfx-sway calc(1.8s + var(--r1) * 1.6s) ease-in-out var(--t) infinite alternate,
      bgfx-ember-flicker calc(0.35s + var(--r2) * 0.5s) steps(2) infinite;
  }
}
@keyframes bgfx-ember-rise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(calc(-0.8 * var(--fall))) scale(0.35); opacity: 0; }
}
@keyframes bgfx-ember-flicker { 50% { opacity: 0.5; } }