/* ============================================================
   ДВА ЛИЦА САЙТА: ангел (серебро) / демон (багровый металл).
   Механика: body.is-demon переопределяет токены из base.css.
   Смену палитры прячет круговая «волна» #duality-wipe,
   поэтому плавные transition на каждом элементе не нужны.
   ============================================================ */

/* ---- кнопка-крест в шапке ---- */
.duality{
  display:inline-flex; align-items:center; gap:.55em;
  min-width:44px; min-height:44px; padding:.4em .9em;
  background:transparent; border:1px solid var(--line); border-radius:2px;
  color:var(--muted); cursor:pointer;
  font-family:var(--font-text); font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  transition:color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.duality:hover{ color:var(--ink); border-color:var(--chrome-mid); }
.duality .d-cross{
  font-size:1.5em; line-height:1; color:var(--chrome-mid);
  transition:transform .6s var(--ease-out), color .3s;
  transform:rotate(0deg);
}
/* демон: крест переворачивается */
body.is-demon .duality .d-cross{ transform:rotate(180deg); color:var(--blood); }
.duality .d-label::after{ content:'ангел'; }
body.is-demon .duality .d-label::after{ content:'демон'; }

/* На узком экране кнопка в шапке налезала на бургер и обрезалась —
   оставляем только крест, подпись живёт в меню и в hero-кнопке */
@media (max-width:820px){
  .site-nav .duality{ padding:.4em .55em; gap:0; }
  .site-nav .duality .d-label{ display:none; }
}

/* в мобильном меню — та же кнопка крупнее; каскад появления как у ссылок
   (base.css анимирует только nav a — кнопку без этого показывало без входа) */
.mobile-menu .duality{
  margin-top:2rem; font-size:12px; padding:.8em 1.6em;
  opacity:0; transform:translateY(14px);
}
.mobile-menu.is-open .duality{
  opacity:1; transform:none;
  transition:opacity .4s var(--ease-out) .4s, transform .4s var(--ease-out) .4s,
    color .3s var(--ease-out), border-color .3s var(--ease-out);
}

/* ---- волна-переход ---- */
#duality-wipe{
  position:fixed; left:0; top:0; width:120px; height:120px;
  margin-left:-60px; margin-top:-60px;
  border-radius:50%;
  background:radial-gradient(circle, #1a060a 0%, #0a0406 70%);
  transform:scale(0);
  pointer-events:none; z-index:200;
  will-change:transform;
}
#duality-wipe.is-run{
  transition:transform .55s cubic-bezier(.6,0,.9,.4);
}
#duality-wipe.is-back{
  transition:transform .5s cubic-bezier(.2,.6,.2,1), opacity .5s;
  opacity:0;
}
/* обратная волна в ангельский режим — серебряная */
#duality-wipe.to-angel{
  background:radial-gradient(circle, #15151d 0%, #050508 70%);
}

/* ---- переопределение мира: ДЕМОН ---- */
body.is-demon{
  --bg:#0a0406; --bg-2:#150609; --ink:#f7ecec; --muted:#a3888c;
  --chrome-hi:#ffd9d0; --chrome-mid:#e0555f; --chrome-lo:#c4404e; /* хвост градиента светлее — тёмный бордовый тонул в фоне */
  --line:rgba(255,80,90,.16);
}

/* кровавая луна */
body.is-demon .hero-moon{
  background:
    radial-gradient(circle at 38% 34%, rgba(255,120,110,.5) 0%, transparent 42%),
    radial-gradient(circle at 62% 60%, rgba(120,10,20,.85) 0%, transparent 55%),
    radial-gradient(circle, #6e1018 0%, #3a060c 55%, #1c0306 100%);
  box-shadow:0 0 120px 24px rgba(255,46,60,.18), 0 0 320px 60px rgba(120,10,20,.25);
}
body.is-demon .hero-stars{ opacity:.5; }

/* неон «black door» в демоне раскаляется добела */
body.is-demon .neon-sign{
  color:#ffe3e0;
  text-shadow:
    0 0 6px rgba(255,120,120,.9),
    0 0 18px rgba(255,46,60,.85),
    0 0 42px rgba(255,46,60,.6),
    0 0 90px rgba(255,46,60,.4);
}

/* серебряная заливка кнопок становится раскалённой */
body.is-demon .btn-chrome{
  background-image:linear-gradient(155deg, var(--chrome-hi) 0%, var(--chrome-mid) 38%, var(--chrome-lo) 60%, var(--chrome-hi) 82%, var(--chrome-mid) 100%);
  color:#12040a;
}

/* выделение текста */
body.is-demon ::selection{ background:var(--blood); color:#12040a; }

/* свечение хром-заголовков в демоне — тёплое, не серебряное */
body.is-demon .chrome-text{ text-shadow:0 0 18px rgba(255,60,70,.13); }

/* курсор-капля: duality.js шлёт событие, cursor.js красит сам,
   но подстрахуем цветом через переменную */
body.is-demon .cursor-drop{ filter:none; }

/* ══════════ ОГОНЬ ДЕМОНА ══════════
   Тлеющие следы там, где у ангела чистые линии. Всё статикой и
   transform — ни одного filter в кадровом цикле. */

/* Линии-разделители тлеют, будто прожжены.
   У ступеней заказа рамка есть у ВСЕХ строк, поэтому им общее свечение
   бокса не вредит. У статистики манифеста рамка только у второй и третьей
   ячейки (li + li) — и box-shadow обводил эти две ячейки целиком, будто
   у сетки сломалась разметка (пиксельная проба demon-4-manifest). Там
   тление вынесено на отдельную линию-псевдоэлемент шириной 1px. */
body.is-demon .order-steps li{
  border-color:rgba(255,70,60,.22);
  box-shadow:0 1px 12px -6px rgba(255,60,50,.5);
}
body.is-demon .manifest-stats li + li{
  position:relative;
  border-color:rgba(255,70,60,.30);
  box-shadow:none;
}
/* Раскалённая нить строго вдоль разделителя: вертикально на широком экране */
body.is-demon .manifest-stats li + li::before{
  content:'';
  position:absolute;
  top:0; bottom:0; left:-1px;
  width:1px;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,70,60,0) 0%, rgba(255,110,80,.85) 50%, rgba(255,70,60,0) 100%);
  box-shadow:0 0 9px 1px rgba(255,60,50,.45);
}
/* На узком экране разделитель становится горизонтальным (sections.css) —
   нить поворачивается вместе с ним */
@media (max-width:700px){
  body.is-demon .manifest-stats li + li::before{
    top:-1px; bottom:auto; left:0; right:0;
    width:auto; height:1px;
    background:linear-gradient(90deg,
      rgba(255,70,60,0) 0%, rgba(255,110,80,.85) 50%, rgba(255,70,60,0) 100%);
  }
}

/* Карточки товара в демоне: рамка раскаляется при наведении */
body.is-demon .card:hover .card-media,
body.is-demon .card:focus-visible .card-media{
  border-color:rgba(255,90,80,.55);
  box-shadow:0 0 26px -6px rgba(255,60,50,.4);
}

/* Круги маршрута — как клейма */
body.is-demon .route-step b{
  border-color:rgba(255,80,70,.35);
  box-shadow:inset 0 0 18px -6px rgba(255,60,50,.55), 0 0 22px -10px rgba(255,60,50,.5);
}

/* Тлеющая кромка под шапкой */
body.is-demon .site-nav.is-scrolled{
  border-bottom-color:rgba(255,70,60,.28);
  box-shadow:0 1px 24px -12px rgba(255,60,50,.65);
}

/* Огонь по нижней кромке экрана: два слоя «языков» ползут навстречу.
   Только translate — композитор GPU, страницу не перерисовывает. */
.hellfire{
  position:fixed; left:-10%; right:-10%; bottom:-8px;
  height:120px;
  z-index:34;                 /* под слоем перьев/искр (35) */
  pointer-events:none;
  opacity:0;
  transition:opacity .8s var(--ease-out);
}
body.is-demon .hellfire{ opacity:1; }
.hellfire span{
  position:absolute; inset:0;
  background:
    radial-gradient(60px 90px at 10% 118%, rgba(255,120,60,.5), transparent 70%),
    radial-gradient(80px 120px at 26% 124%, rgba(255,60,40,.45), transparent 72%),
    radial-gradient(52px 78px at 42% 116%, rgba(255,150,70,.4), transparent 70%),
    radial-gradient(96px 128px at 58% 126%, rgba(220,30,30,.4), transparent 74%),
    radial-gradient(64px 96px at 76% 118%, rgba(255,110,50,.45), transparent 72%),
    radial-gradient(72px 104px at 92% 122%, rgba(255,60,40,.4), transparent 72%);
  animation:hellfire-drift 9s ease-in-out infinite alternate;
  will-change:transform;
}
.hellfire span:nth-child(2){
  animation-duration:13s;
  animation-direction:alternate-reverse;
  opacity:.7;
}
@keyframes hellfire-drift{
  from{ transform:translate3d(-4%,4px,0) scaleY(.92); }
  to  { transform:translate3d(4%,-6px,0) scaleY(1.08); }
}

/* доступность: людям с reduced-motion волну не играем — просто мгновенная смена */
@media (prefers-reduced-motion: reduce){
  #duality-wipe{ display:none; }
  .duality .d-cross{ transition:none; }
  .hellfire span{ animation:none; }
}