/* ============================================================
   01 · Header — SKARR.PRO
   База = фрейм Figma 1600 (102:61300).
   Поля контейнера на 1600: бока 24 и верх 24 — решение Alexa,
   поверх макетных 30/32. Остальные значения — из макета.
   Брейкпоинты: 1200 / 1024 / 768 / 430 / 375 / 320.
   ============================================================ */

.hdr {
  --hdr-story-y: 0%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 12px; /* макет: 32 / 30 / 12 */
  font-family: "Inter", sans-serif;
  pointer-events: none; /* полоса хедера не перехватывает клики */
  /* Individual transform composes with the one-off intro animation in 99-assembly.css. */
  translate: 0 var(--hdr-story-y);
  will-change: translate;
}

/* Полностью ушедший хедер не остаётся в tab-порядке и не ловит клики. */
.hdr[data-story-hidden] {
  visibility: hidden;
}

/* Подмена содержимого: приходят табы кейсов — в глубину уезжает НАЧИНКА
   шапки, а не сама полоса. Полоса со скримом остаётся и работает материалом
   под табами; иначе блок повисает на пустоте и перестаёт быть хромом.
   Ведёт одна величина --hdr-swap (0…1), её пишет `Header story`.
   Глубину нельзя вешать на .hdr: filter на родителе отрезает
   backdrop-filter у ::before, и скрим перестаёт размывать фон. */
.hdr-bar {
  transform-origin: 50% 0;
  scale: calc(1 - 0.08 * var(--hdr-swap, 0));
  filter: blur(calc(var(--hdr-swap, 0) * 7px));
  opacity: calc(1 - var(--hdr-swap, 0));
}

/* Полностью отъехавшая начинка не ловит курсор и не уводит фокус.
   Флаг ставится только на завершённой подмене, а не в её начале —
   иначе меню исчезало бы вместо того, чтобы уезжать. */
:root[data-cases-swapped] .hdr-bar { pointer-events: none; visibility: hidden; }

/* размытие + затемнение под хедером вместо осветляющего скрима */
.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.48) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}

.hdr *,
.hdr *::before,
.hdr *::after {
  box-sizing: border-box;
}

/* Плашка */
.hdr-bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  background: #eaeaea;
  border-radius: 64px;
}

/* Левая половина: лого + меню */
.hdr-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1 0 0;
  min-width: 1px;
  padding: 2px 8px 2px 2px;
  overflow: hidden;
}

/* Лого */
.hdr-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 8px;
  flex: none;
  text-decoration: none;
}

.hdr-logo-symbol {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
}

.hdr-logo-wordmark {
  display: block;
  width: 153px;
  height: 18px;
}

/* Меню */
.hdr-menu {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hdr-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  font: 600 14px/16px "Inter", sans-serif;
  text-transform: uppercase;
  color: #171719;
  text-decoration: none;
  white-space: nowrap;
}

/* Правая половина: CTA + бургер */
.hdr-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex: none;
  padding: 2px;
}

/* CTA */
.hdr-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;      /* подпись nowrap — плашке нельзя быть у́же текста */
  margin-left: auto;   /* прижимает CTA и бургер к правому краю плашки */
  height: 48px;
  padding: 16px 40px;
  background: #171719;
  border-radius: 50px;
  text-decoration: none;
}

.hdr-cta-label {
  font: 600 16px/20px "Inter", sans-serif;
  text-transform: uppercase;
  color: #eaeaea;
  white-space: nowrap;
}

.hdr-cta-label--short {
  display: none;
}

/* Бургер */
.hdr-burger {
  position: relative;
  flex: none;
  width: 94px;
  height: 48px;
  padding: 0;
  border: 0;
  background: #171719;
  border-radius: 120px;
  cursor: pointer;
}

.hdr-burger-lines {
  position: absolute;
  left: 34.74%; /* инсет из макета — ширина линий следует за плашкой */
  right: 34.74%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0.72;
}

.hdr-burger-lines span {
  display: block;
  flex: none;
  width: 100%;
  height: 2px;
  background: #eaeaea;
  border-radius: 6px;
}

/* ---------- 1200 (102:61306): меню уплотняется, левая часть по контенту ---------- */
@media (max-width: 1200px) {
  .hdr {
    padding: 24px 20px 8px;
  }

  .hdr-left {
    flex: 0 0 auto;
    gap: 8px;
    padding-right: 8px;
  }

  .hdr-menu {
    gap: 8px;
  }
}

/* ---------- 1024 (102:61297): только поля контейнера ---------- */
@media (max-width: 1024px) {
  .hdr {
    padding: 20px 16px 8px;
  }
}

/* ---------- 768 (102:61315): меню скрывается ---------- */
@media (max-width: 768px) {
  .hdr {
    padding: 16px 12px 8px;
  }

  .hdr-left {
    gap: 28px;
    padding-right: 8px;
  }
  /* `.hdr-menu { display: none }` снят: границу меню задаёт перенос с Framer
     ниже — меню уходит на 719.98, а не на 768. */
}

/* ---------- 430 (102:61312): CTA → BRIEF 13/16, бургер 56, вордмарк 114×14 ----------
   Граница поднята с 430 до 519.98: во Framer кадр 414 действует на 414…519.98,
   и на 431 компактные значения обрывались — плашке не хватало 36 px. */
@media (max-width: 519.98px) {
  .hdr {
    padding: 12px 8px 4px;
  }

  .hdr-left {
    flex: 1 0 0;
    min-width: 1px;
    padding-right: 8px;
  }

  .hdr-logo {
    gap: 8px;
    width: 200px;
  }

  .hdr-logo-wordmark {
    width: 114px;
    height: 14px;
  }

  .hdr-right {
    align-self: stretch;
  }

  .hdr-cta {
    flex: none;
    align-self: stretch;
    height: auto;
  }

  .hdr-cta-label--full {
    display: none;
  }

  .hdr-cta-label--short {
    display: block;
    font: 600 13px/16px "Inter", sans-serif;
  }

  .hdr-burger {
    width: 56px;
    height: auto;
    align-self: stretch;
  }

  .hdr-burger-lines {
    left: 33.04%;
    right: 33.04%;
  }
}

/* ---------- 375 (102:61309): символ 40, правая часть фиксированная 179×44 ---------- */
@media (max-width: 375px) {
  .hdr {
    padding: 8px 6px 4px;
  }

  .hdr-logo {
    gap: 6px;
    width: auto;
  }

  .hdr-logo-symbol {
    width: 40px;
    height: 40px;
  }

  .hdr-right {
    flex: 0 0 auto;
    align-self: auto;
    width: 179px;
    height: 44px;
  }

  .hdr-burger {
    flex: 1 0 0;
    min-width: 1px;
    width: auto;
  }
}

/* ---------- 320 (102:61318): без CTA, справа только бургер ---------- */
@media (max-width: 320px) {
  .hdr-right {
    width: 60px;
  }

  .hdr-cta {
    display: none;
  }
}

/* ---------- ПЕРЕНОС С FRAMER, замер живого firstone1.framer.website ----------
   Снято по 12 кадрам. Что эталон говорит про шапку:

     320…374.98   плашка 44, бургер 84x40, меню НЕТ, кнопки брифа НЕТ
     375…719.98   плашка 52, бургер 94x48, меню НЕТ, кнопки брифа НЕТ
     720…1079.98  плашка 52, бургер 94x48, меню = один CASES, кнопка брифа ЕСТЬ
     1080 и выше  плашка 52, бургер 94x48, меню полное, кнопка брифа ЕСТЬ

   Главное расхождение, которое это чинит: кнопки брифа в шапке до 720 нет
   вообще. Код показывал её с 330 — отсюда и теснота, и обрезанная подпись. */

@media (max-width: 719.98px) {
  .hdr-menu { display: none; }
  .hdr-cta { display: none; }

  .hdr-burger {
    flex: none;
    width: 94px;
    height: 48px;
    align-self: center;
  }

  .hdr-right {
    flex: none;
    width: auto;
    height: auto;
    align-self: center;
  }

  /* Без меню и кнопки бургер обязан остаться прижатым к правой кромке.
     На 1200 левая часть переведена в `flex: 0 0 auto` (меню уплотняется),
     и в полосе 520…719, где меню уже скрыто, распирать плашку становится
     нечему — бургер вставал сразу за логотипом, а справа оставалась дыра
     в четверть ширины. Возвращаем левой части рост. */
  .hdr-left {
    flex: 1 0 0;
    min-width: 1px;
  }
}

@media (max-width: 374.98px) {
  .hdr-burger { width: 84px; height: 40px; }
}

@media (min-width: 720px) and (max-width: 1079.98px) {
  .hdr-menu-item { display: none; }
  .hdr-menu-item[href="#cases"] { display: flex; }
}

/* Те же точки переключения, но без движения для reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .hdr {
    translate: none;
    will-change: auto;
  }
}

/* Убранная шапка не должна ловить курсор и уводить фокус */
.hdr[data-story-hidden] { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .hdr-bar { filter: none; scale: 1; }
}