:root{--blow:0}*{box-sizing:border-box}.candles-layer{position:absolute;inset:0;pointer-events:none}.candle{--scale:1;--rotation:0deg;--delay:0s;position:absolute;width:28px;height:112px;transform:translate(-50%,-100%) scale(var(--scale)) rotate(var(--rotation));transform-origin:center bottom;pointer-events:auto;touch-action:none}.candle__body{position:absolute;right:5px;bottom:0;left:5px;height:71px;overflow:hidden;border:1px solid rgba(30,25,20,.25);border-radius:8px 8px 4px 4px;background:repeating-linear-gradient(-38deg,#fffef8 0 8px,var(--candle-color,#ffd437) 8px 16px);box-shadow:inset 4px 0 6px rgba(255,255,255,.35),inset -4px 0 5px rgba(30,25,20,.15),0 7px 12px rgba(16,6,29,.18)}.candle__wick{position:absolute;bottom:70px;left:50%;width:2px;height:9px;border-radius:2px;background:#222;transform:translateX(-50%)}.flame{position:absolute;bottom:78px;left:50%;width:24px;height:39px;opacity:1;filter:drop-shadow(0 0 7px rgba(255,176,54,.95)) drop-shadow(0 0 15px rgba(255,108,92,.48));transform:translateX(-50%) rotate(calc(-3deg + (var(--blow)*23deg))) scaleX(calc(1 - (var(--blow)*.34))) scaleY(calc(1 - (var(--blow)*.25)));transform-origin:50% 100%;transition:opacity .18s ease;animation:flame-flicker .17s ease-in-out infinite alternate;animation-delay:var(--delay)}.flame::before,.flame::after{content:"";position:absolute;inset:0;border-radius:52% 48% 55% 45%/68% 68% 32% 32%;transform:rotate(45deg)}.flame::before{background:radial-gradient(circle at 68% 70%,#fffbd2 0 17%,#ffd65a 18% 43%,#ff8d3a 44% 71%,#ff4f62 72%)}.flame::after{inset:13px 8px 5px;background:#fffbd6;opacity:.86}.smoke{position:absolute;bottom:76px;left:50%;width:10px;height:10px;opacity:0;transform:translateX(-50%)}.smoke::before,.smoke::after{content:"";position:absolute;width:13px;height:24px;border-radius:50%;background:rgba(222,216,229,.44);filter:blur(4px)}.smoke::after{left:5px;top:5px;width:9px;height:19px;opacity:.55}.candle.is-out .flame{opacity:0;animation:none;transform:translateX(-50%) translateY(8px) scale(.08)}.candle.is-out .smoke{animation:smoke-rise 2.2s ease-out forwards}@keyframes flame-flicker{from{margin-left:-1px;transform:translateX(-50%) rotate(calc(-7deg + (var(--blow)*24deg))) scaleX(calc(.92 - (var(--blow)*.30))) scaleY(calc(.96 - (var(--blow)*.22)))}to{margin-left:1px;transform:translateX(-50%) rotate(calc(4deg + (var(--blow)*27deg))) scaleX(calc(1.03 - (var(--blow)*.33))) scaleY(calc(1.08 - (var(--blow)*.26)))}}@keyframes smoke-rise{0%{opacity:0;transform:translate(-50%,0) scale(.6)}15%{opacity:.65}100%{opacity:0;transform:translate(calc(-50% + 14px),-64px) scale(1.8)}}
