/* Логотип «АК». Цвет наследуется через currentColor — контекст решает,
   белый знак или чёрный. */

.ak {
  display: block;
  /* Высоту задаёт --ak-h, ширина считается от неё: знак без словознака
     имеет отношение 74,9311 : 41. Словознак выходит за эту рамку и
     виден только при наведении, поэтому overflow не режется. */
  height: var(--ak-h, 41px);
  width: calc(var(--ak-h, 41px) * (194 / 41));
  color: inherit;
  overflow: visible;
}

.ak path {
  fill: currentColor;
  /* В исходнике контуры нарисованы по правилу evenodd. Без него
     внутренние полуовалы (нижний в «В») заливаются: их обмотка
     совпадает по направлению с внешним контуром. */
  fill-rule: evenodd;
}

/* Каждая лапка вращается вокруг центра собственного контура.
   transform-box: fill-box снимает необходимость считать transform-origin. */
.ak__paw {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Словознак спрятан, но существует в разметке всегда: ширина макета
   не меняется, и появление не двигает соседние элементы. */
.ak__word {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .42s cubic-bezier(.62, .01, .21, 1),
              transform .52s cubic-bezier(.62, .01, .21, 1);
}

.ak:hover .ak__word,
.ak:focus-visible .ak__word,
.ak-holder:hover .ak__word,
.ak-holder:focus-visible .ak__word {
  opacity: 1;
  transform: none;
}

/* Обороты идут по очереди, а не одновременно: вторая лапка стартует
   через 1100 мс, когда первая уже встала. Дальше — пауза, её держит JS. */
@keyframes ak-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ak.is-turning .ak__paw--a {
  animation: ak-turn 1000ms cubic-bezier(.62, .01, .21, 1) both;
}

.ak.is-turning .ak__paw--k {
  animation: ak-turn 1000ms cubic-bezier(.62, .01, .21, 1) 1100ms both;
}

@media (prefers-reduced-motion: reduce) {
  .ak .ak__paw { animation: none !important; transform: none !important; }
  .ak__word { transition: none; }
}