/* ---------- Шапка: экранчик электронных весов (логика как у шапки-теста на сайте «Men Ona Bo'laman») ----------
   Корпус — белое закалённое стекло с серебристым ободком. Слева логотип, в центре тёмный экран с сегментными цифрами.
   Сначала «взвешивание»: 00.0 → 75.0 → 60.0 kg, цифры мигают, затем (на десктопе) экран раскрывается и в нём
   загораются пункты меню. На телефоне экран остаётся с весом, а круглая кнопка весов справа открывает меню.
   Цифры и смену состояний делает js/header.js. Шапка закреплена и всегда на экране. */

.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 12px 10px 0; pointer-events: none;
  transform: translateY(calc(-100% - 20px)); opacity: 0; visibility: hidden;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s, visibility 0s .45s; }
/* шапка выезжает при загрузке и остаётся на экране (js/header.js) */
.hdr.is-shown { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.hdr__bar { --bar-h: 60px; --lcd-h: 38px;
  position: relative; display: flex; align-items: center; gap: 10px; max-width: 1180px; height: var(--bar-h); margin: 0 auto; padding: 0 9px 0 16px;
  border-radius: 22px; pointer-events: auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(250, 252, 251, .94) 48%, rgba(236, 241, 240, .94) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(68, 71, 74, .08), 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 4px rgba(68, 71, 74, .07),
    0 16px 30px -18px rgba(68, 71, 74, .55), inset 0 1px 0 #fff, inset 0 -2px 4px rgba(68, 71, 74, .06); }
.hdr__bar::before { content: ""; position: absolute; left: 22px; right: 22px; top: 3px; height: 40%; border-radius: 18px 18px 40% 40%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); }   /* блик на стекле */

.hdr__logo { position: relative; z-index: 1; display: block; flex: none; }
.hdr__logo img { width: auto; height: 40px; }

/* ---------- экран ---------- */
.lcd { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: var(--lcd-h); margin-left: auto; padding: 0 14px;
  border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0, #1d3236 0%, #0c1a1c 60%, #071113 100%);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 0 0 2px #dfe6e5, 0 0 0 3px rgba(68, 71, 74, .15), 0 1px 2px 3px rgba(68, 71, 74, .06); }
.lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(170deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 38%); }     /* стекло экрана */
.lcd__weight { display: flex; align-items: flex-end; gap: 5px; color: #c9ff3c; transition: opacity .35s, max-width .5s cubic-bezier(.2, .8, .2, 1); max-width: 200px; }
.lcd__digits { display: flex; align-items: flex-end; height: 22px; filter: drop-shadow(0 0 3px rgba(201, 255, 60, .55)); }
.lcd__digits svg { width: 13px; height: 22px; margin-right: 2px; overflow: visible; }
.lcd__digits .dot { width: 4px; margin-right: 3px; }
.lcd__digits .on { fill: #c9ff3c; }
.lcd__digits .off { fill: rgba(201, 255, 60, .07); }
.lcd__unit { font: 800 10px/1 var(--text); letter-spacing: .06em; padding-bottom: 1px; text-shadow: 0 0 6px rgba(201, 255, 60, .6); }
.lcd.is-blink .lcd__digits { animation: lcdBlink .9s steps(1) 2; }
@keyframes lcdBlink { 50% { opacity: .15; } }

/* ---------- кнопка весов (телефон): круглая сенсорная кнопка, открывает меню ---------- */
.hdr__btn { position: relative; z-index: 1; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 35% 30%, #fff, #e7eceb 70%, #d5dddc);
  box-shadow: 0 0 0 1px rgba(68, 71, 74, .1), 0 4px 10px -4px rgba(68, 71, 74, .45), inset 0 1px 0 #fff; transition: transform .15s; }
.hdr__btn:active { transform: scale(.94); }
.hdr__btn span { position: absolute; left: calc(50% - 9px); width: 18px; height: 2.5px; border-radius: 2px; background: var(--ink);
  transform-origin: 100% 50%; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.hdr__btn span:nth-child(1) { top: calc(50% - 7.5px); }
.hdr__btn span:nth-child(2) { top: calc(50% - 1.25px); }
.hdr__btn span:nth-child(3) { top: calc(50% + 5px); }
.hdr.is-open .hdr__btn span { transform-origin: 50% 50%; animation: none; }
.hdr.is-open .hdr__btn span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.hdr.is-open .hdr__btn span:nth-child(2) { opacity: 0; }
.hdr.is-open .hdr__btn span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

/* ---------- меню на телефоне: плавно выезжает под шапкой ---------- */
.hdr__nav { position: absolute; top: calc(var(--bar-h) + 22px); left: 10px; right: 10px; display: flex; flex-direction: column; padding: 6px 20px;
  background: #fff; border-radius: 22px; box-shadow: 0 22px 44px -24px rgba(68, 71, 74, .5), 0 2px 6px -4px rgba(68, 71, 74, .2);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right;
  transition: opacity .25s, transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s; }
.hdr.is-open .hdr__nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hdr__nav a { padding: 15px 0; font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.hdr__nav a:last-child { border-bottom: 0; }

@media (max-width: 899px) {
  .lcd { position: static; overflow: visible; }      /* меню позиционируется от шапки, а не от экрана */
  .lcd::after { border-radius: 10px; }
  /* полоски на кнопке раз в 7 с складываются в стрелку и покачиваются: подсказка, что она нажимается */
  .hdr__btn span:nth-child(1) { animation: btnArrowTop 7s cubic-bezier(.45, 0, .55, 1) 3.5s infinite; }
  .hdr__btn span:nth-child(2) { animation: btnArrowMid 7s cubic-bezier(.45, 0, .55, 1) 3.5s infinite; }
  .hdr__btn span:nth-child(3) { animation: btnArrowBottom 7s cubic-bezier(.45, 0, .55, 1) 3.5s infinite; }
}
@keyframes btnArrowTop {
  0%, 8%, 74%, 100% { transform: none; }
  18%, 32%, 46%, 60% { transform: translateY(6.25px) rotate(42deg) scaleX(.56); }
  25%, 39%, 53% { transform: translateX(4px) translateY(6.25px) rotate(42deg) scaleX(.56); }
}
@keyframes btnArrowMid { 0%, 18%, 32%, 46%, 60%, 100% { transform: none; } 25%, 39%, 53% { transform: translateX(4px); } }
@keyframes btnArrowBottom {
  0%, 8%, 74%, 100% { transform: none; }
  18%, 32%, 46%, 60% { transform: translateY(-6.25px) rotate(-42deg) scaleX(.56); }
  25%, 39%, 53% { transform: translateX(4px) translateY(-6.25px) rotate(-42deg) scaleX(.56); }
}

/* ---------- десктоп: после взвешивания экран раскрывается и показывает меню ---------- */
@media (min-width: 900px) {
  /* поля по бокам как у сайта «Men Ona Bo'laman»: 300 px на экране 1920 (15.625vw), не меньше 32 px */
  .hdr { padding: 20px clamp(32px, 15.625vw, 300px) 0; }
  .hdr__bar { --bar-h: 60px; --lcd-h: 40px; max-width: none; padding: 0 10px 0 22px; border-radius: 22px; }   /* тоньше */
  .hdr__logo img { height: 38px; }
  .lcd { margin: 0 auto; padding: 0 18px; }
  .lcd__digits { height: 22px; }
  .lcd__digits svg { width: 13px; height: 22px; }
  .lcd__unit { font-size: 11px; }
  .hdr__btn { display: none; }
  .hdr__nav { position: static; flex-direction: row; align-items: center; gap: 0; padding: 0; max-width: 0; overflow: hidden;
    background: none; box-shadow: none; border-radius: 0; opacity: 1; visibility: visible; transform: none;
    transition: max-width .8s cubic-bezier(.2, .8, .2, 1); }
  .hdr__nav a { padding: 0 16px; border: 0; white-space: nowrap; font: 700 13px/1 var(--text); letter-spacing: .1em; text-transform: uppercase;
    color: #c9ff3c; text-shadow: 0 0 8px rgba(201, 255, 60, .55); opacity: 0; transition: opacity .4s, color .2s, text-shadow .2s; }
  .hdr__nav a + a { border-left: 1px solid rgba(201, 255, 60, .18); }
  .hdr__nav a:hover { color: #fff; text-shadow: 0 0 10px rgba(201, 255, 60, .9); }
  /* экран после взвешивания */
  .lcd.is-menu .lcd__weight { opacity: 0; max-width: 0; }
  .lcd.is-menu .hdr__nav { max-width: 640px; }
  .lcd.is-menu .hdr__nav a { opacity: 1; transition-delay: .35s; }
  .lcd.is-menu .hdr__nav a:nth-child(2) { transition-delay: .45s; }
  .lcd.is-menu .hdr__nav a:nth-child(3) { transition-delay: .55s; }
  .lcd.is-menu .hdr__nav a:hover { transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  .lcd__weight, .hdr__nav, .hdr__nav a, .hdr__btn span { transition: none !important; }
  .hdr__btn span:nth-child(n), .lcd.is-blink .lcd__digits { animation: none !important; }
}

/* кнопка заявки справа в шапке — только на десктопе (стиль как у главной кнопки первого экрана) */
.hdr__cta { display: none; }
@media (min-width: 900px) {
  .hdr__bar { gap: 16px; }
  .hdr__cta { position: relative; z-index: 1; display: flex; flex: none; min-height: var(--lcd-h); border-radius: 10px;   /* прямоугольная, как экран весов */ padding: 0 22px; font-size: 11px; white-space: nowrap; }
}
/* на узком десктопе меню и кнопка не помещаются рядом: кнопку прячем (заявка есть в меню и на странице) */
@media (min-width: 900px) and (max-width: 1239px) { .hdr__cta { display: none; } }