/* Логотип европейской версии.

   Прежний логотип набран кириллицей и зашит прямо в собранные стили сайта,
   поэтому подменить файл нельзя — правило переопределяется здесь.

   Два состояния: обычное (чёрные буквы, красная «T») и при наведении
   (цвета меняются местами). Оба в векторе, поэтому логотип остаётся чётким
   на любом экране, включая телефоны с плотным экраном.

   При наведении добавляется тень. Она рисуется по самим буквам, а не по
   прямоугольнику картинки: filter работает с прозрачностью, в отличие от
   box-shadow, который обвёл бы невидимую рамку. */

.page-header-logo {
  background-image: url("../img/logo-latin.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  height: 190px;
  transition: filter 0.25s ease, transform 0.25s ease;
  will-change: filter;
}

.page-header-logo:hover {
  background-image: url("../img/logo-latin-hover.svg");
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.38));
  transform: translateY(-2px);
}

/* Если браузер не умеет filter, наведение всё равно меняет цвета —
   остаётся видимая реакция, просто без тени. */
@supports not (filter: drop-shadow(0 0 0 #000)) {
  .page-header-logo:hover {
    transform: none;
  }
}

/* Тем, кто просил систему не анимировать интерфейс, движение не показываем:
   цвета меняются и тень появляется, но без смещения и плавности. */
@media (prefers-reduced-motion: reduce) {
  .page-header-logo {
    transition: none;
  }
  .page-header-logo:hover {
    transform: none;
  }
}