/* base.css — правила, общие для всех страниц.
   Раньше отклик на нажатие и prefers-reduced-motion жили только в index.html,
   поэтому на остальных 25 страницах их не было вовсе. */

/* Отклик на нажатии, а не на отпускании.
   Обёртка .mt-btn-wrap масштабируется вместо вложенной кнопки, иначе
   сжатие удваивается. */
button,
.mt-btn-wrap {
  transition: transform 110ms cubic-bezier(0.22, 1, 0.36, 1);
}
button:active { transform: scale(0.97); }
.mt-btn-wrap:active { transform: scale(0.97); }
.mt-btn-wrap:active > button { transform: none; }
a:active { opacity: 0.65; }

/* Ховер-эффекты — только там, где указатель действительно наводится.
   На тач-экране :hover залипает после тапа: заливка остаётся на кнопке. */
@media (hover: none), (pointer: coarse) {
  .mt-fill:hover::after { transform: translateX(-100%); }
  .mt-fill.from-right:hover::after { transform: translateX(100%); }
  .mt-underline:hover::after { transform: scaleX(0); }
}

/* «Уменьшить движение».
   Прежнее правило в index.html гасило только animation — transition и
   scroll-behavior продолжали работать. Здесь закрыты все три. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
  button:active,
  .mt-btn-wrap:active { transform: none; opacity: 0.8; }
}

/* Матовая подложка шапки живёт на псевдоэлементе, а не на самом <header>.
   backdrop-filter делает элемент содержащим блоком для position:fixed
   потомков — из-за этого мобильное меню внутри шапки получало top/bottom
   относительно её 77px и схлопывалось в полоску 40px вместо 736px. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Обёртка, которую dc-import ставит вокруг компонента, ломала sticky у шапки.
   `position:sticky` двигается только внутри своего родителя, а родителем здесь
   оказывался <div class="sc-host"> ростом ровно в саму шапку — 77px. Хода нет,
   и шапка уезжала вверх как обычный блок.

   Заметно это стало не сразу: snap.css тянет страницу к первой секции, а та
   начинается сразу под шапкой. На загрузке страница прокручивалась ровно на
   77px, и шапки на белых страницах не было видно вообще. На index.html шапка
   стоит в разметке напрямую, без обёртки, — поэтому там всё работало.

   display:contents убирает обёртку из дерева боксов, не трогая разметку: родителем
   шапки становится тот блок, внутри которого ей и надо липнуть. */
.sc-host:has(> .site-header) {
  display: contents;
}

/* Пункты меню в шапке.

   Базовый цвет был #475569 — на белом фоне он читается блёкло, а страницы сайта
   белые почти все. Взят #1e293b: заметно темнее, но не чёрный, чтобы логотип
   рядом оставался главным. Сам цвет правится в SiteHeader.dc.html.

   Подложка под курсором — добавка к уже работавшему потемнению текста
   (style-hover компилируется в `.scp1:hover{color:#0C0C0C!important}`). Отступы и
   скругление у ссылок были заложены изначально, фона под ними не хватало. Если
   подложка лишняя — удалите это правило, потемнение текста останется. */
.site-header nav a:hover {
  background: rgba(12, 12, 12, 0.06);
}