/* ---------- Шапка: тест на беременность (по фото настоящего теста) ----------
   Слева широкая закруглённая «лопатка» с логотипом плавно переходит в ровный корпус с утопленным окошком
   результата и легендой «homilador / homilador emas», справа полупрозрачная розоватая муфта
   и прозрачный колпачок с впитывающим фитилём. Силуэт рисует js/new.js (svg под размер шапки);
   без скрипта остаётся простая белая «пилюля».
   Окошко сначала маленькое: по полоске проходит проба, проявляются две полоски, потом окошко раскрывается,
   полоски расходятся и между ними появляются пункты меню. Шапка закреплена и всегда на экране.
   На телефоне колпачок — кнопка меню. */

.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 14px 8px 0; }

.header__bar {
  --stick-h: 66px; --cap-total: 84px;
  position: relative; display: flex; align-items: center; gap: 10px; max-width: 1180px; height: var(--stick-h); margin: 0 auto;
  padding: 0 calc(var(--cap-total) + 10px) 0 calc(var(--stick-h) * .5); border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #fcfcfd 42%, #f0f0f3 100%);
  box-shadow: 0 12px 26px -18px rgba(40, 30, 50, .5);
}
.header__bar.has-stick { background: none; box-shadow: none; }
.stick { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 12px 14px rgba(40, 30, 50, .15)) drop-shadow(0 2px 3px rgba(40, 30, 50, .12)); }

/* логотип на лопатке, слева */
.logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); }
.logo__mark { width: auto; height: 34px; flex: none; }
.logo__text { display: flex; flex-direction: column; font: 600 13px/1.15 var(--f-body); letter-spacing: .02em; }
.logo__text small { font-size: 9px; font-weight: 500; color: var(--muted); letter-spacing: .01em; }

/* легенда, отпечатанная на корпусе у муфты */
.test__legend { position: relative; z-index: 1; display: none; flex-direction: column; align-items: flex-start; gap: 3px; flex: none;
  font: 700 11px/1 var(--f-body); color: rgba(40, 30, 50, .34); text-shadow: 0 1px 0 rgba(255, 255, 255, .9); }
.test__legend span { display: flex; align-items: center; gap: 6px; }
.test__legend svg { width: 22px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* ---------- окошко результата: утоплено, вокруг выпуклый ободок ---------- */
.test__window, .test__mini {
  position: relative; z-index: 1; overflow: hidden; border-radius: 999px;
  background: linear-gradient(180deg, #ebe6df 0%, #f7f3ec 22%, #fbf8f2 55%, #f3eee6 100%);
  box-shadow:
    inset 0 2px 3px rgba(60, 40, 30, .2), inset 0 -1px 1px rgba(255, 255, 255, .85),
    0 0 0 3px #fff, 0 0 0 4px rgba(40, 30, 50, .08), 0 2px 3px 3px rgba(40, 30, 50, .07);
}
.test__window::before, .test__mini::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(270deg, rgba(250, 120, 161, 0) 0%, rgba(250, 120, 161, .07) 22%, rgba(250, 120, 161, .26) 52%, rgba(250, 120, 161, .16) 70%, rgba(250, 120, 161, 0) 100%);
  transform: translateX(110%); animation: testFlow 1.8s cubic-bezier(.45, .05, .3, 1) .5s forwards;
}
/* проба идёт от колпачка (справа) */
@keyframes testFlow { 0% { transform: translateX(110%); opacity: 1; } 70% { transform: translateX(-15%); opacity: 1; } 100% { transform: translateX(-70%); opacity: 0; } }

.test__line {
  position: relative; z-index: 1; display: block; flex: none; width: 4px; height: 56%; border-radius: 3px;
  background: linear-gradient(90deg, rgba(250, 120, 161, .2), rgba(250, 120, 161, .95) 35% 65%, rgba(250, 120, 161, .2));
  -webkit-mask: linear-gradient(180deg, transparent, #000 16% 84%, transparent);
  mask: linear-gradient(180deg, transparent, #000 16% 84%, transparent);
  opacity: 0; animation: testDevelop 1s ease-out 1.1s forwards;
}
.test__line--t { animation-duration: 1.6s; animation-delay: 1.5s; }
@keyframes testDevelop { 0% { opacity: 0; filter: blur(2px); } 55% { opacity: .65; filter: blur(.8px); } 100% { opacity: 1; filter: blur(.25px); } }

.test__mini { display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; width: 44px; height: 24px; margin: 0 auto; }
.test__mini .test__line { width: 3px; height: 62%; }

/* ---------- кнопка меню на колпачке (телефон) ----------
   Три полоски по центру колпачка (с поправкой на скруглённый конец). Каждые 7 с они плавно складываются в стрелку вправо,
   стрелка трижды мягко покачивается и снова раскладывается в полоски — подсказка, что колпачок нажимается.
   При открытии меню колпачок отъезжает, полоски превращаются в крестик. */
.test__capbtn { position: absolute; z-index: 2; right: 0; top: 0; bottom: 0; width: var(--cap-total); padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.test__capbtn span {
  position: absolute; right: calc(var(--cap-len, 50px) * .56 - 9px); width: 18px; height: 2.5px; border-radius: 2px;
  background: var(--pink); box-shadow: 0 1px 0 rgba(255, 255, 255, .8); transform-origin: 100% 50%;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
.test__capbtn span:nth-child(1) { top: calc(50% - 7.5px); }
.test__capbtn span:nth-child(2) { top: calc(50% - 1.25px); }
.test__capbtn span:nth-child(3) { top: calc(50% + 5px); }
.header.is-open .test__capbtn span { transform-origin: 50% 50%; animation: none; }
.header.is-open .test__capbtn span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.header.is-open .test__capbtn span:nth-child(2) { opacity: 0; }
.header.is-open .test__capbtn span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }
.stick__cap { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.header.is-open .test__capbtn { transform: translateX(6px); }
.header.is-open .stick__cap { transform: translateX(-6px); }   /* рисунок отражён: минус — вправо, от корпуса */
.test__capbtn:active { transform: translateX(3px); }
@media (max-width: 1023px) {
  .logo__text { display: none; }
  .logo__mark { height: 44px; }
  /* окошко и легенда рядом, легенда не заходит на муфту */
  .header__bar { padding-right: calc(var(--cap-total) + 16px); }
  .test__mini { margin: 0 0 0 auto; }
  .test__legend { display: flex; gap: 2px; margin-left: 6px; font-size: 8.5px; }
  .test__legend span { gap: 4px; }
  .test__legend svg { width: 17px; height: 9px; }
  /* полоски → стрелка вправо (верхняя и нижняя укорачиваются и наклоняются к правому концу средней) → покачивание → полоски */
  .test__capbtn span:nth-child(1) { animation: capArrowTop 7s cubic-bezier(.45, 0, .55, 1) 3.5s infinite; }
  .test__capbtn span:nth-child(2) { animation: capArrowMid 7s cubic-bezier(.45, 0, .55, 1) 3.5s infinite; }
  .test__capbtn span:nth-child(3) { animation: capArrowBottom 7s cubic-bezier(.45, 0, .55, 1) 3.5s infinite; }
}
@keyframes capArrowTop {
  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 capArrowMid {
  0%, 18%, 32%, 46%, 60%, 100% { transform: none; }
  25%, 39%, 53% { transform: translateX(4px); }
}
@keyframes capArrowBottom {
  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); }
}

/* ---------- меню на телефоне: плавно выезжает под шапкой ---------- */
.nav {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 3; display: flex; flex-direction: column; padding: 6px 20px;
  background: #fff; border-radius: 24px; box-shadow: 0 22px 44px -24px rgba(40, 30, 50, .5), 0 2px 6px -4px rgba(40, 30, 50, .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;
}
.header.is-open .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav a { position: relative; z-index: 1; padding: 15px 0; font-size: 16px; font-weight: 500; color: var(--ink); border-bottom: 1px solid #f0eef0; transition: color .2s; }
.nav a:last-of-type { border-bottom: 0; }
.nav a:hover { color: var(--pink); }
.nav .test__line { display: none; }

@media (prefers-reduced-motion: reduce) {
  .header, .test__capbtn, .test__capbtn span, .stick__cap, .nav { transition: none; animation: none; }
  .test__capbtn span:nth-child(n) { animation: none; }
  .test__window::before, .test__mini::before { animation: none; opacity: 0; }
  .test__line, .nav a { animation: none !important; opacity: 1; }
}

/* ---------- десктоп ---------- */
@media (min-width: 1024px) {
  .header { padding: clamp(16px, 1.3vw, 24px) clamp(16px, 2vw, 32px) 0; }
  .header__bar {
    --stick-h: clamp(70px, 4.8vw, 88px);
    max-width: 1440px; gap: clamp(22px, 2vw, 36px);
    padding: 0 calc(var(--cap-total) + clamp(16px, 1.4vw, 26px)) 0 calc(var(--stick-h) * .42);
  }
  .logo__mark { height: clamp(40px, 2.8vw, 52px); }
  .logo__text { font-size: clamp(13px, .95vw, 16px); }
  .logo__text small { font-size: clamp(9px, .6vw, 11px); }
  .test__legend { display: flex; font-size: clamp(10px, .7vw, 12px); }

  /* окошко результата: сначала маленькое — только полоски, потом раскрывается с пунктами меню */
  .nav.test__window {
    position: relative; top: auto; left: auto; right: auto; flex-direction: row; align-items: center; gap: clamp(16px, 1.5vw, 28px);
    height: calc(var(--stick-h) * .4); margin: 0 auto; padding: 0 clamp(18px, 1.6vw, 28px); border-radius: 999px;
    opacity: 1; visibility: visible; transform: none; transition: none;
    background: linear-gradient(180deg, #ebe6df 0%, #f7f3ec 22%, #fbf8f2 55%, #f3eee6 100%);
    box-shadow:
      inset 0 2px 3px rgba(60, 40, 30, .2), inset 0 -1px 1px rgba(255, 255, 255, .85),
      0 0 0 4px #fff, 0 0 0 5px rgba(40, 30, 50, .08), 0 2px 3px 4px rgba(40, 30, 50, .06);
  }
  .nav a {
    padding: 0; border: 0; font-size: clamp(13px, .9vw, 16px); white-space: nowrap; overflow: hidden;
    max-width: 0; opacity: 0; animation: linkIn 1s cubic-bezier(.2, .8, .2, 1) 3.1s forwards;
  }
  .nav a:nth-of-type(2) { animation-delay: 3.2s; }
  .nav a:nth-of-type(3) { animation-delay: 3.3s; }
  @keyframes linkIn { 0% { max-width: 0; opacity: 0; } 55% { opacity: 0; } 100% { max-width: 320px; opacity: 1; } }
  .nav .test__line { display: block; height: 52%; }
  .test__mini, .test__capbtn { display: none; }
}