/* ============================================================
   ОГОНЬ ДЕМОНА — второй слой жара поверх базового (.hellfire).
   Владелец файла: агент ОГНЯ. Правит только fire.css / fire.js.

   Идея палитры: раскалённый металл, а не «ад из стоковых картинок».
   Ядро искры почти белое (255,244,224), середина янтарь (255,170,90),
   хвост уходит в багровый токен --blood. Тёплое золото на чёрном
   читается как дорогое; чистый красный — как лубок, поэтому красного
   в чистом виде почти нет, он живёт только в затухании.

   Технические рамки (контракт проекта):
   - в анимациях только transform / opacity;
   - никакого filter/blur ни в кадровом цикле, ни в keyframes;
   - никакого canvas: полноэкранный холст уже ронял страницу втрое;
   - слой не перехватывает клики, z-index не выше 36
     (пламя 34, перья 35, шапка 50, quick-view 90, волна 200).
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. ОБЩИЙ СЛОЙ. Живёт всегда, но виден только у демона.
   z-index 34 — та же полка, что у .hellfire; узлы создаются позже
   базового пламени, поэтому ложатся поверх него.
   ───────────────────────────────────────────────────────────── */
#fire-layer{
  position:fixed; inset:0;
  z-index:34;
  pointer-events:none;             /* клики сквозь огонь проходят всегда */
  overflow:hidden;
  contain:strict;                  /* слой не влияет на layout страницы */
  opacity:0;
  transition:opacity .9s var(--ease-out);
}
body.is-demon #fire-layer{ opacity:1; }

/* ─────────────────────────────────────────────────────────────
   2. ЖИВЫЕ УГЛИ ПОД КУРСОРОМ.
   Узлы берутся из пула в fire.js: позиция ставится через left/top
   один раз при рождении, дальше двигает только transform.
   ───────────────────────────────────────────────────────────── */
.fire-spark{
  position:absolute; left:0; top:0;
  width:var(--sz,8px); height:var(--sz,8px);
  margin:calc(var(--sz,8px) / -2);        /* центр искры — точно под курсором */
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,246,228,.96) 0%,
    rgba(255,196,120,.92) 26%,
    rgba(255,120,50,.55)  54%,
    rgba(255,46,60,.18)   76%,
    rgba(255,46,60,0)     100%);
  opacity:0;
  will-change:transform, opacity;
}
.fire-spark.is-live{
  animation:fire-spark-rise var(--dur,1.2s) cubic-bezier(.2,.55,.35,1) forwards;
}
/* всплыть, вильнуть в сторону и погаснуть, съёжившись */
@keyframes fire-spark-rise{
  0%   { transform:translate3d(0,0,0) scale(.35);                     opacity:0; }
  12%  {                                                              opacity:var(--op,.9); }
  55%  { transform:translate3d(calc(var(--dx,6px) * .45), calc(var(--dy,-64px) * .55), 0) scale(1); }
  100% { transform:translate3d(var(--dx,6px), var(--dy,-64px), 0) scale(.2); opacity:0; }
}

/* ─────────────────────────────────────────────────────────────
   3. ОГНЕННЫЙ СЛЕД ПРОКРУТКИ.
   Яркость держит переменная --heat на :root (её пишет fire.js
   не чаще кадра). Само свечение — статичный градиент, меняются
   только opacity и вертикальный масштаб.
   ───────────────────────────────────────────────────────────── */
.fire-heat{
  position:absolute; left:0; right:0; bottom:0;
  height:2px;
  transform-origin:50% 100%;
  background:linear-gradient(90deg,
    rgba(255,60,40,0)     0%,
    rgba(255,110,50,.55)  10%,
    rgba(255,190,120,.95) 34%,
    rgba(255,242,214,1)   50%,
    rgba(255,190,120,.95) 66%,
    rgba(255,110,50,.55)  90%,
    rgba(255,60,40,0)     100%);
  opacity:calc(.10 + var(--heat,0) * .8);
  transform:scaleY(calc(.55 + var(--heat,0) * 1.35));
}
/* ореол над линией: разгорается только при быстрой прокрутке */
.fire-heat::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:92px;
  transform-origin:50% 100%;
  background:radial-gradient(58% 100% at 50% 100%,
    rgba(255,138,60,.42) 0%,
    rgba(255,80,40,.17)  42%,
    rgba(255,46,60,.05)  66%,
    rgba(255,46,60,0)    100%);
  opacity:calc(var(--heat,0) * .62);
  transform:scaleY(calc(.45 + var(--heat,0) * .75));
}

/* ─────────────────────────────────────────────────────────────
   4. ДЫМКА над нижним пламенем.
   Три больших радиальных пятна, еле видные, медленно расходятся.
   ───────────────────────────────────────────────────────────── */
.fire-smoke{
  position:absolute; left:-18%; right:-18%; bottom:-4%;
  height:48vh;
  opacity:.085;
}
.fire-smoke i{
  position:absolute; inset:0;
  display:block;
  will-change:transform;
}
.fire-smoke i:nth-child(1){
  background:radial-gradient(46% 62% at 22% 96%, rgba(255,176,132,.9) 0%, rgba(190,90,70,.35) 45%, rgba(120,40,40,0) 75%);
  animation:fire-smoke-a 34s ease-in-out infinite alternate;
}
.fire-smoke i:nth-child(2){
  background:radial-gradient(52% 70% at 62% 104%, rgba(255,150,110,.8) 0%, rgba(160,70,60,.3) 48%, rgba(100,30,35,0) 78%);
  animation:fire-smoke-b 47s ease-in-out infinite alternate;
}
.fire-smoke i:nth-child(3){
  background:radial-gradient(40% 56% at 88% 98%, rgba(255,190,150,.7) 0%, rgba(170,80,60,.28) 44%, rgba(110,35,35,0) 76%);
  animation:fire-smoke-c 61s ease-in-out infinite alternate;
}
@keyframes fire-smoke-a{
  from{ transform:translate3d(-4%,2%,0)  scale(1);    }
  to  { transform:translate3d(6%,-5%,0)  scale(1.18); }
}
@keyframes fire-smoke-b{
  from{ transform:translate3d(5%,4%,0)   scale(1.1);  }
  to  { transform:translate3d(-7%,-6%,0) scale(1.3);  }
}
@keyframes fire-smoke-c{
  from{ transform:translate3d(3%,0,0)    scale(1.05); }
  to  { transform:translate3d(-5%,-8%,0) scale(1.24); }
}

/* ─────────────────────────────────────────────────────────────
   5. ЖАР У ГЛАВНЫХ КНОПОК.
   Тёплый отблеск пробегает по кнопке при наведении. Двигается
   только transform внутри псевдоэлемента, кнопка обрезает его
   по своей форме. Ховер-эффекты — лишь там, где есть мышь.
   ───────────────────────────────────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  body.is-demon .btn-chrome,
  body.is-demon .duality-hero,
  body.is-demon .tab.is-active{
    position:relative;
    overflow:hidden;              /* отблеск не вылезает за кромку */
    isolation:isolate;
  }
  /* .tab::after уже занят подчёркиванием — отблеску отдан ::before */
  body.is-demon .btn-chrome::after,
  body.is-demon .duality-hero::after,
  body.is-demon .tab.is-active::before{
    content:'';
    position:absolute;
    top:-45%; bottom:-45%; left:-70%;
    width:42%;
    pointer-events:none;
    background:linear-gradient(90deg,
      rgba(255,190,110,0)   0%,
      rgba(255,226,180,.55) 42%,
      rgba(255,150,70,.42)  64%,
      rgba(255,110,50,0)    100%);
    transform:translateX(0) skewX(-18deg);
    opacity:0;
  }
  body.is-demon .btn-chrome:hover::after,
  body.is-demon .btn-chrome:focus-visible::after,
  body.is-demon .duality-hero:hover::after,
  body.is-demon .duality-hero:focus-visible::after,
  body.is-demon .tab.is-active:hover::before,
  body.is-demon .tab.is-active:focus-visible::before{
    animation:fire-sweep 1.25s var(--ease-out) infinite;
  }
  /* у вкладки отблеск бледнее: он проходит поверх подписи, и на полной
     яркости буквы на секунду теряли контраст */
  body.is-demon .tab.is-active::before{
    background:linear-gradient(90deg,
      rgba(255,190,110,0)   0%,
      rgba(255,220,175,.3)  45%,
      rgba(255,150,70,.22)  70%,
      rgba(255,110,50,0)    100%);
  }
  /* тень кнопки в демоне — тёплая, а не серебряная (перебивает base.css) */
  body.is-demon .btn-chrome:hover{
    box-shadow:0 10px 30px rgba(255,110,55,.34), 0 0 0 1px rgba(255,168,96,.4);
  }
  body.is-demon .duality-hero:hover{
    border-color:rgba(255,150,80,.6);
    box-shadow:0 0 26px rgba(255,120,60,.24), inset 0 0 18px -8px rgba(255,150,80,.5);
  }
}
@keyframes fire-sweep{
  0%   { transform:translateX(0)    skewX(-18deg); opacity:0; }
  10%  {                                           opacity:1; }
  85%  {                                           opacity:.85; }
  100% { transform:translateX(400%) skewX(-18deg); opacity:0; }
}

/* Активная вкладка каталога тлеет и без наведения: подчёркивание
   становится углём и медленно дышит (меняется только opacity —
   transform у него занят анимацией появления из sections.css). */
body.is-demon .tab.is-active::after{
  background:linear-gradient(90deg,
    rgba(255,60,40,0)     0%,
    rgba(255,150,70,.95)  35%,
    rgba(255,232,196,1)   50%,
    rgba(255,150,70,.95)  65%,
    rgba(255,60,40,0)     100%);
  box-shadow:0 0 12px rgba(255,110,50,.55), 0 0 26px rgba(255,60,40,.3);
  animation:fire-tab-glow 3.2s ease-in-out infinite alternate;
}
@keyframes fire-tab-glow{
  from{ opacity:.6; }
  to  { opacity:1;  }
}

/* ─────────────────────────────────────────────────────────────
   6. ТЛЕЮЩАЯ ВЫВЕСКА «black door №4».
   По бокам неона — два язычка пламени. Форма задана SVG-маской,
   заливка — тёплый градиент; колышется только transform.
   Мерцание неона (opacity родителя) язычки подхватывают сами.
   ───────────────────────────────────────────────────────────── */
body.is-demon .s-shop .neon-sign{ position:relative; }
body.is-demon .s-shop .neon-sign::before,
body.is-demon .s-shop .neon-sign::after{
  content:'';
  position:absolute; bottom:0;
  width:.5em; height:1.5em;
  pointer-events:none;
  transform-origin:50% 100%;
  background:linear-gradient(to top,
    rgba(255,70,35,.12)   0%,
    rgba(255,96,38,.85)   18%,
    rgba(255,152,60,.95)  46%,
    rgba(255,214,150,.95) 74%,
    rgba(255,248,226,.75) 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%20100%22%3E%3Cpath%20d%3D%22M20%202%20C%2027%2024%2037%2036%2033%2058%20C%2030%2078%2025%2092%2020%2099%20C%2015%2092%207%2079%207%2058%20C%207%2038%2015%2024%2020%202%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%20100%22%3E%3Cpath%20d%3D%22M20%202%20C%2027%2024%2037%2036%2033%2058%20C%2030%2078%2025%2092%2020%2099%20C%2015%2092%207%2079%207%2058%20C%207%2038%2015%2024%2020%202%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
body.is-demon .s-shop .neon-sign::before{
  right:calc(100% + .3em);
  animation:fire-tongue-l 2.7s ease-in-out infinite alternate;
}
body.is-demon .s-shop .neon-sign::after{
  left:calc(100% + .3em);
  animation:fire-tongue-r 3.3s ease-in-out infinite alternate;
}
@keyframes fire-tongue-l{
  from{ transform:rotate(-6deg) scale(.94,.9)   translateY(2%); }
  to  { transform:rotate(5deg)  scale(.88,1.14) translateY(-3%); }
}
@keyframes fire-tongue-r{
  from{ transform:rotate(6deg)  scale(.9,.94)   translateY(1%); }
  to  { transform:rotate(-5deg) scale(.86,1.16) translateY(-4%); }
}

/* ─────────────────────────────────────────────────────────────
   7. АНГЕЛ. Всё гаснет: слой прозрачен, язычки не создаются
   (правила выше живут только под body.is-demon), жар обнуляется.
   ───────────────────────────────────────────────────────────── */
body:not(.is-demon) #fire-layer{ opacity:0; }
body:not(.is-demon) .fire-spark{ animation:none; opacity:0; }

/* ─────────────────────────────────────────────────────────────
   8. УЗКИЙ ЭКРАН: эффектов вдвое меньше — телефону хватает намёка.
   ───────────────────────────────────────────────────────────── */
@media (max-width:768px){
  .fire-smoke{ height:34vh; opacity:.06; }
  .fire-smoke i:nth-child(3){ display:none; }
  .fire-heat{ height:1.5px; }
  .fire-heat::after{ height:58px; }
  /* язычок оставляем один — второй на узкой вывеске лезет за край */
  body.is-demon .s-shop .neon-sign::after{ display:none; }
  body.is-demon .s-shop .neon-sign::before{ width:.38em; height:1.15em; }
}

/* ─────────────────────────────────────────────────────────────
   9. REDUCED MOTION: огонь остаётся, движение — нет.
   Искры JS вовсе не создаёт, --heat выставляется один раз.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  /* nth-child повторён специально: у правил дымки выше та же вескость,
     без него «animation:none» проигрывало по специфичности и клубы ползли */
  .fire-smoke i:nth-child(1),
  .fire-smoke i:nth-child(2),
  .fire-smoke i:nth-child(3),
  .fire-spark.is-live,
  body.is-demon .tab.is-active::after,
  body.is-demon .s-shop .neon-sign::before,
  body.is-demon .s-shop .neon-sign::after{
    animation:none;
  }
  .fire-spark{ display:none; }
  #fire-layer{ transition:none; }
  body.is-demon .btn-chrome:hover::after,
  body.is-demon .btn-chrome:focus-visible::after,
  body.is-demon .duality-hero:hover::after,
  body.is-demon .duality-hero:focus-visible::after,
  body.is-demon .tab.is-active:hover::before,
  body.is-demon .tab.is-active:focus-visible::before{
    animation:none;
    opacity:.5;
    transform:translateX(180%) skewX(-18deg);   /* статичный отблеск по центру */
  }
}