/* Fire on map markers (fire.js): flame particles (bright orange radial glows) rise and shrink; smoke particles (grey) rise
   further and slower. Sits behind the marker, inside its stacking context. */
.fire { position: absolute; left: 50%; bottom: 55%; z-index: -1; width: 30px; height: 56px; transform: translateX(-50%); filter: blur(.5px); pointer-events: none; }
.fire i, .fire b { position: absolute; bottom: 0; left: var(--x); border-radius: 50%; opacity: 0; animation-delay: var(--d); animation-iteration-count: infinite; }
.fire i { width: 16px; height: 16px; margin-left: -8px; background: radial-gradient(#ffb347 0, #ff5000 30%, rgb(255 80 0 / 0) 70%); mix-blend-mode: screen; animation-name: flame; animation-duration: 1s; animation-timing-function: ease-in; }
.fire b { width: 22px; height: 22px; margin-left: -11px; background: radial-gradient(rgb(90 88 88 / .7) 0, rgb(49 48 48 / .4) 40%, rgb(49 48 48 / 0) 70%); animation-name: smoke; animation-duration: 2.4s; animation-timing-function: ease-out; }
@keyframes flame { 0% { transform: translateY(6px) scale(1.1); opacity: 1; } 100% { transform: translateY(-34px) scale(.1); opacity: 0; } }
@keyframes smoke { 0% { transform: translateY(-18px) scale(.6); opacity: 0; } 30% { opacity: .85; } 100% { transform: translateY(-64px) scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fire { display: none; } }