/* Elyxee burn effect — full-bleed WebGL surface, sits under the cursor canvas.
   Body already shows Fire.jpg as a cover underlay, so the canvas snaps on with
   no fade — first WebGL frame and the CSS sheet are the same picture. */
#burn-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

#burn-fx.is-ready {
  opacity: 1;
}

/* Recovering: the pointer is only the cold presence drawn in the burn pass.
   Hide the flame cursor canvas entirely — no stacked fire glow on top of frost.
   It goes out over the first half of the quench, holding for a moment and then
   sinking, so it crossfades with the coal the burn pass draws in its place. */
html[data-burn-phase="recovering"] #cursor-fx {
  opacity: 0 !important;
  transition: opacity 620ms cubic-bezier(0.35, 0, 0.75, 0.35);
}

html:not([data-burn-phase="recovering"]) #cursor-fx {
  transition: opacity 260ms cubic-bezier(0.2, 0.7, 0.4, 1) 120ms;
}

/* Coming back from the vortex, the thawed ember leads and the flame grows in
   over it. Only for that handoff; normal pointer entry keeps the timing above. */
html[data-burn-thaw]:not([data-burn-phase="recovering"]) #cursor-fx {
  transition: opacity 700ms cubic-bezier(0.35, 0, 0.25, 1) 480ms;
}

@media (prefers-reduced-motion: reduce) {
  #burn-fx {
    transition-duration: 0.01ms;
  }

  html[data-burn-phase="recovering"] #cursor-fx,
  html:not([data-burn-phase="recovering"]) #cursor-fx,
  html[data-burn-thaw]:not([data-burn-phase="recovering"]) #cursor-fx {
    transition-duration: 0.01ms;
  }
}