.fire-wind{transform-origin:0 0;transform:skewX(calc(var(--wind,0)*-26deg)) scaleY(calc(1 - var(--wind,0)*.2));transition:transform .16s ease-out}
.candle-fire{transform-origin:0 0;opacity:1}
.flame-dance{transform-origin:0 0;animation:clay-flame var(--tempo) ease-in-out var(--phase) infinite alternate}
.flame-halo{transform-origin:0 -3px;animation:clay-glow calc(var(--tempo)*1.4) ease-in-out var(--phase) infinite alternate}
.candle-smoke{opacity:0;pointer-events:none}
.out .candle-fire{animation:clay-extinguish .5s ease-out var(--delay) forwards}
.out .candle-smoke{animation:clay-smoke 1.65s ease-out calc(var(--delay) + .32s) both}
@keyframes clay-flame{0%{transform:rotate(-5deg) scale(.94,1.02)}28%{transform:rotate(3deg) scale(1.05,.94)}61%{transform:rotate(-2deg) scale(.91,1.1)}82%{transform:rotate(6deg) scale(.99,.98)}100%{transform:rotate(-3deg) scale(.96,1.06)}}
@keyframes clay-glow{from{opacity:.07;transform:scale(.9)}to{opacity:.17;transform:scale(1.08)}}
@keyframes clay-extinguish{0%{opacity:1;transform:skewX(0) scale(1)}35%{opacity:.9;transform:skewX(-22deg) scale(1.05,.65)}72%{opacity:.4;transform:translate(2px,-1px) scale(.65,.3)}100%{opacity:0;transform:translate(3px,-2px) scale(.1)}}
@keyframes clay-smoke{0%{opacity:0;transform:translate(0,0) scale(.6)}18%{opacity:.6}65%{opacity:.23;transform:translate(3px,-7px) scale(1,1.25)}100%{opacity:0;transform:translate(6px,-14px) scale(1.3,1.5)}}
@media(prefers-reduced-motion:reduce){.flame-dance,.flame-halo,.out .candle-fire,.out .candle-smoke{animation:none!important}.out .candle-fire{opacity:0}.candle-smoke{display:none}.fire-wind{transform:none;transition:none}}