/* ============================================================
   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;

  /* Величины полосы, общие для всей правой группы (COMPONENTS.md, закон 3).
     --hdr-control — высота управляющего элемента: её берут и бургер, и кнопка
     брифа, поэтому они стоят на одной линии и на одном отступе от кромки.
     Отступ не задаётся отдельным числом: .hdr-left и .hdr-right несут
     padding 2px, плашка выходит на 4 выше элемента, а центрирование даёт
     ровно 2px сверху и снизу.
     --hdr-cta-side — поле кнопки по бокам. В компактной полосе оно равно
     половине высоты, то есть радиусу торца: меньше — подпись наезжает на
     скругление, больше — коробка шире, чем нужно подписи. */
  --hdr-control: 48px;
  --hdr-cta-side: 40px;
}

/* Левая половина: лого + меню */
.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 · кнопка брифа ----------
   Контракт кнопки описан в `COMPONENTS.md`, блок 3. Он обязателен к чтению
   до любой правки: страница не имеет права показывать кнопку правилом
   display и дописывать ей геометрию — она объявляет намерение атрибутом
   data-cta, а размеры во всех полосах задаёт этот файл.

   Высота у кнопки собственная и явная, а не «сколько получится». Раньше её
   давали padding 16px сверху и снизу плюс строка подписи — и кнопка сама
   раздувала плашку на телефоне с 44 до 48. Вертикального поля здесь больше
   нет намеренно: высоту держит height, подпись центрируется.

   align-self: center — не украшение. stretch — это и есть «встык к кромке»:
   элемент берёт полную высоту плашки, и зазора в 2px не остаётся. */
.hdr-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;      /* подпись nowrap — плашке нельзя быть у́же текста */
  margin-left: auto;   /* прижимает CTA и бургер к правому краю плашки */
  align-self: center;
  height: var(--hdr-control);
  padding: 0 var(--hdr-cta-side);
  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;
  }

  /* Компактная подпись и компактное поле переехали в полосу ≤719.98:
     кнопка либо скрыта, либо компактна — промежуточного состояния,
     где она несёт десктопные 40px поля, больше нет. */

  .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; }

  /* Геометрия компактной кнопки задана здесь ВСЕГДА, а не только когда её
     показывают. В этом весь смысл: страница, которой кнопка нужна на телефоне,
     объявляет режим — и получает готовые размеры, а не пустое состояние,
     которое ей пришлось бы дорисовывать самой (COMPONENTS.md, закон 1). */
  .hdr-cta { --hdr-cta-side: calc(var(--hdr-control) / 2); }

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

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

  .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-bar { --hdr-control: 40px; }
  .hdr-burger { width: 84px; height: 40px; }
}

/* ---------- Режим data-cta="always" ----------
   Единственный разрешённый способ показать кнопку брифа ниже 720. Страница
   объявляет намерение атрибутом на .hdr и не пишет ни одного правила
   геометрии — размеры приходят из полос выше (COMPONENTS.md, блоки 1 и 3.2).

   Режим нужен, пока домен под заглушкой: бургер погашен (data-state="soon"),
   и кнопка остаётся единственным путём к брифу с телефона. Прямая инструкция
   Alexa 03.09.2026: «кнопка брифа просто должна быть доступна».

   Ниже 520 плашка обязана нести символ, APPS, кнопку и погашенный бургер.
   Замер: весь набор вместе с вордмарком помещается только с 444px, поэтому
   здесь вордмарк уходит, а ссылкой на главную остаётся символ. Обрезанный
   логотип — отказ, а не мелочь (закон 4). Заодно снимается фиксированная
   ширина логотипа 200px: при символе 48 и вордмарке 114 она держала 30px
   пустоты, которой в компактной полосе места нет. */
@media (max-width: 719.98px) {
  .hdr[data-cta="always"] .hdr-cta { display: flex; }

  /* Ниже 720 кнопка занимает середину плашки, и левая часть обязана сжаться
     до компактных величин по всей полосе, а не только ниже 520. Иначе на 520
     плашка несёт полноразмерный вордмарк 153, зазор 28 и кнопку разом —
     замер даёт перебор в 12.5px, и пункт APPS срезается кромкой .hdr-left.
     Компактная полоса выглядит одинаково по всей длине: те же 114×14 и тот
     же зазор, что ниже 520. */
  .hdr[data-cta="always"] .hdr-left { gap: 8px; }

  .hdr[data-cta="always"] .hdr-logo-wordmark {
    width: 114px;
    height: 14px;
  }
}

@media (max-width: 519.98px) {
  .hdr[data-cta="always"] .hdr-logo { width: auto; }
  .hdr[data-cta="always"] .hdr-logo-wordmark { display: none; }
}

@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; }
}