/* Shared header layout and contact dialog. */
:root { --hero-edge: 10px; --hero-chrome-inset: 10px; }
@media (min-width: 1024px) { :root { --hero-edge: 16px; } }
html { scrollbar-gutter: stable; }
html.contact-scroll-lock, html.contact-scroll-lock body { overflow: hidden; overscroll-behavior: none; }
.site-socials {
  position: fixed;
  /* Above .work-toc's rail (z-index 60, case-toc.css) so the open
     "Связаться" dropdown never sits under the TOC rungs. */
  z-index: 65;
  top: var(--page-px, 10px);
  right: calc(var(--page-px, 10px) + var(--chrome-socials-offset, 0px));
  /* Ряд соцсетей центрируется по вертикали в полосе высотой с плашку
     хедера (--header-h меряет layout-chrome.b6e65f37e405.js), поэтому кружки/кнопка
     стоят ровно на уровне кнопки «Резюме PDF», а не по верхней кромке
     плашки. */
  display: flex;
  align-items: center;
  height: var(--header-h, 3.5rem);
  /* Полоса выше самих иконок — только для выравнивания, клики сквозь неё
     идут на баннер; ловят их обратно сами иконки/кнопка. */
  pointer-events: none;
  transition: top 0.25s ease, right 0.25s ease;
}

.contact-trigger {
  pointer-events: auto;
}

/* Desktop-only anchored dropdown for "Связаться" — a calm, non-modal
   popover (no backdrop/scroll-lock/focus-trap), same dark-glass recipe
   as .work-toc__panel. The full-screen .contact-dialog sheet stays the
   mobile/tablet variant (see site-chrome.js). */
.site-socials__panel {
  position: absolute;
  /* 6px от нижнего края кнопки «Связаться»: она центрирована в полосе
     высотой с хедер, поэтому считаем от центра, а не от низа обёртки. */
  top: calc(50% + var(--button-height) / 2 + 6px);
  right: 0;
  /* Shrink to the longest item instead of a fixed width with empty
     space next to short labels. */
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border-radius: var(--radius-surface);
  background: var(--color-glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--color-glass-border);
  display: grid;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  --mood-bg: var(--color-surface-alt);
  --mood-ink: var(--color-text);
}
.site-socials__panel nav { display: grid; gap: 2px; }
.site-socials__panel .btn { width: 100%; }
.site-socials__panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (width < 1000px) {
  .site-socials__panel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-socials__panel { transition: none; }
}

/* Пока не проскроллено — хедер и соцсети визуально внутри баннера,
   в 10px от его кромки (кромка = --hero-edge от вьюпорта). При скролле
   site-chrome.js ставит html.chrome--pinned → уезжают в углы. */
html:not(.chrome--pinned) .site-socials {
  top: calc(var(--hero-edge, 10px) + var(--hero-chrome-inset, 10px));
  right: calc(var(--hero-edge, 10px) + var(--hero-chrome-inset, 10px) + var(--chrome-socials-offset, 0px));
}

/* Десктоп (≥1000px): хедер слева (в баннере на скролл-топе, в
   углу при скролле), соцсети — отдельная плавающая хрома справа.
   Перебиваем центрирование из header.css. */
.site-header {
  transform: none;
  transition: top 0.25s ease, left 0.25s ease;
}

@media (min-width: 1000px) {
  html:not(.chrome--pinned) .site-header {
    top: calc(var(--hero-edge, 10px) + var(--hero-chrome-inset, 10px));
    left: calc(var(--hero-edge, 10px) + var(--hero-chrome-inset, 10px));
  }

  html.chrome--pinned .site-header {
    left: var(--page-px, 10px);
  }
}
@media (width < 1000px) {
  .site-header {
    left: 50%;
    transform: translateX(-50%);
    padding-inline: var(--chrome-pad-block);
    /* Паддинг между «Резюме» и кнопкой соцсетей (и заодно до аватара). */
    gap: 6px;
  }
  .site-header:has(.site-header__logo[hidden]) {
    width: calc(100% - 2 * (var(--hero-edge, 10px) + 16px));
  }
  .site-header:has(.site-header__logo[hidden]) .site-header__cta {
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-header__identity,
  .site-header .site-socials { flex-shrink: 0; }
  html:not(.chrome--pinned) .site-header {
    top: calc(var(--hero-edge, 10px) + var(--hero-chrome-inset, 10px));
    left: 50%;
  }
  html.chrome--pinned .site-header {
    top: var(--page-px, 10px);
    left: 50%;
  }

  .site-socials,
  html:not(.chrome--pinned) .site-socials {
    position: static;
    inset: auto;
    height: auto;
    pointer-events: auto;
    display: flex;
    align-items: center;
    transition: none;
  }
  .site-socials__list {
    display: none;
  }
  .contact-trigger__label {
    display: none;
  }
  /* Лого ужимается / убирается из JS (layout-chrome.b6e65f37e405.js), чтобы плашка по
     центру влезала в экран; это — страховочный потолок. */
  .site-header__logo-mark {
    max-width: 42vw;
  }
}

@media (max-width: 480px) {
  .site-header__logo-mark { max-width: 34vw; }
}

.contact-dialog { position: fixed; inset: 0; z-index: 100; }
.contact-dialog[hidden] { display: none; }
.contact-dialog__backdrop { position: absolute; inset: 0; background: rgba(8,10,20,.4); animation: contact-backdrop-in .65s ease both; }
.contact-dialog__panel {
  position: absolute; inset: 10px; display: flex; flex-direction: column;
  padding: clamp(20px, 3vw, 40px); border-radius: var(--radius-surface);
  /* Calm dark chrome close to the page's own background, not the
     saturated mood colour — a dialog this size in vivid --mood-bg
     read as loud/anxious. Background/text set directly. */
  --mood-ink: var(--color-text);
  background: var(--color-surface-alt); color: var(--mood-ink);
  overflow: hidden; isolation: isolate;
  animation: contact-surface-in .8s cubic-bezier(.22,1,.36,1) both;
}
.contact-dialog__body { flex: 1; min-height: 0; display: flex; overflow-y: auto; overscroll-behavior: contain; }
.contact-dialog__inner { width: min(420px, 100%); margin: auto; padding-block: 12px; }
.contact-dialog__head { margin-bottom: 24px; text-align: center; animation: contact-item-in .5s .18s ease both; }
.contact-dialog__title { margin: 0; }
.contact-dialog [data-rows] { display: flex; flex-direction: column; gap: 10px; }
.contact-dialog__item { animation: contact-item-in .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.23s + var(--item-index) * .065s); }
.contact-row { width: 100%; }
.contact-dialog__footer { flex: none; display: flex; justify-content: center; padding-top: 24px; padding-bottom: env(safe-area-inset-bottom, 0px); }
.contact-dialog__close-wrap { animation: contact-item-in .45s .6s cubic-bezier(.16,1,.3,1) both; }
.contact-dialog.is-closing { pointer-events: none; }
.contact-dialog.is-closing .contact-dialog__panel { animation: contact-surface-out .55s .12s cubic-bezier(.65,0,.35,1) both; }
.contact-dialog.is-closing .contact-dialog__backdrop { animation: contact-backdrop-out .6s ease both; }
.contact-dialog.is-closing .contact-dialog__item { animation: contact-item-out .2s ease both; animation-delay: calc((5 - var(--item-index)) * .02s); }
.contact-dialog.is-closing .contact-dialog__head,
.contact-dialog.is-closing .contact-dialog__close-wrap { animation: contact-item-out .18s ease both; }
@keyframes contact-surface-in {
  from { clip-path: var(--contact-origin, inset(0 0 100% 100% round 32px)); }
  to { clip-path: inset(0 round 36px); }
}
@keyframes contact-surface-out {
  from { clip-path: inset(0 round 36px); }
  to { clip-path: var(--contact-origin, inset(0 0 100% 100% round 32px)); }
}
@keyframes contact-item-in { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes contact-item-out { to { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes contact-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes contact-backdrop-out { to { opacity: 0; } }
@media (max-width: 599px) {
  .contact-dialog__panel { padding: 20px; border-radius: var(--radius-surface); }
  .contact-dialog [data-rows] { gap: 8px; }
  .contact-dialog__head { margin-bottom: 20px; }
  .contact-dialog__footer { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-dialog__panel, .contact-dialog__backdrop, .contact-dialog__head,
  .contact-dialog__item, .contact-dialog__close-wrap { animation: none !important; }
  .site-header, .site-socials { transition: none; }
}