/* One flame at rest and during interaction; no overlapping inner icon. */
@keyframes hz-flame-flicker{
  0%,100%{transform:rotate(-3deg) scale(.96,1.03);filter:drop-shadow(0 -1px 2px #d7753280)}
  18%{transform:rotate(2deg) scale(1.04,.97);filter:drop-shadow(0 -2px 3px #e98946aa)}
  37%{transform:rotate(-2deg) scale(.92,1.12);filter:drop-shadow(0 -2px 4px #ef9b52b3)}
  58%{transform:rotate(3deg) scale(1.02,1.04);filter:drop-shadow(0 -1px 2px #d7753280)}
  76%{transform:rotate(-1deg) scale(.95,1.14);filter:drop-shadow(0 -3px 4px #ef9b52aa)}
}

/* The trigger follows the whole link/button, including dynamically added links. */
@media(prefers-reduced-motion:no-preference){
  :where(a,button,label,[role="button"]):not(:disabled):not([aria-disabled="true"]):focus-within .link-flame{animation:hz-flame-flicker .78s ease-in-out infinite}
  :where(a,button,label,[role="button"]):not(:disabled):not([aria-disabled="true"]):focus-within .link-flame::before{background:linear-gradient(to top,#b85424 5%,#df7e39 48%,#f5c083 100%)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  :where(a,button,label,[role="button"]):not(:disabled):not([aria-disabled="true"]):hover .link-flame{animation:hz-flame-flicker .78s ease-in-out infinite}
  :where(a,button,label,[role="button"]):not(:disabled):not([aria-disabled="true"]):hover .link-flame::before{background:linear-gradient(to top,#b85424 5%,#df7e39 48%,#f5c083 100%)}
}
@media(prefers-reduced-motion:reduce){
  .link-flame{animation:none;transform:none;filter:none}
}