/* ============ Header ============
   Лого слева → меню → справа язык и кнопка.
   При скролле вниз прячется, при скролле вверх плавно появляется (header.js).
   Mobile: над карточкой на светлом фоне. Desktop: поверх карточки (белое лого),
   после скролла — тонкая белая плашка с цветным лого.
*/
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--hdr-h);
  background: var(--page);
  transition: transform .5s var(--ease-out), background-color .4s, box-shadow .4s, color .4s;
}
.header.is-solid { box-shadow: 0 1px 0 var(--line); }
.header.is-hidden { transform: translateY(-100%); }

.header__inner {
  height: 100%;
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--page-x);
}

/* ---------- Лого ---------- */
.header__logo { position: relative; display: grid; flex: none; }
.header__logo-color { height: 24px; width: auto; transition: opacity .35s; }
.header__logo-light { display: none; }

.header__nav { display: none; }

.header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header__cta { display: none; }
.header__burger { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.header__burger svg { width: 26px; height: 26px; }

/* ---------- Переключатель языка ---------- */
.lang-switch {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--line);
  transition: background-color .4s, border-color .4s;
}
.lang-switch button {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  opacity: .45; filter: grayscale(.6);
  transition: opacity .3s, filter .3s, box-shadow .3s;
}
.lang-switch button:hover { opacity: .8; }
.lang-switch button svg { width: 22px; height: 22px; border-radius: 50%; }
.lang-switch button[aria-pressed="true"] { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--accent); }

/* ---------- Мобильное меню ---------- */
.menu {
  position: fixed; inset: var(--hdr-h) 0 0; z-index: 49;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--page);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .35s, transform .5s var(--ease-out), visibility 0s .5s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  font-size: 32px; font-weight: 800; letter-spacing: -.05em;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .header {
    position: fixed; left: 0; right: 0;
    background: transparent; color: #fff;
  }
  .header__inner { gap: 48px; margin-top: var(--gutter); height: calc(100% - var(--gutter)); }
  .header.is-solid {
    height: 64px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    color: var(--ink);
  }
  .header.is-solid .header__inner { margin-top: 0; height: 100%; }

  .header__burger { display: none; }
  .menu { display: none; }

  /* белое лого на карточке, цветное — в белой плашке */
  .header__logo-light { display: grid; }
  .header__logo-light img { grid-area: 1 / 1; height: 28px; width: auto; }
  .header__logo-light img:first-child { filter: none; }
  body[data-pet="cat"] .header__logo-paw { filter: hue-rotate(102deg) saturate(.62) brightness(.78); }
  .header__logo-color { position: absolute; left: 0; top: 50%; translate: 0 -50%; height: 28px; opacity: 0; }
  .header.is-solid .header__logo-light { opacity: 0; }
  .header.is-solid .header__logo-color { opacity: 1; }
  .header__logo-light { transition: opacity .35s; }

  .header__nav { display: flex; gap: 32px; }
  .header__nav a { position: relative; font-size: 15px; font-weight: 600; }
  .header__nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px;
    background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .4s var(--ease-out);
  }
  .header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

  .header__actions { gap: 12px; }
  .header__cta { display: inline-flex; height: 42px; background: #fff; color: var(--ink); }
  .header.is-solid .header__cta { background: var(--accent-deep); color: #fff; }
  .header__cta:hover, .header.is-solid .header__cta:hover { background: var(--orange); color: #fff; }

  .lang-switch { background: rgba(255, 255, 255, .22); border-color: transparent; }
  .lang-switch button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff; }
  .header.is-solid .lang-switch { background: #fff; border-color: var(--line); }
  .header.is-solid .lang-switch button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
}