/* Логотип «Евроход» — один на карту и на все страницы сайта (BRAND §4, §9; план
   01.10.2026 «сквозной логотип»). Подключают index.html и страницы (server/pages.py),
   поэтому здесь нет ничего, что знает про панель или шапку страницы: только сам знак —
   марка-судно, слово и общая для них волна. Где он стоит, решает тот, кто его ставит:
   на карте — .brand-bar (panel.css), на страницах — .pg-logo (pages.css).

   Краски — токены --eh-* (у карты они в panel.css/theme.css, у страниц — копия в
   pages.css), поэтому тёмная тема переключается вместе со всем остальным. */

/* Локап: судно и слово стоят на одной воде. Волна — фон контейнера, а не часть марки:
   так знак и слово читаются как один знак, а не иконка рядом с текстом. */
.brand {
  display: flex;
  align-items: flex-end;
  gap: 13px;
  margin: 0;
  color: var(--eh-ink);
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* Ширина по содержимому: волна должна кончаться вместе со словом, иначе она читается
     как разделитель, а не как часть знака. */
  width: fit-content;
  /* Уходящее судно прячется за краем локапа, иначе проехало бы по всей шапке. */
  overflow: hidden;
  /* Волна тайлится (repeat-x), а не растягивается: на любой ширине знака она сохраняет
     период и не превращается в размазанную дугу. */
  padding-bottom: 12px;
  /* Обводка воды = 5 × высота знака ÷ 48 (обводка нуля в поле марки). На 24px это 2.5:
     вода и знак нарисованы одним весом и читаются как одна рисовка, а не картинка с
     линейкой под ней. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8'%3E%3Cpath d='M0 5q7.5-4.6 15 0t15 0' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 8px;
}
/* Волна — картинка с зашитым цветом, на тёмном её не видно: светлая копия. */
html.dark .brand {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8'%3E%3Cpath d='M0 5q7.5-4.6 15 0t15 0' fill='none' stroke='%23f2f3f5' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Слово остаётся текстом: выделяется, читается скринридером, ищется поиском. Красная
   краска живёт в двух О; на страницах слово — ссылка на карту. */
.brand-word { line-height: 1; color: inherit; text-decoration: none; }
.brand-word .o { color: var(--eh-action); }
html.dark .brand-word .o { color: #e04a2e; }
/* overflow: hidden у .brand срезал бы рамку фокуса снаружи — рисуем её внутрь. */
a.brand-word:focus-visible { outline: 2px solid var(--eh-ink); outline-offset: -2px; }

/* Марка — кнопка (WCAG 2.2, 2.1.1): до неё доходит Tab, Enter и пробел отправляют
   судно так же, как клик. Вид — ровно прежней картинки: всё «кнопочное» снято.
   Судно садится корпусом ровно на волну — потому и flex-end у .brand, и сдвиг вниз
   на 2 px; без него строка с логотипом выросла бы на те же 2 px. */
.brand-mark {
  flex: 0 0 auto;
  display: block;
  height: 24px;
  width: auto;
  margin: 0 0 -2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.brand-mark svg { display: block; width: 34px; height: 24px; }
.brand-mark:focus-visible { outline: 2px solid var(--eh-action); outline-offset: -2px; }

/* Уходит за правый край локапа и возвращается из-за левого — «обошёл вокруг». */
.brand-mark.sailing-away { animation: brand-sail 2.8s ease-in-out; }
@keyframes brand-sail {
  0%   { transform: translateX(0) rotate(0deg); opacity: 1; }
  10%  { transform: translateX(8px) rotate(-6deg); }
  25%  { transform: translateX(55px) rotate(4deg); }
  40%  { transform: translateX(110px) rotate(-3deg); }
  49%  { transform: translateX(165px) rotate(2deg); opacity: 1; }
  50%  { transform: translateX(170px) rotate(0deg); opacity: 0; }
  51%  { transform: translateX(-70px) rotate(0deg); opacity: 0; }
  58%  { transform: translateX(-60px) rotate(-5deg); opacity: 1; }
  75%  { transform: translateX(-30px) rotate(4deg); }
  90%  { transform: translateX(-8px) rotate(-2deg); }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
/* Движение выключено в системе — судно стоит. static/js/brand.js в этом случае класс
   и не ставит: без анимации не пришёл бы animationend, и класс залип бы. */
@media (prefers-reduced-motion: reduce) {
  .brand-mark.sailing-away { animation: none; }
}