/* ===== Плавающая шапка: при прокрутке сжимается в «плашку» с отступом сверху =====
   Включается классом .is-float на .site-header (assets/js/header-float.js).
   Чтобы отключить — убрать подключение этого файла и header-float.js из includes/header.php.

   Плавность: фон полосы шапки вынесен в ::before и появляется/исчезает через opacity
   (background и backdrop-filter браузеры не анимируют — отсюда был «рывок»). При возврате
   наверх сначала плашка расширяется, затем с задержкой мягко проявляется фон полосы. */

:root{--hf-ease:cubic-bezier(.22,1,.36,1);--hf-dur:.6s}

.site-header{
  height:92px;box-sizing:border-box;  /* высота в потоке постоянная — страница не «прыгает» */
  background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom-color:transparent!important;
  transition:padding var(--hf-dur) var(--hf-ease);
}
/* Фон полосы шапки — отдельный слой */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(10,10,18,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  opacity:1;transform:translateY(0);
  transition:opacity .5s ease .18s,transform .6s var(--hf-ease) .1s;  /* при возврате — с задержкой, после расширения плашки */
}
.site-header .header-top{
  box-sizing:border-box;width:100%;border:1px solid transparent;
  background:rgba(16,16,28,0);box-shadow:0 12px 40px rgba(0,0,0,0);
  will-change:width;
  transition:width var(--hf-dur) var(--hf-ease),height var(--hf-dur) var(--hf-ease),padding var(--hf-dur) var(--hf-ease),
             border-radius var(--hf-dur) var(--hf-ease),background .45s ease,box-shadow .5s ease,border-color .45s ease;
}
.site-header .brand img{transition:height var(--hf-dur) var(--hf-ease)}
/* Поиск без анимации: переход flex-grow/flex-basis давал «проседание» поиска на долю секунды.
   Ширину поиска плашка меняет мгновенно, а плавно сжимается/расширяется уже сама плашка. */
.site-header .search-wrap{transition:none}

/* Плашка */
.site-header.is-float{padding-top:12px;pointer-events:none}  /* прозрачные края не мешают кликать по странице */
.site-header.is-float::before{
  opacity:0;transform:translateY(-12px);
  transition:opacity .3s ease,transform .45s var(--hf-ease);  /* при уходе вниз — сразу и быстро */
}
.site-header.is-float .header-top{
  pointer-events:auto;
  width:min(var(--hf-w,1200px),calc(100% - 32px));
  height:64px;padding:0 14px 0 18px;
  border-radius:20px;border-color:rgba(126,108,255,.22);
  background:rgba(16,16,28,.8);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.site-header.is-float .brand img{height:38px}
.site-header.is-float .search-wrap{flex:0 0 var(--hf-search,260px);max-width:var(--hf-search,260px)}  /* та же ширина, что и в обычной шапке */

/* Возврат наверх (JS): 1) .hf-hide — плашка растворяется; 2) .hf-snap — полоса встаёт на место без переходов;
   3) снимаем .hf-hide — полоса и её фон плавно проявляются, лёгким сдвигом сверху */
.site-header .header-top{opacity:1;transform:none}
.site-header.hf-hide .header-top{opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease}
.site-header.hf-hide::before{opacity:0;transition:opacity .16s ease}
.site-header.hf-snap,.site-header.hf-snap::before,.site-header.hf-snap .header-top,.site-header.hf-snap .brand img,.site-header.hf-snap .search-wrap{transition:none!important}
.site-header:not(.hf-hide):not(.is-float) .header-top{
  transition:opacity .45s ease,transform .5s var(--hf-ease),width var(--hf-dur) var(--hf-ease),height var(--hf-dur) var(--hf-ease),padding var(--hf-dur) var(--hf-ease),
             border-radius var(--hf-dur) var(--hf-ease),background .45s ease,box-shadow .5s ease,border-color .45s ease;
}
.site-header:not(.hf-hide):not(.is-float)::before{transition:opacity .45s ease .05s,transform .5s var(--hf-ease)}

/* Возврат наверх (24.10.2026, 3-я версия — по просьбе владельца): плашка сама расширяется в полосу (как в 1-й версии),
   но РАМКА гаснет сразу в начале (0,12 с) — раньше она тянулась вместе с расширением и выглядела криво; тень — за 0,2 с.
   .hf-back (~0,6 с, ставит JS): поиск держит ширину плашки — потом она совпадает с его обычной шириной, рывка нет.
   (2-я версия «сначала расширение с фоном, потом перетекание» отклонена — «ещё хуже».) */
.site-header.hf-back .search-wrap{flex:0 0 var(--hf-search,260px);max-width:var(--hf-search,260px)}
/* 24.10.2026: возврат «резкий» → дольше и мягче: 0,85 с, плавный разгон и торможение (ease-in-out),
   фон полосы проявляется чуть позже и медленнее, рамка гаснет мягко за 0,25 с. Длительность = таймер в header-float.js */
.site-header.hf-back{--hf-back-dur:.85s;--hf-back-ease:cubic-bezier(.45,0,.2,1);transition:padding var(--hf-back-dur) var(--hf-back-ease)}
.site-header.hf-back:not(.hf-hide):not(.is-float) .header-top{
  transition:opacity .5s ease,transform .6s var(--hf-back-ease),width var(--hf-back-dur) var(--hf-back-ease),height var(--hf-back-dur) var(--hf-back-ease),
             padding var(--hf-back-dur) var(--hf-back-ease),border-radius var(--hf-back-dur) var(--hf-back-ease),
             background .7s ease .1s,box-shadow .4s ease,border-color .25s ease}
.site-header.hf-back .brand img{transition:height var(--hf-back-dur) var(--hf-back-ease)}
.site-header.hf-back:not(.hf-hide):not(.is-float)::before{transition:opacity .6s ease .25s,transform .75s var(--hf-back-ease) .1s}

/* Средние экраны: меню не помещалось и шапка вылезала вбок (на 1024 — на 58px) */
@media (min-width:901px) and (max-width:1200px){
  .site-header .main-nav > a:not(.nav-pass){padding-left:9px;padding-right:9px}
}
@media (min-width:901px) and (max-width:1080px){
  .site-header .main-nav > a[href="/"]{display:none}  /* на главную ведёт логотип */
}
@media (max-width:900px){
  .site-header{height:72px}
  .site-header.is-float{padding-top:8px}
  .site-header.is-float .header-top{width:calc(100% - 20px);height:56px;padding:0 10px 0 12px;border-radius:16px}
  .site-header.is-float .brand img{height:32px}
}
/* Узкие телефоны: шапка была шире экрана на ~20px */
@media (max-width:420px){
  .site-header .header-top{padding-left:12px;padding-right:12px;gap:6px}
  .site-header .header-actions{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .site-header,.site-header::before,.site-header .header-top,.site-header .brand img,.site-header .search-wrap{transition:none}
}