/* craft signature "candle": berry candle on a shop shelf. Compositor-only: drips scaleY (once), flame scale/rotate/opacity flicker (only while .cs-live = on screen), static glow layers fade by opacity, toppers pop via transform+opacity.
   Without JS (or before the module arms: .cs-ready) everything is shown dressed and lit. NO animated shadow/filter/gradient. */
.cs-stage{position:relative;width:min(100%,520px);aspect-ratio:1/1.04;margin:0 auto}
.cs-arch{position:absolute;inset:3% 8% 4%;border-radius:999px 999px 28px 28px;background:rgba(255,246,233,.07);border:2px solid rgba(255,246,233,.28)}
.cs-glow{position:absolute;inset:-6% -6% 6%;pointer-events:none;background:radial-gradient(ellipse 50% 40% at 50% 40%,rgba(255,196,96,.6) 0,rgba(255,164,60,.24) 38%,rgba(255,150,50,0) 100%)}
.cs-glow2{background:radial-gradient(ellipse 28% 24% at 50% 40%,rgba(255,236,170,.5) 0,rgba(255,236,170,0) 100%)}
.cs-bgpine{position:absolute;bottom:13%;height:auto;opacity:.9}
.cs-bp1{left:12%;width:11%}.cs-bp2{right:11%;width:9%;bottom:13%}
.cs-shelf{position:absolute;left:3%;right:3%;bottom:8%;height:5.2%;border-radius:10px;background:#8A5A3C;box-shadow:inset 0 4px 0 #A87550,inset 0 -5px 0 rgba(0,0,0,.18)}
.cs-shadow{position:absolute;left:28%;right:28%;bottom:12.2%;height:2.4%;border-radius:50%;background:rgba(0,0,0,.28)}
.cs-candle{position:absolute;left:30%;width:40%;bottom:13%;height:50%}
.cs-body{position:absolute;z-index:0;inset:3% 0 0;border-radius:10px 10px 16px 16px;overflow:hidden;background:#B63A57 linear-gradient(90deg,rgba(255,255,255,.22),transparent 26%,transparent 70%,rgba(0,0,0,.2))}
.cs-body::after{content:"";position:absolute;left:0;right:0;top:56%;height:15%;background:repeating-linear-gradient(-45deg,#FFF6E6 0 9px,#E7ADB9 9px 18px);opacity:.95}
.cs-pool{position:absolute;z-index:2;left:-1%;right:-1%;top:-2.4%;height:11%;border-radius:50%;background:#FFF6E6;box-shadow:inset 0 -5px 0 #F0D9BE}
.cs-drip{position:absolute;z-index:1;top:3%;width:11%;background:#FFF6E6;border-radius:0 0 99px 99px;transform-origin:50% 0}
.cs-dr0{left:7%;height:24%}.cs-dr1{left:30%;width:9%;height:36%}.cs-dr2{left:57%;width:12%;height:19%}.cs-dr3{left:80%;width:9%;height:29%}
.cs-wick{position:absolute;left:49.4%;top:34.2%;width:3px;height:3.4%;background:#3A2A22;border-radius:2px;z-index:3}
.cs-flame{position:absolute;left:46%;top:23.4%;width:8%;height:auto;z-index:4;transform-origin:50% 100%}
.cs-top{position:absolute;height:auto;z-index:5;transform-origin:50% 100%;transition:transform .6s var(--bounce,cubic-bezier(.34,1.56,.64,1)),opacity .3s ease}
.cs-top-swirl{left:32%;top:28.6%;width:15%}.cs-top-cherry{left:52.5%;top:29.5%;width:12.5%}.cs-top-pine{left:59%;top:18%;width:12%;z-index:2}
.cs-top-house{left:22%;top:57%;width:17%;--r:-4deg}.cs-top-tail{left:63%;top:44%;width:19%;--r:4deg}
.cs-top-house,.cs-top-tail{transform:rotate(var(--r,0deg))}.cs-top-tail{z-index:1}
/* controls */
.cs-ctl{margin-top:18px;text-align:center}
.cs-q{margin:0 0 10px;font:400 italic 17px/1.3 var(--f-hand,var(--f-body));color:#F3E8DD}
.cs-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cs-t{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:5px 16px 5px 8px;border:2px solid #FFF6E9;border-radius:999px;background:transparent;color:#FFF6E9;font:600 15px/1 var(--f-disp2,var(--f-body));cursor:pointer;transition:transform .15s var(--ease,ease)}
.cs-t svg{width:30px;height:30px;flex:none;background:#FFF6E9;border-radius:50%;padding:4px}
.cs-t[aria-pressed=true]{background:#FFF6E9;color:#3A2A22}
.cs-t[aria-pressed=true] svg{background:#F9E3D3}
.cs-t:focus-visible{outline:3px solid #F2B84B;outline-offset:2px}
.cs-live-msg{margin:8px 0 0;min-height:1.4em;font-size:13.5px;color:#F3E8DD}
.cs-cap{margin:6px auto 0;max-width:42ch;font-size:14.5px;color:#F3E8DD}
.cs-ctl{display:none}.cs-ready .cs-ctl{display:block}
/* armed (JS present): undressed + unlit until scrolled into view */
.cs-ready .cs-top:not(.is-on){opacity:0;transform:translateY(-28%) scale(.2) rotate(var(--r,0deg));pointer-events:none}
.cs-ready .cs-drip{transition:transform .95s cubic-bezier(.35,.75,.3,1) calc(.25s + var(--i)*.14s)}
.cs-ready:not(.cs-go) .cs-drip{transform:scaleY(0);will-change:transform}
.cs-ready .cs-glow{transition:opacity 1.4s ease .3s}
.cs-ready:not(.cs-lit) .cs-glow{opacity:0}
.cs-ready .cs-flame{transition:transform .5s var(--bounce,cubic-bezier(.34,1.56,.64,1)),opacity .3s ease}
.cs-ready:not(.cs-lit) .cs-flame{transform:scale(0);opacity:0}
.cs-ready.cs-lit .cs-flame{will-change:auto}
@keyframes cs-fl{0%,100%{transform:scale(1,1) rotate(0)}18%{transform:scale(.94,1.06) rotate(-1.6deg)}41%{transform:scale(1.04,.95) rotate(1.1deg)}63%{transform:scale(.96,1.05) rotate(-.7deg)}82%{transform:scale(1.02,.98) rotate(1.5deg)}}
@keyframes cs-gl{0%,100%{opacity:1}30%{opacity:.62}55%{opacity:.9}78%{opacity:.7}}
.cs-live.cs-lit .cs-flame{animation:cs-fl 2.7s ease-in-out infinite}
.cs-live.cs-lit .cs-glow2{animation:cs-gl 2.7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .cs-ready .cs-top,.cs-ready .cs-drip,.cs-ready .cs-glow,.cs-ready .cs-flame{transition:none!important;will-change:auto!important}
  .cs-live.cs-lit .cs-flame,.cs-live.cs-lit .cs-glow2{animation:none!important}
}