.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* embers */
.embers{position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
.ember{
  position:absolute; bottom:-10px; border-radius:50%;
  background: radial-gradient(circle, var(--amber) 0%, rgba(245,158,11,0) 70%);
  opacity:0; animation: rise linear infinite;
}
@keyframes rise{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.8; }
  90%{ opacity:.3; }
  100%{ transform: translateY(-110vh) translateX(var(--drift,20px)); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .ember{animation:none; display:none;} }