.odb-embers{
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform: translate3d(var(--ember-x, 0px), var(--ember-y, 0px), 0);
}

.odb-embers--far{ z-index: 3; opacity: .74; }
.odb-embers--near{ z-index: 4; opacity: .84; }

.odb-embers i{
  position: absolute;
  left: var(--ember-left);
  top: var(--ember-top);
  width: calc(var(--ember-size) * 1.35);
  height: calc(var(--ember-size) * 1.35);
  border-radius: 50%;
  background: radial-gradient(circle, #fffbdc 0%, #ffe29a 24%, #ffad52 52%, rgba(255, 101, 49, .62) 72%, transparent 100%);
  box-shadow: 0 0 8px 2px rgba(255, 177, 72, .54), 0 0 20px 5px rgba(255, 71, 39, .24);
  opacity: 0;
  animation: odb-ember-rise var(--ember-duration) linear var(--ember-delay) infinite;
}

.odb-embers i::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 65%;
  width: 2px;
  height: calc(var(--ember-size) * 6);
  transform: translateX(-50%);
  transform-origin: top;
  background: linear-gradient(180deg, rgba(255, 219, 135, .92), rgba(255, 112, 53, .46) 42%, transparent);
  opacity: .7;
}

.odb-embers--near i{
  width: calc(var(--ember-size) * 1.75);
  height: calc(var(--ember-size) * 1.75);
}

.odb-embers--far i:nth-child(1){ --ember-left: 8%;  --ember-top: 88%; --ember-size: 3px; --ember-duration: 9s;    --ember-delay: -3s;  --ember-drift: -24px; }
.odb-embers--far i:nth-child(2){ --ember-left: 23%; --ember-top: 75%; --ember-size: 2px; --ember-duration: 11s;   --ember-delay: -8s;  --ember-drift: 19px;  }
.odb-embers--far i:nth-child(3){ --ember-left: 39%; --ember-top: 94%; --ember-size: 3px; --ember-duration: 10s;   --ember-delay: -5s;  --ember-drift: -17px; }
.odb-embers--far i:nth-child(4){ --ember-left: 58%; --ember-top: 82%; --ember-size: 2px; --ember-duration: 12s;   --ember-delay: -10s; --ember-drift: 25px;  }
.odb-embers--far i:nth-child(5){ --ember-left: 73%; --ember-top: 91%; --ember-size: 3px; --ember-duration: 9.5s;  --ember-delay: -6s;  --ember-drift: -21px; }
.odb-embers--far i:nth-child(6){ --ember-left: 88%; --ember-top: 78%; --ember-size: 2px; --ember-duration: 11.5s; --ember-delay: -2s;  --ember-drift: 17px;  }
.odb-embers--far i:nth-child(7){ --ember-left: 96%; --ember-top: 96%; --ember-size: 2px; --ember-duration: 10.5s; --ember-delay: -7s;  --ember-drift: -14px; }
.odb-embers--far i:nth-child(8){ --ember-left: 16%; --ember-top: 99%; --ember-size: 4px; --ember-duration: 11s;   --ember-delay: -9s;  --ember-drift: 21px;  }
.odb-embers--far i:nth-child(9){ --ember-left: 34%; --ember-top: 84%; --ember-size: 3px; --ember-duration: 9.8s;  --ember-delay: -1s;  --ember-drift: -26px; }
.odb-embers--far i:nth-child(10){ --ember-left: 51%; --ember-top: 92%; --ember-size: 4px; --ember-duration: 12.5s; --ember-delay: -4s;  --ember-drift: 18px;  }
.odb-embers--far i:nth-child(11){ --ember-left: 68%; --ember-top: 98%; --ember-size: 3px; --ember-duration: 10.2s; --ember-delay: -11s; --ember-drift: -19px; }
.odb-embers--far i:nth-child(12){ --ember-left: 83%; --ember-top: 89%; --ember-size: 4px; --ember-duration: 11.8s; --ember-delay: -6s;  --ember-drift: 25px;  }
.odb-embers--far i:nth-child(13){ --ember-left: 44%; --ember-top: 78%; --ember-size: 3px; --ember-duration: 13s;   --ember-delay: -3s;  --ember-drift: -16px; }
.odb-embers--far i:nth-child(14){ --ember-left: 3%;  --ember-top: 94%; --ember-size: 4px; --ember-duration: 10.8s; --ember-delay: -8s;  --ember-drift: 22px;  }

.odb-embers--near i:nth-child(1){ --ember-left: 14%; --ember-top: 90%; --ember-size: 4px; --ember-duration: 7.5s; --ember-delay: -4s;  --ember-drift: 32px;  }
.odb-embers--near i:nth-child(2){ --ember-left: 31%; --ember-top: 80%; --ember-size: 3px; --ember-duration: 8.5s; --ember-delay: -7s;  --ember-drift: -28px; }
.odb-embers--near i:nth-child(3){ --ember-left: 48%; --ember-top: 98%; --ember-size: 4px; --ember-duration: 7s;   --ember-delay: -2s;  --ember-drift: 24px;  }
.odb-embers--near i:nth-child(4){ --ember-left: 65%; --ember-top: 86%; --ember-size: 3px; --ember-duration: 9s;   --ember-delay: -6s;  --ember-drift: -34px; }
.odb-embers--near i:nth-child(5){ --ember-left: 79%; --ember-top: 95%; --ember-size: 4px; --ember-duration: 7.8s; --ember-delay: -5s;  --ember-drift: 29px;  }
.odb-embers--near i:nth-child(6){ --ember-left: 91%; --ember-top: 83%; --ember-size: 3px; --ember-duration: 8.8s; --ember-delay: -1s;  --ember-drift: -23px; }
.odb-embers--near i:nth-child(7){ --ember-left: 4%;  --ember-top: 76%; --ember-size: 3px; --ember-duration: 9.2s; --ember-delay: -8s;  --ember-drift: 27px;  }
.odb-embers--near i:nth-child(8){ --ember-left: 21%; --ember-top: 96%; --ember-size: 6px; --ember-duration: 7.2s; --ember-delay: -3s;  --ember-drift: -38px; }
.odb-embers--near i:nth-child(9){ --ember-left: 37%; --ember-top: 88%; --ember-size: 5px; --ember-duration: 8.2s; --ember-delay: -9s;  --ember-drift: 34px;  }
.odb-embers--near i:nth-child(10){ --ember-left: 55%; --ember-top: 97%; --ember-size: 6px; --ember-duration: 7.6s; --ember-delay: -5s;  --ember-drift: -31px; }
.odb-embers--near i:nth-child(11){ --ember-left: 72%; --ember-top: 82%; --ember-size: 5px; --ember-duration: 8.7s; --ember-delay: -2s;  --ember-drift: 37px;  }
.odb-embers--near i:nth-child(12){ --ember-left: 85%; --ember-top: 99%; --ember-size: 6px; --ember-duration: 7.4s; --ember-delay: -7s;  --ember-drift: -35px; }
.odb-embers--near i:nth-child(13){ --ember-left: 96%; --ember-top: 91%; --ember-size: 5px; --ember-duration: 8s;   --ember-delay: -4s;  --ember-drift: 29px;  }
.odb-embers--near i:nth-child(14){ --ember-left: 7%;  --ember-top: 84%; --ember-size: 5px; --ember-duration: 9.4s; --ember-delay: -10s; --ember-drift: -32px; }

@keyframes odb-ember-rise {
  0%   { opacity: 0; transform: translate3d(0, 20px, 0) scale(.55); }
  12%  { opacity: .82; }
  72%  { opacity: .72; }
  100% { opacity: 0; transform: translate3d(var(--ember-drift), -82vh, 0) scale(.18); }
}

/* Sur tactile et machine modeste, les braises restent mais à moitié moins de
   couches composites : la traînée (::after) est le poste le plus cher, puis
   la seconde ombre portée (20 px de flou, 5 px d'étalement) que chaque braise
   doit rasteriser une fois pour toutes dans sa propre couche. */
@media(hover:none),(pointer:coarse){
  .odb-embers i:nth-child(n+7){ display: none; }
  .odb-embers i::after{ display: none; }
  .odb-embers--far{ opacity: .6; }
  .odb-embers i{ box-shadow: 0 0 8px 2px rgba(255, 177, 72, .44); }
}

@media(prefers-reduced-motion:reduce){
  .odb-embers i{ animation: none; opacity: .5; }
  .odb-embers i::after{ display: none; }
}