/* ==========================================================================
   Шапка — фиксированная, прозрачная над героем, уплотняется при скролле
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  padding-block: 1.5rem;
  transition: background-color var(--dur-base) var(--ease-out),
              padding-block var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.header.is-stuck {
  padding-block: 0.75rem;
  background: rgba(1, 49, 59, 0.88);
  backdrop-filter: blur(0.875rem);
  -webkit-backdrop-filter: blur(0.875rem);
  box-shadow: 0 1px 0 rgba(119, 226, 196, 0.16);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.header__logo { flex: none; width: 15.3125rem; height: 1.5rem; }
.header__logo img { width: 100%; height: 100%; }

.header__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}

.header__link {
  position: relative;
  color: var(--c-lime);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.125rem;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.header__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.3125rem;
  width: 100%;
  height: 1px;
  background: var(--c-mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.header__link:hover { color: var(--c-mint); }
.header__link:hover::after,
.header__link.is-active::after { transform: scaleX(1); }

.header__cta { flex: none; }

/* --- Бургер --- */

.header__burger {
  display: none;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0.75rem 0.625rem;
}

.header__burger span {
  display: block;
  height: 2px;
  background: var(--c-lime);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) linear;
}

.header__burger span + span { margin-top: 0.375rem; }

.header__burger.is-open span:nth-child(1) { transform: translateY(0.5rem) rotate(45deg); }
.header__burger.is-open span:nth-child(2) { opacity: 0; }
.header__burger.is-open span:nth-child(3) { transform: translateY(-0.5rem) rotate(-45deg); }

@media (max-width: 1180px) {
  .header__burger { display: block; }

  .header__nav {
    position: fixed;
    inset: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    /* Зазор отдан в поля самих пунктов: высота панели та же, а цель
       нажатия вырастает с 26px до 42px. */
    gap: 0.5rem;
    margin: 0;
    padding: 6rem var(--gutter) 2.5rem;
    background: var(--c-spruce);
    transform: translateY(-100%);
    transition: transform var(--dur-base) var(--ease-inout);
  }

  .header__nav.is-open { transform: translateY(0); }
  .header__link { font-size: 1.25rem; padding-block: 0.5rem; }

  /* Панель меню позиционирована, а логотип с бургером — нет, поэтому
     раскрытое меню накрывало их целиком: нажать на бургер и закрыть меню
     было нечем. Поднимаем их над панелью. */
  .header__logo,
  .header__burger {
    position: relative;
    z-index: 1;
  }

  .header__logo { padding-block: 0.75rem; box-sizing: content-box; }
  .header__cta { display: none; }
}

@media (max-width: 560px) {
  .header__logo { width: 11.25rem; height: 1.125rem; }
}