/* ═══════════════════════════════════════════════════════════════════
   wings.css — тематический слой «крылья и перья».
   Владелец: агент крыльев. Все узлы создаёт assets/js/wings.js,
   :root не объявляем (его пишет base.css), чужие файлы не трогаем.

   Правила слоя (жёсткие):
   • в движении — только transform и opacity, никакого filter/blur;
   • весь декор pointer-events:none и aria-hidden;
   • z-index ≤ 36 (шапка 50, quick-view 90, волна перехода 200);
   • на узком экране (≤820px) остаются только разделители секций
     и перо у подсказки прокрутки — остальное прячем, чтобы не сорить;
   • prefers-reduced-motion — всё статично, без анимаций.

   Комплекты крыльев переключает ambient.css: у каждого <use>
   класс .w-angel или .w-demon, показывается нужный по body.is-demon.
   Цвет берём из токенов: --chrome-mid в демоне сам становится
   раскалённым (duality.css), поэтому отдельных правил почти не нужно.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── База всех иконок слоя ─── */
.wg{
  display:block;
  pointer-events:none;
  color:var(--chrome-mid);
}
.wg use{pointer-events:none;}

/* ═══════════════════════════════════════════════════════════════════
   1. КРЫЛЬЯ У ЭМБЛЕМЫ В ШАПКЕ
   Корни крыльев спрятаны за диском эмблемы — получается герб, как
   в футере. Позиция absolute: высота шапки (72px) не меняется вовсе.
   ═══════════════════════════════════════════════════════════════════ */
.nav-brand{position:relative;}
/* эмблема и название всегда выше декора: корни крыльев прячутся за диском.
   ВАЖНО: крылья лежат в .nav-brand, а не в .nav-halo — там их подминает
   правило base.css `.nav-halo svg{inset:0; width:100%; height:100%}`. */
.nav-brand .nav-halo,
.nav-brand .nav-title{position:relative; z-index:1;}

/* Корни крыльев стоят у самой кромки диска (x=5 и x=39 при нимбе 44px):
   если поставить их в центр, свёрнутое крыло целиком прячется за
   эмблемой и его не видно. Приём с зеркалом: обе стороны считают от
   transform-origin:left center, зеркалит отрицательный scaleX — тогда
   левое крыло отражается ВЛЕВО от корня, а не перепрыгивает вправо
   (грабля: origin у внутреннего края уносит весь бокс на другую сторону). */
.wg-brand{
  position:absolute;
  top:50%;
  z-index:0;
  width:21px; height:auto; aspect-ratio:128/72;
  opacity:.35;
  transform-origin:left center;
  transition:transform .55s var(--ease-out), opacity .55s var(--ease-out);
}
/* свёрнутое состояние: крылья прижаты и чуть опущены (scaleX .62) */
.wg-brand-l{left:5px;  transform:translateY(-52%) scaleX(-.62) rotate(10deg);}
.wg-brand-r{left:39px; transform:translateY(-52%) scaleX(.62) rotate(10deg);}
/* раскрытие — только при наведении на сам логотип и с клавиатуры */
@media (hover:hover) and (pointer:fine){
  .nav-brand:hover .wg-brand{opacity:.78;}
  .nav-brand:hover .wg-brand-l{transform:translateY(-58%) scaleX(-1) rotate(-10deg);}
  .nav-brand:hover .wg-brand-r{transform:translateY(-58%) scaleX(1) rotate(-10deg);}
}
.nav-brand:focus-visible .wg-brand{opacity:.78;}
.nav-brand:focus-visible .wg-brand-l{transform:translateY(-58%) scaleX(-1) rotate(-10deg);}
.nav-brand:focus-visible .wg-brand-r{transform:translateY(-58%) scaleX(1) rotate(-10deg);}

/* ═══════════════════════════════════════════════════════════════════
   2. ПЁРЫШКО У ПУНКТА МЕНЮ
   Ложится в промежуток слева от пункта: ширину строки не меняет,
   цвет наследует у ссылки — активный пункт получает серебро сам.
   ═══════════════════════════════════════════════════════════════════ */
.wg-nav{
  position:absolute;
  left:-15px; top:50%;
  z-index:0;
  width:9px; aspect-ratio:24/56;
  color:inherit;
  opacity:0;
  transform:translate(5px,-50%) rotate(-30deg) scale(.7);
  transition:opacity .3s var(--ease-out), transform .45s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover .wg-nav{
    opacity:.9;
    transform:translate(0,-50%) rotate(-14deg) scale(1);
  }
}
.nav-links a:focus-visible .wg-nav,
.nav-links a.is-active .wg-nav{
  opacity:.95;
  transform:translate(0,-50%) rotate(-14deg) scale(1);
}
/* у демона это язычок пламени — белым он читался как лист, нужен алый */
body.is-demon .wg-nav{color:var(--blood);}

/* ═══════════════════════════════════════════════════════════════════
   3. КРЫЛЬЯ КАРТОЧКИ ТОВАРА
   Выезжают из-за верхних углов вверх-наружу. Конечное положение —
   выше кромки карточки и по краям от нимба (.card-halo занимает
   центральные 70% ширины), поэтому крылья с ним не спорят.
   На тач-экранах не показываем вовсе — ховера там нет.
   ═══════════════════════════════════════════════════════════════════ */
/* z-index:-1 — ключ ко всему приёму: крыло уходит ПОД фотографию
   (у .card-media непрозрачный фон), поэтому наружу торчит только
   кончик, а не всё крыло поверх снимка. .card не создаёт свой
   контекст наложения (z-index:auto), так что минус-слой прячется
   именно за карточкой, а не за всей секцией. */
.wg-card{
  position:absolute;
  top:-17px;
  z-index:-1;
  width:54px; aspect-ratio:128/72;
  opacity:0;
  transition:transform .55s var(--ease-out), opacity .4s var(--ease-out);
}
/* зеркалим относительно центра бокса (origin по умолчанию): сам бокс
   остаётся у своего угла, а сдвиги после scaleX(-1) считаются в
   зеркальной системе — оба крыла двигаются симметрично одними числами */
.wg-card-l{
  left:-30px;
  transform:scaleX(-1) translate(-26px,15px) rotate(15deg) scale(.8);
}
.wg-card-r{
  right:-30px;
  transform:translate(-26px,15px) rotate(15deg) scale(.8);
}
@media (hover:hover) and (pointer:fine){
  .card:hover .wg-card,
  .card:focus-visible .wg-card{opacity:.62;}
  .card:hover .wg-card-l,
  .card:focus-visible .wg-card-l{transform:scaleX(-1) translate(0,0) rotate(-6deg) scale(1);}
  .card:hover .wg-card-r,
  .card:focus-visible .wg-card-r{transform:translate(0,0) rotate(-6deg) scale(1);}
}
@media (hover:none){
  .wg-card{display:none;}
}

/* ═══════════════════════════════════════════════════════════════════
   4. ПЕРЬЕВЫЕ РАЗДЕЛИТЕЛИ СЕКЦИЙ
   Две нити сходятся к маленькому гербу: крыло — ромб — крыло.
   Единственный элемент слоя, который живёт и на телефоне.
   ═══════════════════════════════════════════════════════════════════ */
.wg-sep{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.7rem,2vw,1.4rem);
  width:min(1120px, 100% - 2.5rem);
  margin-inline:auto;
  padding-block:.4rem;
  color:var(--chrome-lo);
  pointer-events:none;
}
.wg-sep-line{
  flex:1 1 0;
  max-width:400px;
  height:1px;
  opacity:0;
  transform:scaleX(.25);
  transition:transform 1.1s var(--ease-out), opacity .9s var(--ease-out);
}
.wg-sep .wg-sep-line:first-child{
  background:linear-gradient(90deg, transparent, currentColor);
  transform-origin:right center;
}
.wg-sep .wg-sep-line:last-child{
  background:linear-gradient(90deg, currentColor, transparent);
  transform-origin:left center;
}
.wg-sep-mark{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .8s var(--ease-out) .12s, transform .8s var(--ease-out) .12s;
}
.wg-sep-wing{
  width:clamp(30px,6vw,48px);
  aspect-ratio:128/72;
  opacity:.6;
}
.wg-sep-l{transform:scaleX(-1);}
/* ромб-«слеза» в центре герба */
.wg-sep-dot{
  width:6px; height:6px;
  border:1px solid var(--chrome-mid);
  transform:rotate(45deg);
  opacity:.75;
}
.wg-sep.is-in .wg-sep-line{opacity:.5; transform:scaleX(1);}
.wg-sep.is-in .wg-sep-mark{opacity:1; transform:none;}

/* ═══════════════════════════════════════════════════════════════════
   5. ПАДАЮЩЕЕ ПЕРО У ПОДСКАЗКИ ПРОКРУТКИ
   Одно перо кружится рядом с ниткой .hint-line: сбоку от текста,
   поэтому надпись остаётся чистой. У демона — искра, летит вверх.
   ═══════════════════════════════════════════════════════════════════ */
.wg-hint{
  position:absolute;
  left:calc(50% + 15px);
  bottom:0;
  z-index:0;
  width:9px; aspect-ratio:24/56;
  opacity:0;
  animation:wg-hint-fall 9s cubic-bezier(.42,0,.62,1) infinite;
}
@keyframes wg-hint-fall{
  0%  {transform:translate3d(0,-34px,0) rotate(-18deg); opacity:0;}
  14% {opacity:.55;}
  76% {opacity:.45;}
  100%{transform:translate3d(7px,14px,0) rotate(24deg); opacity:0;}
}
/* демон: искра-язычок поднимается снизу вверх и гаснет */
body.is-demon .wg-hint{animation-name:wg-hint-rise; animation-duration:7.5s;}
@keyframes wg-hint-rise{
  0%  {transform:translate3d(0,16px,0) rotate(6deg) scale(1); opacity:0;}
  18% {opacity:.6;}
  70% {opacity:.35;}
  100%{transform:translate3d(-6px,-36px,0) rotate(-8deg) scale(.55); opacity:0;}
}

/* ═══════════════════════════════════════════════════════════════════
   6. КРЫЛЬЯ ЗА ЦИФРАМИ МАНИФЕСТА
   Фон, а не украшение: opacity .12, лежат ПОД цифрой (у .stat-num
   поднят z-index). Появляются, когда блок входит в вьюпорт.
   ═══════════════════════════════════════════════════════════════════ */
.manifest-stats li{position:relative;}
.manifest-stats .stat-num{position:relative; z-index:1;}
/* та же схема, что у крыльев шапки: общий корень в центре ячейки,
   зеркало — отрицательный scaleX при одной точке отсчёта */
.wg-stat{
  position:absolute;
  top:.12em; left:50%;
  z-index:0;
  height:clamp(1.9rem,3.8vw,2.7rem);
  aspect-ratio:128/72;
  opacity:0;
  transform-origin:left center;
  transition:transform 1.2s var(--ease-out), opacity 1.2s var(--ease-out);
}
.wg-stat-l{transform:scaleX(-.55) translateY(4px);}
.wg-stat-r{transform:scaleX(.55) translateY(4px);}
.manifest-stats li.wg-in .wg-stat{opacity:.15;}
.manifest-stats li.wg-in .wg-stat-l{transform:scaleX(-1) translateY(0);}
.manifest-stats li.wg-in .wg-stat-r{transform:scaleX(1) translateY(0);}
/* задержка по колонкам — цифры «расправляют» крылья по очереди */
.manifest-stats li:nth-child(2) .wg-stat{transition-delay:.12s;}
.manifest-stats li:nth-child(3) .wg-stat{transition-delay:.24s;}

/* ═══════════════════════════════════════════════════════════════════
   АДАПТИВ: на узком экране остаются только разделители и перо hero
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  .wg-brand,
  .wg-nav,
  .wg-card,
  .wg-stat{display:none;}
  .wg-sep{gap:.6rem; width:min(560px, 100% - 2.5rem);}
  .wg-sep-line{max-width:200px;}
}

/* ═══════════════════════════════════════════════════════════════════
   Сниженная анимация: всё статично, ничего не ездит и не кружится
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .wg-brand,
  .wg-nav,
  .wg-card,
  .wg-stat,
  .wg-sep-line,
  .wg-sep-mark{transition:none;}
  .wg-hint{animation:none; opacity:.4; transform:translate3d(0,-12px,0) rotate(-12deg);}
  body.is-demon .wg-hint{animation:none;}
}