/* ============================================================
   СТЕКЛЯННЫЕ ЛОГОТИПЫ: внешнее свечение.

   Знаки собраны из сплошного вектора (логотипы/*.svg) в
   img/brand/mark-glass.svg и img/brand/wordmark-glass2.svg. Внутри у них
   только геометрия, общий градиент и блик по краю через non-scaling-stroke.
   Внешнее свечение специально НЕ зашито в файл, а живёт здесь.

   Почему так. Всё, что задано внутри SVG в единицах viewBox, масштабируется
   вместе со знаком: на большом размере хорошо, на мелком уходит в доли
   пикселя и исчезает. Старая словомарка ровно на этом и сыпалась — её фаска
   ±1.5 при viewBox 829 на 150px давала 0.2px, то есть ничего. Здесь свечение
   задано в ПИКСЕЛЯХ и потому не зависит от размера знака, а размерные классы
   ниже позволяют подобрать его под каждый случай.

   ── ОТКУДА ВЗЯТЫ ЧИСЛА ──
   Свечение подогнано под старый растр frame_11.png, а не на глаз. Замер его
   профиля: знак занимает 940px из 1680px кадра, а свечение спадает от края
   знака так — 10px наружу 20% пика, 25px 18%, 50px 15%, 80px 11%, 120px 6%,
   170px 1%. В долях габарита знака: до 15% пика 5.0%, до 8% пика 11.1%,
   до 3% пика 15.7%. То есть заметное свечение тянется примерно до 16%
   ширины знака — при знаке 105px это ~16px. Отсюда радиусы ниже: три слоя
   на каждый размер (тугой, средний, широкий), чтобы повторить и плотность
   у самой кромки, и длинный мягкий хвост.

   ── ЦВЕТ ──
   Белый, а не брендовый голубой. Старый ассет лежит в режиме LA, то есть
   градации серого вообще без цветовой информации, — его свечение нейтральное.
   Голубой #A9DAF7 остаётся языком hover-эффектов кнопок (css/eb-buttons.css):
   там он сигнал о наведении, а здесь речь про собственный вид знака.
   ============================================================ */

/* ── ПРАВИЛО РАДИУСОВ ──
   Из того же замера: заметное свечение тянется до 16% ширины знака, середина
   около 7%, плотное ядро около 2.5%. Отсюда радиусы = 2.5 / 7 / 16 процентов
   от ширины знака:
     знак   32px  ->   1 /  2 /  5
     знак  105px  ->   3 /  7 / 17
     знак  150px  ->   4 / 10 / 24
     знак  335px  ->   8 / 23 / 54
     знак  862px  ->  22 / 60 /138
   Первая версия была вдвое слабее (максимум 60px при знаке 862px) — свечения
   не было видно. Ниже значения по правилу.

   ВАЖНО при подключении: класс надо брать ПОД РАЗМЕР места. Я на этом уже
   спотыкался — повесил базовый класс на бегущую строку, где знак 375px,
   и свечение вышло вдвое слабее нужного, из-за чего логотип там читался
   как старая плоская версия. Соответствие: до 60px --sm, 90-200px базовый,
   220-320px --md, 320-500px --lg, больше — своим правилом на месте. */

/* Базовый вариант — знак примерно 90-200px */
.eb-glass{
  filter:drop-shadow(0 0 5px  rgba(255,255,255,.55))
         drop-shadow(0 0 14px rgba(255,255,255,.4))
         drop-shadow(0 0 32px rgba(255,255,255,.22));
}

/* Мелкий знак, 30-60px. Радиусы пропорционально меньше: широкое свечение
   на мелком знаке расплывается шире самого знака и превращает его
   в светящееся пятно без формы. */
.eb-glass--sm{
  filter:drop-shadow(0 0 3px  rgba(255,255,255,.5))
         drop-shadow(0 0 8px  rgba(255,255,255,.35))
         drop-shadow(0 0 16px rgba(255,255,255,.2));
}

/* Средний знак, 220-320px. */
.eb-glass--md{
  filter:drop-shadow(0 0 7px  rgba(255,255,255,.52))
         drop-shadow(0 0 19px rgba(255,255,255,.39))
         drop-shadow(0 0 44px rgba(255,255,255,.22));
}

/* Крупный знак, 320-500px. */
.eb-glass--lg{
  filter:drop-shadow(0 0 10px rgba(255,255,255,.5))
         drop-shadow(0 0 28px rgba(255,255,255,.38))
         drop-shadow(0 0 64px rgba(255,255,255,.22));
}

/* Свечение статичное, движения в нём нет, поэтому под prefers-reduced-motion
   отключать нечего. */

/* ============================================================
   ПОДСТАНОВКА НОВЫХ ЗНАКОВ В ТИЛЬДА-ЭКСПОРТ.

   Тильдовские элементы — это прозрачные боксы с картинкой в background,
   поэтому подменяем background-image, а свечение даёт filter: drop-shadow,
   который идёт по альфе фона.

   Про размеры. В старых растрах вокруг знака были поля под запечённое
   свечение, и знак занимал лишь часть кадра. Новые SVG без полей, поэтому
   «как есть» они выросли бы и поехала бы вёрстка. Размеры и положение ниже
   пересчитаны так, чтобы знак вставал ровно там же и того же размера, что
   и раньше. Замеры старых ассетов:
     сова          кадр 1680x1831, знак 940x938  = 56.0% ширины,
                   по X центрирован, по Y смещён вверх (y0=270 при центре 446)
     словомарка    кадр 1680x649,  знак 1506x404 = 89.6% ширины,
                   по X центрирован, по Y смещён вверх (y0=98 при центре 122)
   ============================================================ */

/* ── СОВА, три экземпляра (88x106 в единицах артборда) ──
   background-size:62% даёт те же ~54px ширины знака, что были при cover.
   background-position по Y = 30%, потому что в старом ассете знак стоял
   выше геометрического центра кадра. Третий экземпляр (rec2034248251)
   сейчас скрыт целиком, правило на него тоже — чтобы при возврате блока
   он не выбивался. */
#rec2105107851 .tn-elem[data-elem-id="1775041926888000001"] .tn-atom,
#rec2034090581 .tn-elem[data-elem-id="1773576720503000002"] .tn-atom,
#rec2034248251 .tn-elem[data-elem-id="1773581588769000001"] .tn-atom{
  background-image:url('../img/brand/mark-glass.svg') !important;
  background-size:62% !important;
  background-position:50% 30% !important;
  background-repeat:no-repeat !important;
  filter:drop-shadow(0 0 4px  rgba(255,255,255,.55))
         drop-shadow(0 0 11px rgba(255,255,255,.4))
         drop-shadow(0 0 24px rgba(255,255,255,.22)) !important;
}

/* ── СЛОВОМАРКА В ПЕРВОМ ЭКРАНЕ (862x333 в единицах артборда) ──
   Здесь ДВА слоя, и это сделано намеренно:

     ...014  статичное стекло, лежит СВЕРХУ (позже в DOM) — никогда не гаснет;
     ...013  слой света ПОЗАДИ него, медленно пульсирует и подсвечивает знак.

   Сначала я перепутал их местами: подменил стекло на ...013 и скрыл ...014.
   На ...013 висела тильдовская анимация intoview + loop, гасившая прозрачность
   с 1 до 0 за 1500мс, — поэтому логотип начал мигать с полным пропаданием.
   Атрибуты data-animate-sbs-* с него сняты в разметке, пульс теперь на CSS:
   он мягче (не в ноль, а между 25% и 100%), медленнее (5.5с против 1.5с)
   и с ease-in-out вместо линейного.
   ───────────────────────────────────────────────────────────── */

/* Статичное стекло — верхний слой */
#rec2032245491 .tn-elem[data-elem-id="1773504995368000014"] .tn-atom{
  background-image:url('../img/brand/wordmark-glass2.svg') !important;
  background-size:89.6% auto !important;
  background-position:50% 38% !important;
  background-repeat:no-repeat !important;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.45))
         drop-shadow(0 0 34px rgba(255,255,255,.3))
         drop-shadow(0 0 78px rgba(255,255,255,.16)) !important;
}

/* Пульсирующий свет — нижний слой.

   Тут была моя вторая ошибка: сначала я поставил сюда то же прозрачное
   стекло, что и наверх, — и пульсации не стало видно вообще. Два одинаковых
   полупрозрачных слоя друг за другом почти не отличаются от одного.
   Замер старого ассета показывал, как надо: статичное стекло сверху очень
   прозрачное (средняя яркость 13 из 255), а слой позади ЯРКИЙ (59).

   Поэтому здесь отдельный ассет wordmark-light.svg — ровная белая заливка
   0.6 без градиента и без обводки. Это источник света в форме знака, а не
   второй логотип: форму держит стекло сверху, а этот слой наливает в неё
   яркость. Свечение тоже плотнее, чем у статичного слоя, зато радиусы
   поменьше — так на пиксель приходится больше света и пульс читается. */
#rec2032245491 .tn-elem[data-elem-id="1773504951628000013"] .tn-atom{
  background-image:url('../img/brand/wordmark-light.svg') !important;
  background-size:89.6% auto !important;
  background-position:50% 38% !important;
  background-repeat:no-repeat !important;
  filter:drop-shadow(0 0 18px  rgba(255,255,255,.85))
         drop-shadow(0 0 48px  rgba(255,255,255,.6))
         drop-shadow(0 0 110px rgba(255,255,255,.35)) !important;
}
#rec2032245491 .tn-elem[data-elem-id="1773504951628000013"]{
  animation:ebGlowPulse 5.5s ease-in-out infinite;
  will-change:opacity;
}
@keyframes ebGlowPulse{
  0%,100% { opacity:.25 }
  50%     { opacity:1 }
}

/* Пульс — это движение, поэтому под prefers-reduced-motion его гасим
   и оставляем слой света ровным, на средней яркости. */
@media (prefers-reduced-motion: reduce){
  #rec2032245491 .tn-elem[data-elem-id="1773504951628000013"]{
    animation:none;
    opacity:.7;
  }
}

/* ── Страховка от сплющивания в оверлее «Ближайшее» ──
   Там CSS задавал только width, поэтому применялся атрибут height и знак
   сжимался по вертикали вдвое. Атрибут в разметке исправлен, но height:auto
   гарантирует пропорцию, даже если файл заменят на другой. */
#ebNext .ebn-mark{
  height:auto;
}