/* Знак OkRouter — шапка и подвал лендинга, страница партнёра «Где вам удобнее?» (/p/<адрес>).

   Вынесен из styles.css 19.10: страница партнёра показывает тот же живой знак, что и шапка
   лендинга, и стили у них должны быть одни. Подключать после styles.css — порядок правил тот же,
   что был внутри него.

   Точки вращения волн (--ox/--oy) сборка ставит в разметку лендинга (scripts/postavit-animaciyu-
   logotipa.mjs). Странице партнёра встроенные стили запрещены (CSP), поэтому те же числа — здесь;
   сверяет их тест `logo.css: точки вращения волн те же, что в лендинге`. */
.logo__znak--stroka{--ox:379.0px; --oy:111.7px}
.logo__znak--dve{--ox:313.3px; --oy:117.0px}

/* ------------------------------------------------------- ЗНАК OKROUTER ---
   Логотип — один файл на все фоны: внутри он покрашен в currentColor,
   поэтому на светлой шапке он фиолетовый, а на тёмном подвале белый,
   и второй копии под тёмную тему не нужно.

   Высота задаётся здесь и обязательно вместе с `display:block`: у встроенного
   SVG без собственных width/height инлайновый бокс схлопывается в ноль, и
   знак пропадает со страницы, хотя разметка на месте.

   Волны Wi-Fi поднимаются выше заглавных букв, поэтому высота считается по
   всему рисунку: при 26px сами буквы выходят заметно мельче 26px. */
.logo__znak{display:block; color:var(--indigo-600,#4A38DC);
  transition:transform .4s var(--ease-out)}
/*
 * Размер задаём не по высоте рисунка, а по росту букв.
 *
 * Волны Wi-Fi поднимаются над заглавными, и буквы занимают только нижние
 * 47% картинки: при height:26px они выходят 12px — мельче пунктов меню,
 * и знак в шапке выглядит подписью, а не логотипом. При 36px буквы дают
 * около 17px против 14,5px у меню — знак становится опорой строки.
 *
 * И выравниваем тоже по буквам, а не по прямоугольнику.
 *
 * Если центрировать картинку целиком, вместе с ней центрируются и волны —
 * а буквы уезжают вниз на 9,5px и стоят ниже строки меню. Глазу видно
 * сразу, хотя по разметке всё «по центру». Центр букв лежит на 0,2635
 * высоты ниже центра картинки — ровно на столько знак и поднимаем.
 * Доля, а не пиксели: размер знака меняется на телефоне, поправка
 * пересчитывается сама.
 */
.logo__znak{--знак:36px}
.logo__znak svg{display:block; height:var(--знак); width:auto;
  transform:translateY(calc(var(--знак) * -0.2635))}
.logo:hover .logo__znak{transform:translateY(-1px)}

/* В подвале знак в две строки и на тёмном фоне. */
/* В подвале знак стоит сам по себе, спорить с соседней строкой ему не с чем,
   поэтому оптическая поправка там не нужна.

   Цвет НЕ прибиваем к белому. Подвал светлый — фон `rgba(255,255,255,.6)`, —
   и белый знак на нём пропадал совсем: на боевом сайте в подвале логотипа
   просто не было видно. Берём тот же фирменный цвет, что и в шапке, а
   тёмная тема осветлит его своим правилом для `.logo__znak`. */
.logo--podval .logo__znak svg{height:52px; transform:none}

@media (max-width:759px){
  /* На телефоне меню прячется под кнопку, и знаку не с чем спорить —
     хватает меньшего размера, зато остаётся место кнопке заказа. */
  .logo__znak{--знак:30px}
  .logo--podval .logo__znak svg{height:46px}
}

/* ---------------------------------------------- ЗНАК ЖИВЁТ: ВОЛНА ------
   Дуги стоят там, где их нарисовали, а по ним бежит свечение: загораются
   одна за другой снизу вверх и так же гаснут, короткая пауза — и заново.
   Возить сами дуги нельзя: знак поплывёт и перестанет быть знаком.

   Дуг три. В знаке их две, третья — копия внешней, отодвинутая на шаг
   волны; сдвиг проставлен числом прямо в элементе при сборке. В покое
   она спрятана, поэтому без анимации знак выглядит ровно как нарисован.

   Точка отсчёта — источник сигнала (--ox/--oy) из макета: иначе дуга
   уезжает вбок вместо того, чтобы расходиться от корпуса. */
.logo__znak--zhivoy .lg-volna{transform-box:view-box; transform-origin:var(--ox) var(--oy)}
/* Третья дуга стоит там же, где внешняя, и сдвига ей не задаём.
   Отодвинутая, она уходит за край знака и срезается его полем —
   на сайте вместо третьей волны получалась пустота. Здесь она даёт
   третий такт ритма на месте внешней дуги, как на странице показа. */
.logo__znak--zhivoy .lg-volna-3{opacity:0; transform:none !important}

@keyframes znakVolna{
  0%,10%{opacity:0}
  22%,58%{opacity:1}
  76%,100%{opacity:0}
}

/* backwards обязателен: во время задержки дуга иначе стоит в обычном
   виде, то есть видна, и волна «висит» ещё до своего начала. */
.logo__znak--zhivoy .lg-volna-2{animation:znakVolna 2.4s cubic-bezier(.4,0,.3,1) 0s infinite backwards}
.logo__znak--zhivoy .lg-volna-1{animation:znakVolna 2.4s cubic-bezier(.4,0,.3,1) .22s infinite backwards}
.logo__znak--zhivoy .lg-volna-3{animation:znakVolna 2.4s cubic-bezier(.4,0,.3,1) .44s infinite backwards}

/* Знак в подвале мельче и стоит в углу — там волна идёт спокойнее,
   чтобы не тянуть на себя взгляд с текста рядом. */
.logo__znak--dve .lg-volna-2{animation-duration:3.2s}
.logo__znak--dve .lg-volna-1{animation-duration:3.2s; animation-delay:.3s}
.logo__znak--dve .lg-volna-3{animation-duration:3.2s; animation-delay:.6s}

@media (prefers-reduced-motion:reduce){
  .logo__znak--zhivoy .lg-volna{animation:none !important; opacity:1 !important}
  .logo__znak--zhivoy .lg-volna-3{opacity:0 !important}
}

/* ------------------------------------------------ ЗНАК ПОЯВЛЯЕТСЯ -------
   В шапке буквы падают на свои места — один раз, когда человек зашёл.
   В подвале строки въезжают заново каждый раз, когда до него долистали:
   класс вешает наблюдатель в app.js, он же снимает его при уходе из вида,
   чтобы при следующем возвращении всё проигралось снова.

   Появление одноразовое (fill both), а волна после него продолжает идти
   сама по себе — это разные наборы кадров на разных частях знака. */

/* ---- Шапка: буквы падают ---- */
@keyframes znakBukvaPadaet{
  0%{opacity:0; transform:translateY(-140%) rotate(-6deg)}
  45%{opacity:1; transform:translateY(0) rotate(0deg)}
  62%{transform:translateY(-16%) rotate(1.5deg)}
  78%{transform:translateY(0) rotate(0deg)}
  89%{transform:translateY(-5%)}
  100%{opacity:1; transform:translateY(0)}
}
.logo__znak--stroka svg{overflow:visible}
.logo__znak--stroka .lg-bukva,
.logo__znak--stroka .lg-korpus{transform-box:fill-box; transform-origin:center;
  animation:znakBukvaPadaet .78s cubic-bezier(.45,0,.55,1) both}
.logo__znak--stroka .lg-bukva-1{animation-delay:0s}
.logo__znak--stroka .lg-bukva-2{animation-delay:.09s}
.logo__znak--stroka .lg-bukva-3{animation-delay:.18s}
.logo__znak--stroka .lg-korpus{animation-delay:.27s}
.logo__znak--stroka .lg-bukva-4{animation-delay:.36s}
.logo__znak--stroka .lg-bukva-5{animation-delay:.45s}
.logo__znak--stroka .lg-bukva-6{animation-delay:.54s}
.logo__znak--stroka .lg-bukva-7{animation-delay:.63s}
/* Волна вступает, когда буквы уже легли. */
.logo__znak--stroka .lg-volna-2{animation-delay:.9s}
.logo__znak--stroka .lg-volna-1{animation-delay:1.12s}
.logo__znak--stroka .lg-volna-3{animation-delay:1.34s}

/* ---- Подвал: строки въезжают, каждый раз заново ---- */
@keyframes znakSleva{0%{opacity:0; transform:translateX(-7%)}100%{opacity:1; transform:none}}
@keyframes znakSprava{0%{opacity:0; transform:translateX(7%)}100%{opacity:1; transform:none}}
/* До появления в поле зрения знак ждёт спрятанным, иначе он успевает
   показаться целиком и «въезжать» уже нечему. */
.logo__znak--dve .lg-bukva,
.logo__znak--dve .lg-korpus{transform-box:fill-box; transform-origin:center; opacity:0}
.logo__znak--dve.is-vidno .lg-bukva{animation:znakSleva .56s cubic-bezier(.2,.85,.3,1) both}
.logo__znak--dve.is-vidno .lg-korpus{animation:znakSprava .56s cubic-bezier(.2,.85,.3,1) .12s both}
/* Волна подхватывает корпус на подлёте, чтобы не провисало движение. */
.logo__znak--dve .lg-volna{opacity:0}
.logo__znak--dve.is-vidno .lg-volna-2{animation-delay:.3s}
.logo__znak--dve.is-vidno .lg-volna-1{animation-delay:.46s}
.logo__znak--dve.is-vidno .lg-volna-3{animation-delay:.62s}
.logo__znak--dve:not(.is-vidno) .lg-volna{animation:none}

@media (prefers-reduced-motion:reduce){
  .logo__znak--stroka .lg-bukva,
  .logo__znak--stroka .lg-korpus,
  .logo__znak--dve .lg-bukva,
  .logo__znak--dve .lg-korpus{animation:none !important; opacity:1 !important; transform:none !important}
  .logo__znak--dve .lg-volna-1,
  .logo__znak--dve .lg-volna-2{opacity:1 !important}
}