/* «Добрый звон» — свеча. Только CSS: анимируются transform и opacity (плавно и на слабых телефонах).
   Состояния сцены .candle-stage:
     .unlit         — свеча не зажжена, на фитиле едва тлеет огонёк;
     .lit           — горит (мерцание, ореол, блики, изредка стекает капля воска);
     .lit.ignite    — сцена зажигания: огонёк другой свечи, искры, пламя разгорается, ореол, дымок (≈3,2 с).
   prefers-reduced-motion — просто горит, без сцены и мерцания. */

.candle-stage { position: relative; height: 272px; overflow: hidden; border-radius: var(--r-lg); margin-bottom: 18px; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 125%, #17396D, transparent 62%), linear-gradient(180deg, #06142D, #0B2550);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(229,176,82,.22); contain: paint; }
.candle-stage::before { content: ""; position: absolute; inset: 10px; border-radius: 18px; border: 1px solid rgba(229,176,82,.16); pointer-events: none; z-index: 3; }

/* тёплый свет по фону и ореол вокруг пламени */
.cs-warm { position: absolute; inset: 0; z-index: 0; opacity: 0; will-change: opacity;
  background: radial-gradient(75% 65% at 50% 30%, rgba(255,166,70,.30), rgba(240,130,50,.10) 45%, transparent 75%), radial-gradient(60% 30% at 50% 100%, rgba(255,170,80,.12), transparent 70%); }
.cs-halo { position: absolute; left: 50%; top: 52px; width: 420px; height: 420px; margin: -210px 0 0 -210px; z-index: 0; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(255,206,120,.62) 0%, rgba(255,170,72,.30) 16%, rgba(250,140,50,.12) 36%, rgba(240,120,40,.04) 52%, transparent 66%); }
.lit .cs-warm { opacity: 1; animation: warm-breathe 4.3s ease-in-out infinite; }
.lit .cs-halo { opacity: 1; animation: halo-flicker 1.7s ease-in-out infinite; }

/* свеча и подсвечник */
.candle-wrap { position: absolute; left: 50%; bottom: 60px; width: 0; height: 0; z-index: 1; transform: scale(1.22); transform-origin: 0 0; }
.holder { position: absolute; left: -40px; bottom: -12px; width: 80px; height: 16px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 28%, #F6DDA0 0%, #C99A45 42%, #7A5520 78%, #4D3412 100%); box-shadow: 0 8px 18px rgba(0,0,0,.5); }
.holder::before { content: ""; position: absolute; left: 26px; top: -6px; width: 28px; height: 12px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #F3D594, #A87A2E 70%); }
.holder i { position: absolute; left: 12px; top: 2px; width: 34px; height: 8px; border-radius: 50%; opacity: 0; will-change: opacity;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,246,220,.85), rgba(255,236,190,.25) 55%, transparent 75%); }
.lit .holder i { animation: shine 1.7s ease-in-out infinite; }
.candle { position: absolute; left: -13px; bottom: 0; width: 26px; height: 104px; border-radius: 4px 4px 3px 3px; overflow: visible;
  background: linear-gradient(90deg, #B7873A 0%, #E9C574 22%, #FBE6B2 46%, #F0CF86 64%, #C49349 88%, #A97A33 100%); }
.candle::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 9px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, #FFF1CC 0%, #EBC77E 60%, #C99A4C 100%); }
.lit .candle::before { background: radial-gradient(ellipse at 50% 45%, #FFF8E0 0%, #FFE2A0 35%, #EBC77E 70%, #C99A4C 100%); }
/* блик света на воске: тёплое пятно сверху, дрожит вместе с пламенем */
.wax-light { position: absolute; left: -6px; right: -6px; top: -8px; height: 70px; border-radius: 50% 50% 40% 40%; opacity: 0; will-change: opacity;
  background: radial-gradient(ellipse 55% 60% at 50% 8%, rgba(255,236,190,.95), rgba(255,210,130,.35) 45%, transparent 75%); }
.lit .wax-light { opacity: .9; animation: shine 1.7s ease-in-out infinite; }
.candle::after { content: ""; position: absolute; top: 8px; left: 5px; width: 4px; height: 76px; border-radius: 3px;
  background: linear-gradient(rgba(255,250,232,.75), rgba(255,250,232,0)); }
/* капля воска — изредка и медленно */
.drip { position: absolute; right: 3px; top: -2px; width: 6px; height: 0; opacity: 0; }
.drip::before { content: ""; position: absolute; left: 1px; top: 0; width: 4px; height: 56px; border-radius: 2px; transform-origin: 50% 0; transform: scaleY(0);
  background: linear-gradient(#FCE9BA, #F2D493); }
.drip i { position: absolute; left: 0; top: -3px; width: 6px; height: 8px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: radial-gradient(ellipse at 40% 35%, #FFF6DA, #EFCB80 70%); box-shadow: 0 1px 1px rgba(120,80,20,.35); }
.lit .drip { animation: drip-fade 26s ease-in-out 5s infinite; }
.lit .drip::before { animation: drip-trail 26s ease-in-out 5s infinite; }
.lit .drip i { animation: drip-move 26s ease-in-out 5s infinite; }

/* точка над фитилём: отсюда растёт пламя */
.flame-root { position: absolute; left: 0; bottom: 110px; width: 0; height: 0; z-index: 2; }
.wick { position: absolute; left: -1.25px; bottom: -9px; width: 2.5px; height: 13px; border-radius: 1.5px 1.5px 0 0; transform: rotate(4deg); transform-origin: 50% 100%;
  background: linear-gradient(#0E0905 0%, #2B1C0E 60%, #5A3D1C 100%); }
.ember { position: absolute; left: -2px; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; opacity: 0;
  background: #FF8A2A; box-shadow: 0 0 4px 1px rgba(255,120,30,.8), 0 0 12px 4px rgba(255,110,30,.25); }
.unlit .ember { animation: ember 3.6s ease-in-out infinite; }

/* пламя: рост (зажигание) → порыв (редкий) → колыхание → слои с разным мерцанием */
.flame-grow, .flame-gust, .flame-sway { position: absolute; left: 0; bottom: 0; width: 0; height: 0; }
.flame-grow { opacity: 0; transform: scale(0); will-change: transform, opacity; }
.lit .flame-grow { opacity: 1; transform: none; }
.flame-sway, .flame-gust { will-change: transform; }
.lit .flame-sway { animation: sway 4.3s ease-in-out infinite; }
.lit .flame-gust { animation: gust 11.3s ease-in-out infinite; }
.f-glow, .f-outer, .f-mid, .f-core, .f-blue { position: absolute; display: block; will-change: transform, opacity; transform-origin: 50% 100%; }
.f-glow { left: -50px; bottom: -34px; width: 100px; height: 120px; border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(255,214,130,.75), rgba(255,170,70,.26) 40%, transparent 70%); }
.f-outer { left: -13px; bottom: -5px; width: 26px; height: 66px; border-radius: 50% 50% 46% 46% / 78% 78% 22% 22%;
  background: radial-gradient(ellipse 50% 58% at 50% 72%, rgba(255,184,70,.95) 0%, rgba(255,128,32,.72) 48%, rgba(240,88,20,0) 74%); }
.f-mid { left: -9px; bottom: -2px; width: 18px; height: 48px; border-radius: 50% 50% 46% 46% / 78% 78% 22% 22%;
  background: radial-gradient(ellipse 50% 58% at 50% 74%, #FFF5CF 0%, #FFD866 36%, rgba(255,186,64,.92) 60%, rgba(255,160,40,0) 78%); }
.f-core { left: -4.5px; bottom: 2px; width: 9px; height: 21px; border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse 50% 55% at 50% 68%, #FFFFFF 0 34%, rgba(255,251,234,.9) 55%, rgba(255,240,200,0) 78%); }
.f-blue { left: -6.5px; bottom: -4px; width: 13px; height: 11px; border-radius: 50%; opacity: .85;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(96,140,255,.85), rgba(96,140,255,.25) 50%, rgba(96,140,255,0) 72%); }
.lit .f-glow  { animation: glow-flicker 1.7s ease-in-out infinite; }
.lit .f-outer { animation: flick-outer 1.7s ease-in-out infinite; }
.lit .f-mid   { animation: flick-mid 2.3s ease-in-out infinite; }
.lit .f-core  { animation: flick-core 1.3s ease-in-out infinite; }
.lit .f-blue  { animation: flick-blue 2.9s ease-in-out infinite; }

/* ---------- сцена зажигания ---------- */
.taper, .sparks, .smoke { position: absolute; left: 0; bottom: 0; width: 0; height: 0; pointer-events: none; }
.taper { opacity: 0; transform: translate(150px, -170px); will-change: transform, opacity; z-index: 3; }
.taper-body { position: absolute; left: -2px; bottom: 0; width: 6px; height: 150px; border-radius: 3px 3px 2px 2px; transform-origin: 50% 100%; transform: rotate(56deg);
  background: linear-gradient(90deg, #C99A4A, #FBE3A6 45%, #D9AE62); box-shadow: 0 0 10px rgba(255,190,90,.25); }
.taper-body::before { content: ""; position: absolute; left: 2px; bottom: -4px; width: 2px; height: 6px; background: #2B1C0E; border-radius: 1px; }
.taper-flame { position: absolute; left: 0; bottom: 2px; width: 0; height: 0; animation: sway 2.1s ease-in-out infinite; }
.taper-flame .f-outer { left: -9px; width: 18px; height: 44px; animation: flick-outer 1.3s ease-in-out infinite; }
.taper-flame .f-mid { left: -6px; width: 12px; height: 31px; animation: flick-mid 1.7s ease-in-out infinite; }
.taper-flame .f-core { left: -3px; width: 6px; height: 14px; animation: flick-core 1.1s ease-in-out infinite; }
.sparks i { position: absolute; left: -1.5px; bottom: 0; width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: #FFF4D0; box-shadow: 0 0 4px 1px rgba(255,200,90,.9); will-change: transform, opacity; }
.sparks i:nth-child(1) { --dx: -22px; --dy: -18px; } .sparks i:nth-child(2) { --dx: 18px; --dy: -26px; } .sparks i:nth-child(3) { --dx: -10px; --dy: -34px; }
.sparks i:nth-child(4) { --dx: 26px; --dy: -8px; }  .sparks i:nth-child(5) { --dx: -28px; --dy: -4px; } .sparks i:nth-child(6) { --dx: 6px; --dy: -40px; }
.smoke i { position: absolute; left: -5px; bottom: 8px; width: 10px; height: 26px; border-radius: 50%; opacity: 0; filter: blur(3px);
  background: radial-gradient(ellipse, rgba(225,228,238,.6), rgba(225,228,238,0) 70%); will-change: transform, opacity; }
.smoke i:nth-child(1) { --sx: -14px; --sx2: 6px; } .smoke i:nth-child(2) { --sx: 10px; --sx2: -12px; } .smoke i:nth-child(3) { --sx: -4px; --sx2: 16px; }

.ignite .taper { animation: taper 3.2s cubic-bezier(.45,.05,.3,1) both; }
.ignite .sparks i { animation: spark 3.2s ease-out both; }
.ignite .sparks i:nth-child(2n) { animation-delay: .06s; }
.ignite .sparks i:nth-child(3n) { animation-delay: .12s; }
.ignite .smoke i { animation: smoke 4.2s ease-out both; }
.ignite .smoke i:nth-child(2) { animation-delay: .35s; }
.ignite .smoke i:nth-child(3) { animation-delay: .7s; }
.ignite .flame-grow { animation: grow 3.2s cubic-bezier(.3,.1,.3,1) both; }
.ignite .cs-halo { animation: halo-in 3.2s ease-out both, halo-flicker 1.7s ease-in-out 3.2s infinite; }
.ignite .cs-warm { animation: warm-in 3.2s ease-out both, warm-breathe 4.3s ease-in-out 3.2s infinite; }
.ignite .wax-light, .ignite .holder i { animation: light-in 3.2s ease-out both, shine 1.7s ease-in-out 3.2s infinite; }
.ignite .stage-caption { animation: caption-in 3.2s ease-out both; }
.ignite .ember { animation: ember-out 3.2s ease-out both; }

.stage-caption { position: absolute; bottom: 16px; left: 0; right: 0; z-index: 3; text-align: center; font-family: var(--serif); font-style: italic; font-size: 16px; color: rgba(246,236,214,.85); }

/* ---------- ключевые кадры ---------- */
@keyframes sway {
  0%   { transform: rotate(-1.2deg) skewX(.6deg); }
  13%  { transform: rotate(1.6deg) skewX(-1.2deg); }
  27%  { transform: rotate(-.4deg) skewX(.4deg); }
  41%  { transform: rotate(2.2deg) skewX(-1.6deg); }
  58%  { transform: rotate(-1.8deg) skewX(1.2deg); }
  73%  { transform: rotate(.8deg) skewX(-.5deg); }
  88%  { transform: rotate(-2deg) skewX(1deg); }
  100% { transform: rotate(-1.2deg) skewX(.6deg); }
}
@keyframes gust {
  0%, 58%, 76%, 100% { transform: none; }
  62% { transform: rotate(-5deg) scale(.94, 1.1); }
  66% { transform: rotate(3.5deg) scale(1.04, .9); }
  70% { transform: rotate(-1.5deg) scale(.98, 1.04); }
}
@keyframes flick-outer {
  0%, 100% { transform: scale(1, 1); opacity: .95; }
  18% { transform: scale(.96, 1.05); opacity: 1; }
  35% { transform: scale(1.03, .95); opacity: .88; }
  52% { transform: scale(.97, 1.07); opacity: 1; }
  70% { transform: scale(1.02, .97); opacity: .92; }
  86% { transform: scale(.98, 1.03); opacity: .97; }
}
@keyframes flick-mid {
  0%, 100% { transform: scale(1, 1); }
  23% { transform: scale(1.04, .95); }
  47% { transform: scale(.95, 1.06); }
  66% { transform: scale(1.02, .98); }
  81% { transform: scale(.97, 1.04); }
}
@keyframes flick-core {
  0%, 100% { transform: scale(1, 1); opacity: .95; }
  40% { transform: scale(.94, 1.08); opacity: 1; }
  70% { transform: scale(1.05, .94); opacity: .9; }
}
@keyframes flick-blue { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: .6; transform: scale(1.1, .9); } }
@keyframes glow-flicker {
  0%, 100% { opacity: .9; transform: scale(1); }
  18% { opacity: 1; transform: scale(1.04); }
  35% { opacity: .78; transform: scale(.97); }
  52% { opacity: 1; transform: scale(1.05); }
  70% { opacity: .85; transform: scale(.99); }
  86% { opacity: .95; transform: scale(1.02); }
}
@keyframes halo-flicker {
  0%, 100% { opacity: .92; transform: scale(1); }
  18% { opacity: 1; transform: scale(1.025); }
  35% { opacity: .82; transform: scale(.985); }
  52% { opacity: 1; transform: scale(1.03); }
  70% { opacity: .88; transform: scale(.995); }
  86% { opacity: .96; transform: scale(1.012); }
}
@keyframes warm-breathe { 0%, 100% { opacity: .95; } 41% { opacity: 1; } 58% { opacity: .86; } 88% { opacity: .92; } }
@keyframes shine { 0%, 100% { opacity: .82; } 18% { opacity: .95; } 35% { opacity: .66; } 52% { opacity: 1; } 70% { opacity: .74; } 86% { opacity: .88; } }
@keyframes ember { 0%, 100% { opacity: .22; } 45% { opacity: .62; } 60% { opacity: .45; } }
@keyframes ember-out { 0% { opacity: .4; } 30% { opacity: .9; } 36%, 100% { opacity: 0; } }
@keyframes drip-fade { 0% { opacity: 0; } 4% { opacity: 1; } 52% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes drip-move { 0% { transform: translateY(0) scale(.2); } 8% { transform: translateY(1px) scale(1); } 50% { transform: translateY(50px) scale(1, 1.15); } 100% { transform: translateY(52px) scale(1); } }
@keyframes drip-trail { 0%, 8% { transform: scaleY(0); } 50%, 100% { transform: scaleY(.95); } }

/* зажигание: 0–1,0 с огонёк подносят, 1,0 с касание и искры, 1,0–2,6 с пламя разгорается, затем огонёк уносят */
@keyframes taper {
  0%   { opacity: 0; transform: translate(150px, -170px); }
  8%   { opacity: 1; }
  30%  { transform: translate(7px, -3px); }
  34%  { transform: translate(5px, -1px); }
  44%  { transform: translate(8px, -5px); opacity: 1; }
  74%  { transform: translate(160px, -180px); opacity: 1; }
  84%, 100% { transform: translate(160px, -180px); opacity: 0; }
}
@keyframes spark {
  0%, 31% { opacity: 0; transform: translate(0, 0) scale(1); }
  32% { opacity: 1; transform: translate(0, -2px) scale(1.2); }
  52% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}
@keyframes grow {
  0%, 30% { opacity: 0; transform: scale(0); }
  31% { opacity: 1; transform: scale(.12, .1); }
  40% { transform: scale(.3, .26); }
  50% { transform: scale(.48, .55); }
  64% { transform: scale(.8, .86); }
  78% { transform: scale(1.06, 1.12); }
  90% { transform: scale(.97, .96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes smoke {
  0%, 30% { opacity: 0; transform: translate(0, 0) scale(.5); }
  36% { opacity: .55; transform: translate(0, -8px) scale(.7); }
  60% { opacity: .35; transform: translate(var(--sx), -52px) scale(1.5, 1.8); }
  100% { opacity: 0; transform: translate(var(--sx2), -110px) scale(2.4, 2.8); }
}
@keyframes halo-in { 0%, 32% { opacity: 0; transform: scale(.15); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: .95; transform: scale(1); } }
@keyframes warm-in { 0%, 34% { opacity: 0; } 100% { opacity: .95; } }
@keyframes light-in { 0%, 36% { opacity: 0; } 100% { opacity: .85; } }
@keyframes caption-in { 0%, 55% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }

/* ---------- маленькая свеча в «Моих заявках» ---------- */
.mini-candle { position: relative; display: inline-block; width: 14px; height: 24px; vertical-align: -5px; margin-right: 6px; }
.mini-candle::before { content: ""; position: absolute; left: 4px; bottom: 0; width: 6px; height: 12px; border-radius: 1.5px;
  background: linear-gradient(90deg, #C99A4A, #FBE3A6 50%, #D3A65A); }
.mini-candle::after { content: ""; position: absolute; left: 6.5px; bottom: 12px; width: 1px; height: 3px; background: #3A2812; }
.mini-candle i { position: absolute; left: 3px; bottom: 13px; width: 8px; height: 12px; border-radius: 50% 50% 45% 45% / 75% 75% 25% 25%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 50% 58% at 50% 72%, #FFFBEA 0 18%, #FFD866 42%, rgba(255,150,40,.9) 66%, rgba(255,120,30,0) 80%);
  animation: mini-flick 1.9s ease-in-out infinite; will-change: transform, opacity; }
.mini-candle i::after { content: ""; position: absolute; left: -7px; top: -4px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,196,96,.45), transparent 65%); }
.mini-candle.off i { display: none; }
@keyframes mini-flick {
  0%, 100% { transform: rotate(-3deg) scale(1, 1); opacity: .95; }
  21% { transform: rotate(4deg) scale(.92, 1.08); opacity: 1; }
  47% { transform: rotate(-2deg) scale(1.05, .92); opacity: .85; }
  73% { transform: rotate(3deg) scale(.96, 1.05); opacity: 1; }
}

/* ---------- без анимации: просто горит ---------- */
@media (prefers-reduced-motion: reduce) {
  .candle-stage *, .candle-stage *::before, .candle-stage *::after, .mini-candle i { animation: none !important; }
  .taper, .sparks, .smoke, .drip { display: none !important; }
  .ignite .flame-grow { opacity: 1; transform: none; }
  .ignite .cs-halo, .ignite .cs-warm { opacity: 1; transform: none; }
  .ignite .wax-light, .ignite .holder i { opacity: .85; }
  .unlit .ember { opacity: .45; }
}