/* ============================================================
   chrome.css — шапка и подвал, одинаковые на каждой странице.

   Разметка не пишется руками: её подставляет scripts/sync_chrome.py
   между маркерами <!-- chrome:header --> и <!-- chrome:footer -->.
   Стили лежат здесь одним файлом, поэтому шапка и подвал не могут
   разойтись между главной и кейсами.

   Файл опирается на токены, которые есть на всех страницах (kit.css):
   --color-*, --panel-*, --space-*, --ease-out, --dur-300.
   ============================================================ */

:root { --bar-h: 76px; --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); }   /* долгое мягкое торможение */

[hidden] { display: none !important; }
section[id] { scroll-margin-block-start: 96px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }

/* --- Общие приёмы: заливка кнопки и подпись-«рулетка» --------------------- */
/* Кнопка с заливкой: при наведении цвет вползает слева, при уходе
   уезжает вправо. Цвет заливки задаёт --fill. */
.fill { position: relative; isolation: isolate; overflow: hidden; }
.fill::before { will-change: transform; content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fill, #fff); transform: scaleX(0); transform-origin: right center; transition: transform 700ms var(--ease-smooth); }
.fill:hover::before, .fill:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
/* Подпись-«рулетка»: при наведении строка уезжает вверх, а на её место
   снизу въезжает копия другого цвета. Копия скрыта от скринридеров. */
.roll { display: inline-grid; overflow: hidden; }
.roll > span { will-change: transform; grid-area: 1 / 1; display: block; transition: transform 700ms var(--ease-smooth); }
.roll > span + span { transform: translateY(115%); }
a:hover > .roll > span:first-child, a:focus-visible > .roll > span:first-child, button:hover > .roll > span:first-child { transform: translateY(-115%); }
a:hover > .roll > span + span, a:focus-visible > .roll > span + span, button:hover > .roll > span + span { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .roll > span, .fill::before { transition: none; } }

/* --- Шапка ----------------------------------------------------------------- */
/* Почти непрозрачная: при 86 % сквозь шапку просвечивали цветные блоки (красная форма окрашивала меню в бордовый) */
.site-bar { background: color-mix(in srgb, var(--color-bg) 97%, transparent); backdrop-filter: blur(14px); border-block-end: 0; min-block-size: var(--bar-h); }
.site-bar__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-bar__row > :last-child { justify-self: end; }

.logo { display: inline-flex; align-items: center; gap: 0.5em; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.logo__berry { inline-size: 1.9em; block-size: 1.9em; transition: transform 700ms var(--ease-smooth); }
/* Логотип — ссылка «на главную»: ягода покачивается при наведении, вся ссылка вжимается при нажатии. */
.logo:hover .logo__berry, .logo:focus-visible .logo__berry { transform: rotate(-16deg) scale(1.1); }
.logo { transition: scale 260ms var(--ease-smooth); }
.logo:active { scale: 0.96; }

.site-nav { display: flex; gap: var(--space-32); justify-self: center; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; color: var(--color-fg); }
.site-nav a { position: relative; transition: color 450ms var(--ease-smooth), scale 260ms var(--ease-smooth); }
.site-nav a::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: -4px; block-size: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 700ms var(--ease-smooth), background 300ms; }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
/* Когда курсор на другом пункте, подчёркивание текущего раздела убирается: иначе подчёркнутыми
   оказывались два пункта сразу (текущий и тот, на который навели). */
.site-nav:hover a.is-current:not(:hover):not(:focus-visible)::after { transform: scaleX(0); transform-origin: right; }
/* Нажатие: подчёркивание и подпись окрашиваются в акцент, ссылка вжимается.
   Текущий раздел отмечен постоянным подчёркиванием. */
.site-nav a:active { color: var(--color-accent); scale: 0.96; }
.site-nav a:active::after { transform: scaleX(1); background: var(--color-accent); }

/* «Get in touch»: пилюля, справа в ней отдельный белый кружок со стрелкой.
   При наведении белая заливка вползает слева, подпись прокатывается, кружок
   темнеет и разворачивает стрелку вверх-вправо. */
.site-talk { transform: translateZ(0); --fill: #fff; transition: scale 260ms var(--ease-smooth); display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 22px; border-radius: 999px; background: var(--color-accent); color: #fff; font-size: 0.9375rem; font-weight: 600; }
.site-talk .roll > span + span { color: var(--color-accent); }
.site-talk .chip { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: #fff; color: var(--color-accent); transition: background 700ms var(--ease-smooth), color 700ms var(--ease-smooth), transform 700ms var(--ease-smooth); }
.site-talk:hover .chip, .site-talk:focus-visible .chip { background: var(--color-accent); color: #fff; transform: rotate(-45deg); }
.site-talk:active { scale: 0.96; }

/* Меню: на широком экране строка как раньше (контейнер .site-menu «растворён»), на телефоне три полоски */
.site-menu { display: contents; }
.site-burger { display: none; }
.site-fab { display: none; }
@media (max-width: 900px) {
  .site-bar { padding-block: var(--space-8); background: var(--color-bg); }
  .site-bar__row { grid-template-columns: 1fr auto; gap: var(--space-8) var(--space-16); }
  .logo { font-size: 1rem; }
  /* три полоски */
  .site-burger { display: grid; place-content: center; gap: 6px; inline-size: 48px; block-size: 48px; margin-inline-end: -8px; border: 0; border-radius: 50%; background: transparent; color: var(--color-fg); cursor: pointer; }
  .site-burger span { display: block; inline-size: 24px; block-size: 2px; border-radius: 2px; background: currentColor; transition: transform 380ms var(--ease-smooth), opacity 240ms ease; }
  .site-bar.is-open .site-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .site-bar.is-open .site-burger span:nth-child(2) { opacity: 0; }
  .site-bar.is-open .site-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  /* панель меню под шапкой: ссылки крупные (палец попадает), «Get in touch» ниже */
  .site-menu { display: none; position: absolute; inset-inline: 0; inset-block-start: 100%; flex-direction: column; padding: var(--space-8) var(--page-margin, 16px) var(--space-24); background: var(--color-bg); border-block-end: 1px solid var(--color-line-soft); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45); }
  .site-bar.is-open .site-menu { display: flex; }
  .site-nav { flex-direction: column; gap: 0; justify-self: stretch; font-size: 1.25rem; }
  .site-nav a { display: flex; align-items: center; min-block-size: 56px; border-block-end: 1px solid var(--color-line-soft); }
  .site-nav a::after { display: none; }
  .site-nav a.is-current { color: #fff; font-weight: 600; }
  .site-talk { margin-block-start: var(--space-24); justify-content: space-between; min-block-size: 56px; padding: 6px 6px 6px 24px; font-size: 1rem; }
  .site-talk .chip { inline-size: 44px; block-size: 44px; }
  /* плавающая кнопка «вверх»: полупрозрачная, внизу справа, появляется после первого экрана */
  .site-fab { display: grid; place-items: center; position: fixed; z-index: 30; inset-inline-end: 16px; inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px)); inline-size: 52px; block-size: 52px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; background: rgba(13, 13, 12, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; cursor: pointer; opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity 320ms var(--ease-smooth), translate 320ms var(--ease-smooth), scale 200ms var(--ease-smooth); }
  .site-fab.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
  .site-fab:active { scale: 0.92; }
}
}

/* --- Подвал: белая панель с контактами и россыпью малин -------------------- */
.site-foot { position: relative; overflow: hidden; background: var(--panel-bg, #fff); color: var(--panel-fg, #0d0d0c); }
.site-foot__in { position: relative; z-index: 1; padding-block: var(--space-128); }
/* Россыпь малин на полу: холст на всю панель, под текстом (у .site-foot__in
   z-index выше), указатель сквозь него проходит. Рисует berry-floor.js. */
.site-floor { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; z-index: 0; }
.site-cap { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.5; color: var(--panel-muted, #6f6c69); }
.site-foot .site-cap { grid-column: 1 / 3; }
.site-foot__links { grid-column: 4 / 10; display: flex; flex-direction: column; font-size: clamp(2rem, 4.6vw, 4.5rem); font-weight: 700; letter-spacing: -0.048em; line-height: 0.94; text-transform: uppercase; }
.site-foot__links a { display: inline-block; width: fit-content; transition: transform 450ms var(--ease-smooth), color 450ms var(--ease-smooth); }
.site-foot__links a:hover, .site-foot__links a:focus-visible { transform: translateX(16px); color: var(--color-accent); }
.site-foot__where { grid-column: 10 / -1; display: flex; flex-direction: column; gap: var(--space-4); align-items: start; }
.site-foot__where .site-cap { grid-column: auto; }
.site-foot__note { font-size: 0.8125rem; line-height: 1.5; color: var(--panel-muted, #6f6c69); }
/* Стрелка «наверх» — единственная функциональная кнопка подвала. */
.site-foot__ends { display: flex; margin-block-start: var(--space-32); }
.site-up { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: var(--panel-fg, #0d0d0c); cursor: pointer; transition: background 450ms var(--ease-smooth), color 450ms var(--ease-smooth), transform 450ms var(--ease-smooth), scale 260ms var(--ease-smooth); }
.site-up:hover, .site-up:focus-visible { background: var(--panel-fg, #0d0d0c); color: #fff; transform: translateY(-4px); }
.site-up:active { scale: 0.96; }
.site-foot a:focus-visible, .site-foot button:focus-visible { outline-color: var(--panel-fg, #0d0d0c); }

@media (max-width: 900px) {
  .site-foot__in { padding-block: var(--space-64) var(--space-128); row-gap: var(--space-24); }
  .site-foot .site-cap, .site-foot__links, .site-foot__where { grid-column: 1 / -1; }
  /* ссылки подвала: строки по 68 px на всю ширину с линией и стрелкой, попасть пальцем легко */
  .site-foot__links { font-size: clamp(2rem, 10vw, 2.75rem); gap: 0; margin-block-end: var(--space-16); }
  .site-foot__links a { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; min-block-size: 68px; padding-block: 6px; border-block-end: 1px solid var(--panel-line); }
  .site-foot__links a:first-child { border-block-start: 1px solid var(--panel-line); }
  .site-foot__links a::after { content: '↗'; font-size: 0.5em; font-weight: 500; color: var(--panel-muted); }
  .site-foot__links a:hover, .site-foot__links a:focus-visible { transform: none; }
  .site-foot__where { padding-block-start: var(--space-16); }
}
}

/* --- Кнопка «Visit»: одна на всех страницах -------------------------------------
   Заливка вырастает кругом из точки, где курсор вошёл в кнопку (--mx/--my пишет
   chrome.js), подпись уезжает вверх и её место занимает дубль, стрелка улетает
   вправо-вверх и возвращается с другой стороны. Магнит — в chrome.js. */
.visit {
  --mx: 50%; --my: 50%;
  position: relative; display: inline-flex; align-items: center; gap: 0.8em;
  /* Одна высота у всех кнопок-пилюль (Visit site, Design system, In progress): 44 px */
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
  block-size: 44px; padding: 0 18px 0 20px; border-radius: 999px; overflow: hidden;
  background: var(--color-fg); color: var(--color-bg); isolation: isolate;
  transition: scale 260ms var(--ease-smooth);
  transform: translateZ(0); backface-visibility: hidden; clip-path: inset(0 round 999px);
}
.visit::before {
  content: ''; position: absolute; z-index: -1; inset-block-start: var(--my); inset-inline-start: var(--mx);
  inline-size: 260%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: var(--color-accent); scale: 0; will-change: scale;
  transition: scale 800ms var(--ease-smooth);
}
.visit:hover::before, .visit:focus-visible::before { scale: 1; }
.visit:active { scale: 0.96; }
.visit__label { position: relative; display: inline-block; overflow: hidden; }
.visit__label span { will-change: transform; display: block; transition: transform 700ms var(--ease-smooth), color 700ms var(--ease-smooth); }
.visit__label span + span { position: absolute; inset-block-start: 0; inset-inline-start: 0; transform: translateY(105%); }
.visit:hover .visit__label span, .visit:focus-visible .visit__label span { transform: translateY(-105%); color: var(--color-fg); }
.visit:hover .visit__label span + span, .visit:focus-visible .visit__label span + span { transform: translateY(0); }
.visit__arrow { position: relative; display: inline-block; inline-size: 1em; block-size: 1em; overflow: hidden; }
.visit__arrow span { will-change: transform; position: absolute; inset: 0; display: grid; place-items: center; transition: transform 700ms var(--ease-smooth), color 700ms var(--ease-smooth); }
.visit__arrow span + span { transform: translate(-90%, 90%); }
.visit:hover .visit__arrow span, .visit:focus-visible .visit__arrow span { transform: translate(90%, -90%); color: var(--color-fg); }
.visit:hover .visit__arrow span + span, .visit:focus-visible .visit__arrow span + span { transform: translate(0, 0); }
.panel .visit { background: var(--panel-fg); color: var(--panel-bg); }
.panel .visit:hover .visit__label span, .panel .visit:focus-visible .visit__label span,
.panel .visit:hover .visit__arrow span, .panel .visit:focus-visible .visit__arrow span { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .visit, .visit::before, .visit__label span, .visit__arrow span { transition: none; }
  .visit:hover::before, .visit:focus-visible::before { scale: 1; }
}
@media (max-width: 900px) { .site-foot__ends { display: none; } }   /* на телефоне «вверх» — плавающая кнопка */