/* анимируем появление строки поиска, когда меню открывается */
.header__controls .header__search {
  transition: opacity var(--header-animation-time);
}

/* анимируем булочку */
.logo {
  --image-font-size: 0.85em;
  --logo-letter-spacing: -0.14em;
}

.logo__image {
  --is-animation: 0;
}

.logo__image::before {
  --colors:
    var(--accent-color),
    var(--accent-color),
    var(--color-css),
    var(--color-js),
    var(--color-tools),
    var(--color-recipes),
    var(--color-a11y),
    var(--accent-color),
    var(--accent-color);
  --parts: 8;
  content: '';
  opacity: var(--is-animation);
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--parts) * 100%);
  background-image: linear-gradient(var(--colors));
  transition: opacity 0.5s;
}

.logo__image--animation {
  --is-animation: 1;
}

@keyframes logoAnimation {
  to {
    transform:
      translateY(-100%)
      translateY(calc(100% / (var(--parts) - 1)));
  }
}

.logo__image--animation::before {
  animation: logoAnimation 0.75s ease-out infinite both;
}

.logo__symbols {
  transition: opacity 0.2s;

  /* для устранения скачков в Safari */
  transform: translateZ(0);
}

.logo__symbols--main {
  opacity: calc(1 - var(--is-animation));
}

.logo__symbols--search {
  opacity: var(--is-animation);
}

.logo__eye {
  top: -0.08em;
}

.logo__nose {
  top: -0.015em;
}
