/* Decorative embers: CSS transforms only, behind the page and never interactive. */
body { isolation:isolate; }
.sparks { display:none; }
.js .sparks {
  display:block; position:fixed; inset:0; overflow:hidden; z-index:-1;
  pointer-events:none; contain:strict;
}
.spark {
  --drift:30px; --rise:65vh; --duration:11s;
  position:absolute; bottom:-14px; left:5%; width:3px; height:7px;
  border-radius:50%; background:#ffc481; opacity:0;
  box-shadow:0 0 5px #ffa24fc0,0 0 13px #fa79284d;
  animation:spark-rise var(--duration) linear infinite;
}
.spark:nth-child(4n) { width:2px; height:4px; --rise:48vh; background:#ffe4b9; }
.spark:nth-child(5n) { width:3px; height:9px; --rise:74vh; }
.spark:nth-child(1) { left:3%; --duration:10s; animation-delay:-2s; }
.spark:nth-child(2) { left:9%; --drift:-35px; --duration:13s; animation-delay:-9s; }
.spark:nth-child(3) { left:16%; --drift:52px; --duration:12s; animation-delay:-5s; }
.spark:nth-child(4) { left:23%; --drift:-18px; --duration:9s; animation-delay:-7s; }
.spark:nth-child(5) { left:31%; --drift:37px; --duration:14s; animation-delay:-3s; }
.spark:nth-child(6) { left:39%; --drift:-45px; --duration:11s; animation-delay:-8s; }
.spark:nth-child(7) { left:47%; --drift:24px; --duration:12s; animation-delay:-1s; }
.spark:nth-child(8) { left:54%; --drift:-32px; --duration:10s; animation-delay:-6s; }
.spark:nth-child(9) { left:63%; --drift:48px; --duration:13s; animation-delay:-10s; }
.spark:nth-child(10) { left:71%; --drift:-22px; --duration:11s; animation-delay:-4s; }
.spark:nth-child(11) { left:79%; --drift:34px; --duration:14s; animation-delay:-11s; }
.spark:nth-child(12) { left:87%; --drift:-43px; --duration:10s; animation-delay:-3s; }
.spark:nth-child(13) { left:95%; --drift:-28px; --duration:12s; animation-delay:-8s; }
.spark:nth-child(14) { left:6%; --drift:17px; --duration:14s; animation-delay:-12s; }
.spark:nth-child(15) { left:19%; --drift:-39px; --duration:11s; animation-delay:-2s; }
.spark:nth-child(16) { left:28%; --drift:25px; --duration:13s; animation-delay:-6s; }
.spark:nth-child(17) { left:36%; --drift:-51px; --duration:9s; animation-delay:-1s; }
.spark:nth-child(18) { left:44%; --drift:32px; --duration:14s; animation-delay:-10s; }
.spark:nth-child(19) { left:58%; --drift:-27px; --duration:12s; animation-delay:-4s; }
.spark:nth-child(20) { left:67%; --drift:42px; --duration:10s; animation-delay:-8s; }
.spark:nth-child(21) { left:76%; --drift:-33px; --duration:13s; animation-delay:-2s; }
.spark:nth-child(22) { left:83%; --drift:19px; --duration:11s; animation-delay:-7s; }
.spark:nth-child(23) { left:91%; --drift:-47px; --duration:14s; animation-delay:-5s; }
.spark:nth-child(24) { left:98%; --drift:-22px; --duration:9s; animation-delay:-4s; }
@keyframes spark-rise {
  0% { transform:translate3d(0,0,0) rotate(-12deg) scale(1); opacity:0; }
  12% { opacity:.85; }
  45% { opacity:.55; }
  80% { opacity:.16; }
  100% { transform:translate3d(var(--drift),calc(-1 * var(--rise)),0) rotate(22deg) scale(.4); opacity:0; }
}
html[data-theme=light] .sparks { opacity:.55; }
html[data-theme=light] .spark { background:#b96625; box-shadow:0 0 5px #d88b4533; }
.effects-toggle { display:none; padding:0; border:0; background:transparent; color:var(--muted); font:inherit; text-decoration:underline; text-underline-offset:4px; }
.js .effects-toggle { display:inline; }
html[data-sparks=off] .sparks { display:none; }
html[data-page-hidden=true] .spark { animation-play-state:paused; }
@media(max-width:760px) {
  .spark:nth-child(n+15) { display:none; }
  .spark { --rise:52vh; }
}
@media(prefers-reduced-motion:reduce) {
  .js .sparks,.js .effects-toggle { display:none; }
  .spark { animation:none; }
}
@media print { .js .sparks,.js .effects-toggle { display:none; } }
