/* ─────────────────────────────────────────────────────────────────────────
   ПОЛИРОВКА ПОРТФОЛИО — слой поверх style.css автора.
   Задача (andrianov, 03.09.2026): убрать текстовый курсор с блоков, оживить
   клики, привести анимации к одному языку и убрать «оборванность» — когда
   что-то возникает и пропадает рывком.

   Концепт автора не трогаем: те же цвета, те же карточки, та же типографика.
   Меняется только поведение — как элемент отвечает на курсор и как он
   появляется. Словарь движения взят с нашей панели onlyfarms: одна кривая
   cubic-bezier(.2,.7,.15,1), 140 мс на отклик, 240–340 мс на раскрытие.

   Файл отдельный, потому что автор присылает архив целиком: при обновлении
   сайта style.css перезаписывается, а этот слой остаётся.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --rz-ease: cubic-bezier(.2, .7, .15, 1);
  --rz-fast: 140ms;
  --rz-mid: 240ms;
  --rz-slow: 340ms;
  --rz-lift: 0 18px 44px rgba(23, 50, 77, .13);
}

/* ── 1. КУРСОР ────────────────────────────────────────────────────────────
   Было: над карточками, плашками и заголовками курсор превращался в «палочку»
   для выделения текста — страница выглядела как документ, а не как сайт.
   Стало: стрелка везде, «рука» только там, куда действительно можно нажать,
   «палочка» — только в полях ввода. Текст при этом выделяется как и раньше. */
html, body,
h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small, figcaption, dl, dd, dt,
.panel, .metric, .work-card, .sample, .archive-item, .archive-box, .skill,
.case-context, .timeline__item, .company-map__group, .concept-material,
.concept-evidence, .process__item, .contact-card, .stat, .shows, .eyebrow,
.section, .hero, .wrap {
  cursor: default;
}

a, button, summary, label, [role="button"], .doc-btn, .button, .case-link,
.portrait-card, .concept-visual__open {
  cursor: pointer;
}

.concept-visual__open { cursor: zoom-in; }
input, textarea, select { cursor: text; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* ── 2. ОТКЛИК НА НАЖАТИЕ ─────────────────────────────────────────────────
   Кнопка, у которой нет состояния «нажата», всегда кажется сломанной: палец
   уже нажал, а на экране ничего. Даём всем кликабельным короткий отклик. */
a, button, summary, .doc-btn, .button, .case-link, .text-link {
  transition:
    transform var(--rz-fast) var(--rz-ease),
    box-shadow var(--rz-fast) var(--rz-ease),
    border-color var(--rz-fast) var(--rz-ease),
    background-color var(--rz-fast) var(--rz-ease),
    color var(--rz-fast) var(--rz-ease),
    opacity var(--rz-fast) var(--rz-ease);
}

.doc-btn:hover, .button:hover { transform: translateY(-2px); }
.doc-btn:active, .button:active,
.case-link:active, .work-card:active, .portrait-card:active {
  transform: translateY(0) scale(.994);
  transition-duration: 60ms;
}

/* Стрелки внутри кнопок подаются вперёд — жест «сюда», а не просто символ */
.doc-btn:hover .doc-btn__icon,
.button:hover .button__icon { transform: translateX(2px); }
.doc-btn__icon, .button__icon { transition: transform var(--rz-fast) var(--rz-ease); }

/* ── 3. КУДА Я ПОПАЛ ──────────────────────────────────────────────────────
   Главная причина ощущения «кликаешь — ничего не происходит»: карточки
   01/02/03 ведут якорями к своим разделам, страница туда доезжает, но взгляд
   не успевает понять, что что-то изменилось. Цель клика теперь коротко
   подсвечивается — это и есть ответ страницы. */
:target {
  animation: rz-target 1700ms var(--rz-ease) 1;
}

@keyframes rz-target {
  0%   { box-shadow: 0 0 0 0 rgba(7, 156, 145, 0); }
  18%  { box-shadow: 0 0 0 5px rgba(7, 156, 145, .20); }
  100% { box-shadow: 0 0 0 24px rgba(7, 156, 145, 0); }
}

/* ── 4. РАСКРЫТИЕ БЛОКОВ ──────────────────────────────────────────────────
   Было: <details> распахивался мгновенным рывком — содержимое возникало из
   ниоткуда и толкало страницу. Стало: разворачивается за 340 мс, с лёгким
   выездом сверху. Приём взят с панели (там это `an-detail-in`). */
details[open] > .sample__content,
details[open] > .archive-item__content,
details[open] > .concept-material__body,
details[open] > .concept-evidence__body,
details[open] > div:not([class]),
details[open] > .full-archive__body {
  animation: rz-open var(--rz-slow) var(--rz-ease) both;
}

@keyframes rz-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Знаки «+ / −» и стрелки поворачиваются плавно, а не перещёлкиваются */
.concept-evidence summary::after,
.concept-material summary::after,
.archive-toggle__icon,
.sample__toggle {
  transition: transform var(--rz-mid) var(--rz-ease), color var(--rz-fast) var(--rz-ease);
}

/* Строка-заголовок раскрывающегося блока подсвечивается под курсором —
   видно, что по ней можно нажать, ещё до клика */
.sample summary:hover,
.archive-item summary:hover,
.concept-material summary:hover {
  background: rgba(23, 50, 77, .035);
}

.sample summary,
.archive-item summary,
.concept-material summary {
  border-radius: inherit;
  transition: background-color var(--rz-fast) var(--rz-ease);
}

/* ── 5. КАРТОЧКИ ──────────────────────────────────────────────────────────
   У автора уже был подъём на hover, но с разным временем в разных местах —
   отсюда ощущение, что блоки живут каждый своей жизнью. Сводим к одному
   времени и одной кривой. Сам вид карточек не меняем. */
.case-link, .work-card, .metric, .skill, .archive-item, .sample, .contact-card {
  transition:
    transform var(--rz-fast) var(--rz-ease),
    box-shadow var(--rz-fast) var(--rz-ease),
    border-color var(--rz-fast) var(--rz-ease);
}

.case-link:hover { transform: translateY(-4px); box-shadow: var(--rz-lift); }
.skill:hover { transform: translateY(-2px); }

/* Картинка в карточке чуть приближается — карточка отвечает целиком */
.work-card { overflow: hidden; }
.work-card__image { transition: transform 420ms var(--rz-ease); }
.work-card:hover .work-card__image { transform: scale(1.03); }

/* ── 6. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ───────────────────────────────────────────
   Было .65s с другой кривой — заметно медленнее всего остального на странице.
   Приводим к общему языку: короче и с той же кривой, чтобы блоки «доезжали»
   вместе с прокруткой, а не догоняли её. */
.reveal {
  transition:
    opacity 420ms var(--rz-ease),
    transform 420ms var(--rz-ease);
}

/* ── 7. ФИЛЬТР АРХИВА ─────────────────────────────────────────────────────
   При наборе в поиске оставшиеся карточки просто выпрыгивали. Теперь они
   мягко проявляются — глазу видно, что список пересобрался. */
[data-archive-item]:not([hidden]),
[data-illum-item]:not([hidden]) {
  animation: rz-filter-in var(--rz-mid) var(--rz-ease) both;
}

@keyframes rz-filter-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Пустой результат поиска тоже должен приходить плавно */
#archive-empty, #illum-archive-empty {
  animation: rz-filter-in var(--rz-mid) var(--rz-ease) both;
}

/* ── 8. ОКНА ──────────────────────────────────────────────────────────────
   Читалка документов, портрет и лайтбокс открывались мгновенной вспышкой.
   Теперь и фон, и само окно приезжают за 240 мс. */
dialog[open] {
  animation: rz-dialog-in var(--rz-mid) var(--rz-ease) both;
}

dialog[open]::backdrop {
  animation: rz-backdrop-in var(--rz-mid) ease both;
}

@keyframes rz-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes rz-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 9. ШАПКА ─────────────────────────────────────────────────────────────
   На прокрутке шапка получает тонкую линию и лёгкое стекло — граница между
   меню и содержимым перестаёт «прилипать» к тексту. */
.topbar {
  transition:
    box-shadow var(--rz-mid) var(--rz-ease),
    background-color var(--rz-mid) var(--rz-ease),
    backdrop-filter var(--rz-mid) var(--rz-ease);
}

.topbar.is-stuck {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: 0 1px 0 rgba(23, 50, 77, .10), 0 10px 30px rgba(23, 50, 77, .06);
}

/* Пункт меню подчёркивается растущей линией, а не резкой сменой цвета */
.nav a {
  position: relative;
  transition: color var(--rz-fast) var(--rz-ease);
}

.nav a::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: .75;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--rz-mid) var(--rz-ease);
  content: "";
}

.nav a:hover::after,
.nav a:focus-visible::after,
.nav a.is-current::after { transform: scaleX(1); }

/* ── 10. ПОЛОСА ЧТЕНИЯ ────────────────────────────────────────────────────
   Страница длинная. Тонкая линия сверху показывает, сколько прочитано —
   ничего не загораживает и не отвлекает. */
.rz-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  pointer-events: none;
}

.rz-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #079c91, #2f6eae);
  transform-origin: left center;
  transition: width 90ms linear;
}

/* ── 11. КЛАВИАТУРА ──────────────────────────────────────────────────────
   Кольцо фокуса у автора было, но одинаково толстым для всего. Делаем его
   мягче и в цвет акцента — заметно, но не грубо. */
:focus-visible {
  outline: 2px solid rgba(7, 156, 145, .65);
  outline-offset: 3px;
  border-radius: 8px;
  transition: outline-offset var(--rz-fast) var(--rz-ease);
}

/* ── 12. КАРТИНКИ ────────────────────────────────────────────────────────
   Изображения проявляются, а не выпрыгивают, когда догрузились. */
.concept-visual__open img,
.work-card__image {
  animation: rz-img-in 420ms var(--rz-ease) both;
}

@keyframes rz-img-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.concept-visual__open { overflow: hidden; border-radius: inherit; }
.concept-visual__open img { transition: transform 480ms var(--rz-ease); }
.concept-visual__open:hover img { transform: scale(1.025); }

/* ── 13. ЧЕСТНОСТЬ К НАСТРОЙКАМ ──────────────────────────────────────────
   Если человек попросил систему не анимировать — не анимируем ничего. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rz-progress { display: none; }
}

/* Печать: полоса чтения и подсветки на бумаге не нужны */
@media print {
  .rz-progress { display: none !important; }
  :target { animation: none !important; }
}