/* ============================================================
   Тематический слой: перья/угли, крылья-орнаменты, заметный
   переключатель мира. Дополняет base/sections/duality, чужие
   классы не трогает.
   ============================================================ */

/* ── Слой частиц: DOM + CSS-анимации (композитор GPU).
   Полноэкранный canvas здесь ронял страницу с 53 до 12 fps —
   каждый его кадр заставлял перерисовывать всю страницу. ── */
#ambient-layer{
  position:fixed; inset:0;
  /* Слой лежит ПОД контентом. На z-index:35 перо падало прямо на буквы
     каталога — приёмка поймала это на зуме. Ниже — только фоны секций,
     поэтому перья по-прежнему видно везде, а текст, карточки и оверлеи
     проходят поверх. */
  z-index:2;
  pointer-events:none;
  overflow:hidden;
  contain:strict;            /* слой не влияет на layout остальной страницы */
}
/* Контент — над слоем. Просто «опустить перья» мало: у секций нет
   позиционирования, а непозиционированный текст рисуется РАНЬШЕ любого
   позиционированного слоя, каким бы низким ни был его z-index. Поэтому
   текстовые блоки получают свой уровень 3. Список точечный: декорации
   секций (луна, звёзды, крылья манифеста) остаются внизу — перо перед
   ними выглядит как надо. */
.sec-head,
.catalog-tabs, .catalog-grid, .catalog-more,
.custom-copy, .shop-neon, .shop-route,
.order-steps, .order-trust,
.site-footer{
  position:relative;
  z-index:3;
}
/* Эти уже позиционированы — им хватает уровня, position не трогаем */
.custom-stage, .order-cta{z-index:3;}
#ambient-layer .amb{
  position:absolute;
  top:0; left:var(--x);
  background:center/contain no-repeat;
  opacity:0;
  will-change:transform, opacity;
  animation:
    amb-fall var(--dur) linear var(--delay) infinite,
    amb-sway calc(var(--dur) / 3.5) ease-in-out var(--delay) infinite alternate;
}
/* падение пера: сверху вниз, со сносом в сторону и вращением */
@keyframes amb-fall{
  0%   {transform:translate3d(0,-14vh,0) rotate(0deg); opacity:0;}
  8%   {opacity:var(--op);}
  88%  {opacity:var(--op);}
  100% {transform:translate3d(var(--drift),108vh,0) rotate(var(--spin)); opacity:0;}
}
/* покачивание — отдельной анимацией на translate, чтобы не спорить с падением */
@keyframes amb-sway{
  from{margin-left:calc(var(--sway) * -1);}
  to  {margin-left:var(--sway);}
}
/* угли демона: снизу вверх, мерцают */
#ambient-layer.is-demon-layer .amb{
  animation:
    amb-rise var(--dur) linear var(--delay) infinite,
    amb-flicker 1.4s steps(3,end) var(--delay) infinite alternate,
    amb-sway calc(var(--dur) / 4) ease-in-out var(--delay) infinite alternate;
}
@keyframes amb-rise{
  0%   {transform:translate3d(0,104vh,0) scale(1); opacity:0;}
  10%  {opacity:var(--op);}
  80%  {opacity:calc(var(--op) * .7);}
  100% {transform:translate3d(var(--drift),-10vh,0) scale(.45); opacity:0;}
}
@keyframes amb-flicker{
  from{filter:none; opacity:var(--op);}
  to  {opacity:calc(var(--op) * .45);}
}

/* ── Переключение комплектов крыльев: у <use> два варианта ── */
.w-demon{display:none;}
body.is-demon .w-angel{display:none;}
body.is-demon .w-demon{display:inline;}

/* ── Большие крылья по краям манифеста ──
   Кончики смотрят наружу, текст остаётся в чистом центре.
   Слой лежит ПОД текстом: у absolute-детей z-index 0, у контента — 1. */
.s-manifest{position:relative;}
.manifest-wings{
  position:absolute; inset:0;
  z-index:0;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
  overflow:hidden;                 /* кончики уходят за край, а не рвут вёрстку */
}
/* z-index:3 — тот же уровень, что у остального текста: над крыльями (0)
   и над слоем перьев (2) */
.s-manifest .manifest-line,
.s-manifest .manifest-stats{position:relative; z-index:3;}
.manifest-wings .mw{
  width:min(42vw,540px); height:auto; aspect-ratio:128/72;
  color:var(--chrome-mid);
  opacity:.16;
  flex:none;
}
/* левое — зеркальное; оба сдвинуты за край, внутрь торчит только веер перьев */
.manifest-wings .mw-left{transform:scaleX(-1) rotate(-8deg) translate(14%,-4%); transform-origin:center;}
.manifest-wings .mw-right{transform:rotate(-8deg) translate(14%,-4%);}
/* крылья медленно «дышат» — только transform, дёшево */
@keyframes wing-breathe-l{
  from{transform:scaleX(-1) rotate(-8deg) translate(14%,-4%)}
  to  {transform:scaleX(-1) rotate(-3deg) translate(11%,-7%)}
}
@keyframes wing-breathe-r{
  from{transform:rotate(-8deg) translate(14%,-4%)}
  to  {transform:rotate(-3deg) translate(11%,-7%)}
}
.manifest-wings .mw-left{animation:wing-breathe-l 7s ease-in-out infinite alternate;}
.manifest-wings .mw-right{animation:wing-breathe-r 7s ease-in-out infinite alternate;}
body.is-demon .manifest-wings .mw{color:var(--blood); opacity:.2;}
@media (max-width:700px){
  .manifest-wings .mw{width:64vw; opacity:.12;}
}

/* ── Пёрышки-орнаменты по бокам надзаголовков секций ── */
.sec-head .sec-over{position:relative; display:inline-block;}
.sec-head .sec-over::before,
.sec-head .sec-over::after{
  content:'';
  position:absolute; top:50%;
  width:2.6em; height:1.46em;
  transform:translateY(-50%);
  background-color:currentColor;
  opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%2072%22%3E%3Cg%20fill%3D%22black%22%20%20%20%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M10%2066%20Q71.8%2043.8%20124%204%20Q62.2%2026.2%2010%2066Z%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M15.2%2062.8%20Q69.1%2044.3%20113.6%208.8%20Q59.7%2027.3%2015.2%2062.8Z%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M20.4%2059.6%20Q66.4%2044.8%20103.2%2013.600000000000001%20Q57.2%2028.4%2020.4%2059.6Z%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M25.6%2056.4%20Q63.7%2045.3%2092.8%2018.4%20Q54.7%2029.5%2025.6%2056.4Z%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M30.8%2053.2%20Q61.0%2045.8%2082.4%2023.200000000000003%20Q52.2%2030.6%2030.8%2053.2Z%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M36%2050%20Q58.4%2046.3%2072%2028%20Q49.6%2031.7%2036%2050Z%22%2F%3E%3Cpath%20opacity%3D%220.72%22%20d%3D%22M12%2068%20Q59.0%2052.5%2098%2022%20Q51.0%2037.5%2012%2068Z%22%2F%3E%3Cpath%20opacity%3D%220.72%22%20d%3D%22M17.5%2065%20Q56.6%2052.9%2088%2026.5%20Q48.9%2038.6%2017.5%2065Z%22%2F%3E%3Cpath%20opacity%3D%220.72%22%20d%3D%22M23%2062%20Q54.3%2053.3%2078%2031%20Q46.7%2039.7%2023%2062Z%22%2F%3E%3Cpath%20opacity%3D%220.72%22%20d%3D%22M28.5%2059%20Q52.0%2053.6%2068%2035.5%20Q44.5%2040.9%2028.5%2059Z%22%2F%3E%3Cpath%20opacity%3D%220.72%22%20d%3D%22M34%2056%20Q49.9%2053.8%2058%2040%20Q42.1%2042.2%2034%2056Z%22%2F%3E%3Cpath%20opacity%3D%220.5%22%20d%3D%22M14%2070%20Q45.5%2060.1%2070%2038%20Q38.5%2047.9%2014%2070Z%22%2F%3E%3Cpath%20opacity%3D%220.5%22%20d%3D%22M20%2067.33333333333333%20Q44.1%2060.2%2061.333333333333336%2042%20Q37.3%2049.1%2020%2067.33333333333333Z%22%2F%3E%3Cpath%20opacity%3D%220.5%22%20d%3D%22M26%2064.66666666666667%20Q42.8%2060.2%2052.66666666666667%2046%20Q35.9%2050.4%2026%2064.66666666666667Z%22%2F%3E%3Cpath%20opacity%3D%220.5%22%20d%3D%22M32%2062%20Q41.9%2059.9%2044%2050%20Q34.1%2052.1%2032%2062Z%22%2F%3E%3C%2Fg%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%20128%2072%22%3E%3Cg%20fill%3D%22black%22%20%20%20%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M10%2066%20Q71.8%2043.8%20124%204%20Q62.2%2026.2%2010%2066Z%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M15.2%2062.8%20Q69.1%2044.3%20113.6%208.8%20Q59.7%2027.3%2015.2%2062.8Z%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M20.4%2059.6%20Q66.4%2044.8%20103.2%2013.600000000000001%20Q57.2%2028.4%2020.4%2059.6Z%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M25.6%2056.4%20Q63.7%2045.3%2092.8%2018.4%20Q54.7%2029.5%2025.6%2056.4Z%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M30.8%2053.2%20Q61.0%2045.8%2082.4%2023.200000000000003%20Q52.2%2030.6%2030.8%2053.2Z%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M36%2050%20Q58.4%2046.3%2072%2028%20Q49.6%2031.7%2036%2050Z%22%2F%3E%3Cpath%20opacity%3D%220.72%22%20d%3D%22M12%2068%20Q59.0%2052.5%2098%2022%20Q51.0%2037.5%2012%2068Z%22%2F%3E%3Cpath%20opacity%3D%220.72%22%20d%3D%22M17.5%2065%20Q56.6%2052.9%2088%2026.5%20Q48.9%2038.6%2017.5%2065Z%22%2F%3E%3Cpath%20opacity%3D%220.72%22%20d%3D%22M23%2062%20Q54.3%2053.3%2078%2031%20Q46.7%2039.7%2023%2062Z%22%2F%3E%3Cpath%20opacity%3D%220.72%22%20d%3D%22M28.5%2059%20Q52.0%2053.6%2068%2035.5%20Q44.5%2040.9%2028.5%2059Z%22%2F%3E%3Cpath%20opacity%3D%220.72%22%20d%3D%22M34%2056%20Q49.9%2053.8%2058%2040%20Q42.1%2042.2%2034%2056Z%22%2F%3E%3Cpath%20opacity%3D%220.5%22%20d%3D%22M14%2070%20Q45.5%2060.1%2070%2038%20Q38.5%2047.9%2014%2070Z%22%2F%3E%3Cpath%20opacity%3D%220.5%22%20d%3D%22M20%2067.33333333333333%20Q44.1%2060.2%2061.333333333333336%2042%20Q37.3%2049.1%2020%2067.33333333333333Z%22%2F%3E%3Cpath%20opacity%3D%220.5%22%20d%3D%22M26%2064.66666666666667%20Q42.8%2060.2%2052.66666666666667%2046%20Q35.9%2050.4%2026%2064.66666666666667Z%22%2F%3E%3Cpath%20opacity%3D%220.5%22%20d%3D%22M32%2062%20Q41.9%2059.9%2044%2050%20Q34.1%2052.1%2032%2062Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.sec-head .sec-over::before{left:-3em; transform:translateY(-50%) scaleX(-1);}
.sec-head .sec-over::after{right:-3em;}
/* у демона орнамент — перепончатое крыло */
body.is-demon .sec-head .sec-over::before,
body.is-demon .sec-head .sec-over::after{
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%2072%22%3E%3Cg%20fill%3D%22black%22%3E%0A%3Cpath%20d%3D%22M14%2064%20C%2030%2022%2C%2066%206%2C%20118%209%20L%20106%2030%20Q%2099%2022%2092%2032%20L%2080%2044%20Q%2072%2036%2065%2046%20L%2052%2055%20Q%2045%2048%2037%2058%20L%2020%2064%20Z%22%2F%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%3E%0A%20%20%3Cpath%20d%3D%22M14%2064%20L%20118%209%22%2F%3E%3Cpath%20d%3D%22M14%2064%20L%20106%2030%22%2F%3E%3Cpath%20d%3D%22M14%2064%20L%2092%2032%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M14%2064%20L%2065%2046%22%2F%3E%3Cpath%20d%3D%22M14%2064%20L%2037%2058%22%2F%3E%0A%3C%2Fg%3E%3C%2Fg%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%20128%2072%22%3E%3Cg%20fill%3D%22black%22%3E%0A%3Cpath%20d%3D%22M14%2064%20C%2030%2022%2C%2066%206%2C%20118%209%20L%20106%2030%20Q%2099%2022%2092%2032%20L%2080%2044%20Q%2072%2036%2065%2046%20L%2052%2055%20Q%2045%2048%2037%2058%20L%2020%2064%20Z%22%2F%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%3E%0A%20%20%3Cpath%20d%3D%22M14%2064%20L%20118%209%22%2F%3E%3Cpath%20d%3D%22M14%2064%20L%20106%2030%22%2F%3E%3Cpath%20d%3D%22M14%2064%20L%2092%2032%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M14%2064%20L%2065%2046%22%2F%3E%3Cpath%20d%3D%22M14%2064%20L%2037%2058%22%2F%3E%0A%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
@media (max-width:700px){
  .sec-head .sec-over::before,.sec-head .sec-over::after{display:none;} /* на узком экране не влезают */
}

/* ── Крылья у главной кнопки заказа: раскрываются при наведении ── */
.order-cta{position:relative;}
.cta-wing{
  position:absolute; top:0; bottom:auto;
  width:128px; height:72px;
  color:var(--chrome-mid);
  opacity:.4;
  pointer-events:none;
  transition:transform .5s var(--ease-out), opacity .5s var(--ease-out), color .3s;
}
.cta-wing svg{width:100%; height:100%;}
.cta-wing-l{right:calc(50% + 150px); transform:scaleX(-1) rotate(8deg) translateX(-6px);}
.cta-wing-r{left:calc(50% + 150px); transform:rotate(8deg) translateX(-6px);}
.order-cta:hover .cta-wing-l,
.order-cta:focus-within .cta-wing-l{transform:scaleX(-1) rotate(-4deg) translateX(14px); opacity:.85;}
.order-cta:hover .cta-wing-r,
.order-cta:focus-within .cta-wing-r{transform:rotate(-4deg) translateX(14px); opacity:.85;}
body.is-demon .cta-wing{color:var(--blood);}
@media (max-width:900px){ .cta-wing{display:none;} }

/* ── Герб футера: эмблема с крыльями ── */
.footer-crest{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
}
.crest-wing{width:72px; height:41px; color:var(--chrome-lo); opacity:.75;}
.crest-wing svg{width:100%; height:100%;}
.crest-l{transform:scaleX(-1);}
body.is-demon .crest-wing{color:var(--blood); opacity:.6;}

/* ── Кнопка смены мира в hero — главный вход в механику ── */
.duality-hero{
  margin-top:1.4rem;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.85em 1.7em; min-height:48px;
  background:transparent;
  border:1px solid var(--line); border-radius:999px;
  color:var(--muted); cursor:pointer;
  font-family:var(--font-text); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  transition:color .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.duality-hero .dh-cross{
  font-size:1.6em; line-height:1; color:var(--blood);
  transition:transform .6s var(--ease-out), color .3s;
}
.duality-hero:hover{
  color:var(--ink); border-color:var(--blood);
  box-shadow:0 0 24px rgba(255,46,60,.18);
}
body.is-demon .duality-hero .dh-cross{transform:rotate(180deg); color:var(--chrome-mid);}
body.is-demon .duality-hero:hover{border-color:var(--chrome-mid); box-shadow:0 0 24px rgba(201,201,218,.2);}
.duality-hero .dh-demon{display:none;}
body.is-demon .duality-hero .dh-angel{display:none;}
body.is-demon .duality-hero .dh-demon{display:inline;}

/* ── Внимание к кресту в шапке: пульс до первого использования ── */
@keyframes duality-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,46,60,0);}
  50%    {box-shadow:0 0 0 7px rgba(255,46,60,.18); border-color:var(--blood);}
}
.site-nav .duality.is-pulsing{animation:duality-pulse 2.2s ease-in-out 4;}
body.is-demon .site-nav .duality.is-pulsing{animation:none;}

/* подсказка-облачко при первом визите */
.duality-hint{
  position:fixed; z-index:60;
  top:calc(var(--nav-h) + 10px); right:16px;
  max-width:230px;
  padding:.8em 1em;
  background:var(--bg-2);
  border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-size:12.5px; line-height:1.45;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-6px);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
  pointer-events:none;
}
.duality-hint.is-on{opacity:1; transform:none;}
.duality-hint::before{
  content:'';
  position:absolute; top:-5px; right:34px;
  width:8px; height:8px;
  background:var(--bg-2);
  border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg);
}

/* ── Reduced motion: статичные крылья, без пульса; канвас не создаётся JS ── */
@media (prefers-reduced-motion:reduce){
  .manifest-wings .mw-left,.manifest-wings .mw-right{animation:none;}
  .site-nav .duality.is-pulsing{animation:none;}
  .cta-wing{transition:none;}
}