/* Огонёк «в фокусе» (flame.js) — кнопка горячей сделки в шапке карточки.

   Здесь только покой обоих состояний и тихое мерцание под мышью: розжиг и
   угасание играет сам модуль (Web Animations), а заканчивает каждое ровно на
   том, что записано тут. Так прерванная анимация не оставляет кнопку в
   промежуточном виде. */

.flame-btn {
  /* Краски огня. Своя тёплая гамма, а не `--amber`: у того в светлой теме
     #9C5E00 — цвет текста-предупреждения, а пламя из него выходит бурым. */
  --flame-top: #FF6A2B;
  --flame-bottom: #FFAE3D;
  --flame-edge: #E8601C;
  --flame-core: #FFD95C;
  --flame-spark: #FFB547;
  --flame-spark-hot: #FF7A2F;
  /* Ореол на светлом листе — только бледно-персиковый и прозрачный: тёплый
     оранжевый поверх белого в полную силу читается грязным пятном, а не
     светом. В покое его почти нет, вспыхивает он лишь при розжиге. */
  --flame-halo: rgba(255, 170, 90, .55);
  --flame-glow-rest: .45;
  position: relative;
}

[data-theme="dark"] .flame-btn {
  --flame-top: #FF6F2E;
  --flame-bottom: #FFB547;
  --flame-edge: #FF8A3D;
  --flame-core: #FFE08A;
  --flame-spark: #FFD27A;
  --flame-spark-hot: #FF9B4A;
  /* На тёмном ореол и есть свет: держим его заметным и в покое. */
  --flame-halo: rgba(255, 130, 50, .42);
  --flame-glow-rest: .75;
}

/* Искры и дым поднимаются чуть выше значка — без этого их срезал бы край
   `<svg>`. Сама кнопка не растёт: всё, что вылетает, рисуется поверх, а не
   раздвигает шапку. */
.flame-btn .flame { overflow: visible; }

.flame-off {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.flame-fill {
  stroke: var(--flame-edge); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.flame-core { fill: var(--flame-core); }
.flame-stop-top { stop-color: var(--flame-top); }
.flame-stop-bottom { stop-color: var(--flame-bottom); }
.flame-halo-in { stop-color: var(--flame-halo); }
.flame-halo-out { stop-color: var(--flame-halo); stop-opacity: 0; }

/* Точки опоры в единицах значка: пламя растёт и оседает от основания
   (низ контура — 21), сердцевина — от своей середины, ореол — от центра
   круга. */
.flame-off, .flame-body, .flame-flicker, .flame-core, .flame-glow {
  transform-box: view-box;
}
.flame-off, .flame-body, .flame-flicker { transform-origin: 12px 21px; }
.flame-core { transform-origin: 12px 17.2px; }
.flame-glow { transform-origin: 12px 14.5px; }

/* ---------- покой ---------- */

.flame-body, .flame-glow { opacity: 0; }
.flame-btn.is-on .flame-off { opacity: 0; }
.flame-btn.is-on .flame-body { opacity: 1; }
.flame-btn.is-on .flame-glow { opacity: var(--flame-glow-rest); }

/* ---------- эффекты ---------- */

.flame-spark { fill: var(--flame-spark); }
.flame-spark--hot { fill: var(--flame-spark-hot); }
.flame-spark { transform-box: fill-box; transform-origin: center; opacity: 0; }

.flame-smoke {
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  opacity: 0;
}

/* ---------- мерцание ----------

   Только под мышью: постоянно дрожащий значок в шапке тянул бы взгляд на
   себя всё время, пока открыта карточка. Амплитуда — пара процентов,
   период нечётный и неровный, чтобы не читалось как пульс. Мерцает
   внутренняя группа, а не `.flame-body`: у той свои анимации розжига, и
   превращения складываются, а не перебивают друг друга. */
@keyframes flame-flicker {
  0%, 100% { transform: none; }
  22% { transform: scale(.985, 1.035) skewX(-1.5deg); }
  41% { transform: scale(1.01, .985) skewX(1deg); }
  63% { transform: scale(.99, 1.025) skewX(1.8deg); }
  82% { transform: scale(1.005, .99) skewX(-.6deg); }
}
@keyframes flame-core-flicker {
  0%, 100% { opacity: 1; }
  30% { opacity: .82; }
  55% { opacity: .96; }
  75% { opacity: .86; }
}
.flame-btn.is-on:hover .flame-flicker {
  animation: flame-flicker 1.7s ease-in-out infinite;
}
.flame-btn.is-on:hover .flame-core {
  animation: flame-core-flicker 1.3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .flame-btn.is-on:hover .flame-flicker,
  .flame-btn.is-on:hover .flame-core { animation: none; }
}