.top-bar {
  --top-bar-fg: #fff;
  --blob-stroke-rgb: 255, 255, 255;
  --top-bar-layer-rgb: 34, 34, 34;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  padding-top: 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 1000;
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
}

.top-bar > * {
  position: relative;
  z-index: 1;
}

.top-bar::before {
  content: "";
  position: absolute;
  left: -4vw;
  right: -4vw;
  top: -80px;
  bottom: -60px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--top-bar-layer-rgb), 0.95) 0%,
    rgba(var(--top-bar-layer-rgb), 0.5) 80%,
    rgba(var(--top-bar-layer-rgb), 0) 100%
  );
  transition: opacity 420ms var(--ease);
}

.logo {
  justify-self: start;
  width: 165px;
  position: relative;
  color: var(--top-bar-fg);
}
.st0 {
  fill: currentColor;
}
.st1 {
  fill: var(--accent);
}

.menu {
  justify-self: center;
  display: flex;
  gap: 50px;
}

.menu a {
  color: var(--top-bar-fg);
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 500;
}

.menu a.active {
  cursor: default;
  color: var(--accent);
  pointer-events: none;
}

.okc_logo {
  width: 170px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -28px;
  display: block;
  cursor: pointer;
  transition: opacity 0.7s ease 0.6s;
}
.okc_logo svg {
  transition: transform 0.5s;
}

.okc_logo svg .st0 {
  fill: var(--top-bar-fg);
}

.okc_logo svg .st1 {
  fill: var(--accent);
}

/* Буквы и точки */
.okc_letter,
.okc_dot1,
.okc_dot2,
.okc_dot3 {
  transition:
    transform 0.25s,
    opacity 0.25s;
}
.okc_logo .okc_letter,
.okc_logo .okc_dot1,
.okc_logo .okc_dot2,
.okc_logo .okc_dot3,
.okc_logo .okc_first,
.okc_logo .okc_second,
.okc_logo .okc_third {
  transform-box: fill-box;
}
/* Hover эффекты */
.okc_logo:hover .okc_letter,
.okc_logo.is-hoverfx .okc_letter {
  transform: translateX(5px);
  opacity: 0;
}

.okc_logo .okc_letter_1 {
  transition-delay: 0.21s;
}
.okc_logo .okc_letter_2 {
  transition-delay: 0.14s;
}
.okc_logo .okc_letter_3 {
  transition-delay: 0.07s;
}
.okc_logo .okc_letter_4 {
  transition-delay: 0s;
}

.okc_logo:hover .okc_letter_1,
.okc_logo.is-hoverfx .okc_letter_1 {
  transition-delay: 0s;
}
.okc_logo:hover .okc_letter_2,
.okc_logo.is-hoverfx .okc_letter_2 {
  transition-delay: 0.07s;
}
.okc_logo:hover .okc_letter_3,
.okc_logo.is-hoverfx .okc_letter_3 {
  transition-delay: 0.14s;
}
.okc_logo:hover .okc_letter_4,
.okc_logo.is-hoverfx .okc_letter_4 {
  transition-delay: 0.21s;
}

/* Анимации */
@keyframes thirdAnim {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-2px, -2px) scale(1.07);
  }
}

@keyframes firstAnim {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-3px, -3px) scale(1.1);
  }
}

@keyframes dot1Anim {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-3px, -3px) scale(1.11);
  }
}

@keyframes dot3Anim {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-4px, -4px) scale(1.11);
  }
}

.okc_logo:hover .okc_third,
.okc_logo.is-hoverfx .okc_third {
  animation: thirdAnim 350ms cubic-bezier(0.39, 0.6, 0.3, 0.94) 150ms;
}
.okc_logo:hover .okc_first,
.okc_logo.is-hoverfx .okc_first {
  animation: firstAnim 350ms cubic-bezier(0.39, 0.6, 0.3, 0.94) 0ms;
}
.okc_logo:hover .okc_second,
.okc_logo.is-hoverfx .okc_second {
  animation: firstAnim 350ms cubic-bezier(0.39, 0.6, 0.3, 0.94) 80ms;
}
.okc_logo:hover .okc_dot1,
.okc_logo.is-hoverfx .okc_dot1 {
  animation: dot1Anim 350ms cubic-bezier(0.39, 0.6, 0.3, 0.94) 50ms;
}
.okc_logo:hover .okc_dot2,
.okc_logo.is-hoverfx .okc_dot2 {
  animation: firstAnim 350ms cubic-bezier(0.39, 0.6, 0.3, 0.94) 120ms;
}
.okc_logo:hover .okc_dot3,
.okc_logo.is-hoverfx .okc_dot3 {
  animation: dot3Anim 350ms cubic-bezier(0.39, 0.6, 0.3, 0.94) 170ms;
}

/* animation */

.top-bar .menu a,
.top-bar .okc_logo {
  opacity: 1;
  transform: translateX(0);
  transition:
    transform var(--duration) var(--ease),
    opacity var(--duration) var(--ease);
  will-change: transform, opacity;
}

body.is-home .top-bar .okc_logo {
  cursor: default;
}

/* blob всегда на месте */
.top-bar .blub-button {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto;
  color: var(--top-bar-fg);
}

body.light-scheme .top-bar {
  --top-bar-fg: #2d2d2d;
  --blob-stroke-rgb: 45, 45, 45;
  --top-bar-layer-rgb: 240, 240, 240;
}

.top-bar.is-on-light {
  --top-bar-fg: #2d2d2d;
  --blob-stroke-rgb: 45, 45, 45;
  --top-bar-layer-rgb: 240, 240, 240;
}

.top-bar.is-over-case-hero:not(.is-on-light) {
  --top-bar-fg: #fff;
  --blob-stroke-rgb: 255, 255, 255;
  --top-bar-layer-rgb: 34, 34, 34;
}

/* Slideup — скрытие меню */
body.loaded .top-bar.hidden .menu,
body.loaded .top-bar.hidden .logo {
  pointer-events: none;
}

body.loaded .top-bar.hidden .okc_logo {
  opacity: 0;
  transition-duration: 500ms;
  transform: translateY(-200px);
}

/* Slidedown — показ меню */
body.loaded:not(.loading) .top-bar:not(.hidden) .okc_logo {
  opacity: 1;
  transform: translateY(0);
}
body.loaded .top-bar.scrolled .okc_logo {
  transition-delay: 0s !important;
  transition-duration: 500ms;
}

@media (min-width: 991px) {
  body.loaded .top-bar.hidden .menu a {
    opacity: 0;
    transition-duration: 500ms;
    transform: translateY(-200px);
  }

  body.loaded:not(.loading) .top-bar:not(.hidden) .menu a {
    opacity: 1;
    transform: translateY(0);
  }

  body.loaded .top-bar.scrolled .menu a {
    transition-delay: 0s !important;
    transition-duration: 500ms;
  }
}

body.loaded .top-bar.scrolled:not(.hidden):not(.is-over-case-hero)::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .top-bar .menu a,
  .top-bar .okc_logo {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 2000px) {
  .top-bar {
    margin: 0 4vw;
  }
}

@media (min-width: 2001px) {
  .top-bar::before {
    left: calc((2000px - 100vw) / 2);
    right: calc((2000px - 100vw) / 2);
  }
}