/* Схемач — живость: мелочи, движение, фон.
 *
 * Подключается ПОСЛЕ glubina.css. Здесь то, что делает сайт
 * техничным и живым: бегущие блики, свечение под курсором,
 * пульсация, дорожки как на печатной плате.
 *
 * 🔴 Всё движение выключается при prefers-reduced-motion — целиком,
 * в конце файла. Человек мог настроить это не от каприза.
 */

/* ═══════════ дорожки печатной платы на фоне ═══════════ */

/* Тема продукта прямо в фоне: тонкие линии, как разводка на плате.
   Еле заметные — это подложка, а не украшение. */
.pervyj::before {
  background:
    /* медное свечение сверху */
    radial-gradient(ellipse 72% 58% at 50% 0%,
      rgba(217, 133, 69, .26) 0%,
      rgba(217, 133, 69, .07) 45%,
      transparent 74%),
    /* дорожки: вертикали и горизонтали разного шага */
    repeating-linear-gradient(90deg,
      transparent 0 118px,
      rgba(217, 133, 69, .055) 118px 119px),
    repeating-linear-gradient(0deg,
      transparent 0 96px,
      rgba(217, 133, 69, .04) 96px 97px);
  /* Дорожки растворяются к краям, иначе выглядят как разлиновка */
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 15%,
    #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 15%,
    #000 20%, transparent 78%);
}

/* ═══════════ свечение под курсором ═══════════ */

/* Карточка подсвечивается там, где мышь. Координаты приходят
   из obshhee.js как --mx/--my. Пока мышь не касалась — свечения
   нет вовсе (непрозрачность 0). */
.plitka,
.vid,
.chislo-plitka,
.plata-karta,
.karta,
.vopros {
  position: relative;
}

.plitka::after,
.vid::after,
.chislo-plitka::after,
.plata-karta::after,
.karta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s var(--plavno);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
    rgba(217, 133, 69, .16), transparent 62%);
}

.plitka:hover::after,
.vid:hover::after,
.chislo-plitka:hover::after,
.plata-karta:hover::after,
.karta:hover::after {
  opacity: 1;
}

/* Содержимое карточки должно лежать НАД свечением */
.plitka > *,
.vid > *,
.chislo-plitka > *,
.plata-karta > *,
.karta > * {
  position: relative;
  z-index: 2;
}

/* ═══════════ бегущий блик по кнопке ═══════════ */

/* Раз в несколько секунд по главной кнопке проходит блик —
   как отражение на металле. Не мигает, не дёргается. */
.knopka.glavnaja {
  position: relative;
  overflow: hidden;
}

.knopka.glavnaja::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  left: -60%;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .34) 50%, transparent);
  animation: blik 4.5s ease-in-out infinite;
}

@keyframes blik {
  0%, 62% { left: -60%; }
  86%, 100% { left: 130%; }
}

/* ═══════════ пометка «работает в России» ═══════════ */

/* Кольцо расходится от точки — признак живого состояния,
   как индикатор связи */
.tochka {
  position: relative;
}

.tochka::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--ok);
  opacity: 0;
  animation: kolco 2.6s ease-out infinite;
}

@keyframes kolco {
  0% { transform: scale(.7); opacity: .7; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}

/* ═══════════ значки в плитках ═══════════ */

/* Значок в медном квадрате — заметнее, чем голая линия */
.plitka .znachok {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(180deg,
    rgba(217, 133, 69, .18), rgba(217, 133, 69, .07));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 0 0 1px rgba(217, 133, 69, .22);
  transition: transform .25s var(--pruzhina),
              box-shadow .25s var(--plavno);
}

.plitka:hover .znachok {
  transform: scale(1.06) rotate(-3deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 0 1px var(--med-linija),
    0 0 18px -2px var(--med-svet);
}

/* ═══════════ числа ═══════════ */

/* Медная полоска снизу растёт при наведении */
.chislo-plitka {
  overflow: hidden;
}

.chislo-plitka::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent, var(--acc), transparent);
  transition: width .45s var(--plavno);
  z-index: 2;
}

.chislo-plitka:hover::before { width: 76%; }

/* ═══════════ снимки в разделе «как выглядит» ═══════════ */

.vid {
  overflow: hidden;
}

.vid img {
  transition: transform .5s var(--kino);
}

/* Лёгкое приближение: снимок оживает под курсором */
.vid:hover img {
  transform: scale(1.028);
}

/* Значок увеличения поверх снимка */
.vid::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  z-index: 3;
  border-radius: 8px;
  background:
    linear-gradient(rgba(21, 23, 28, .74), rgba(21, 23, 28, .74)),
    var(--panel);
  box-shadow:
    inset 0 .5px 0 rgba(255, 255, 255, .18),
    0 0 0 1px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .25s var(--plavno), transform .25s var(--pruzhina);
  /* Лупа рисуется фоном, чтобы не тащить картинку */
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D98545' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M15.5 15.5L20 20M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-size: 17px;
  background-position: center;
  background-repeat: no-repeat;
}

.vid:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* ═══════════ карточки проектов ═══════════ */

/* Снимок схемы чуть приближается, метка платы загорается */
.karta-snimok {
  transition: transform .5s var(--kino);
}

.karta:hover .karta-snimok {
  transform: scale(1.03);
}

.karta {
  overflow: hidden;
}

.karta-plata {
  transition: background-color .25s var(--plavno),
              box-shadow .25s var(--plavno);
}

.karta:hover .karta-plata {
  background: rgba(217, 133, 69, .2);
  box-shadow: 0 0 0 1px var(--med-linija);
}

/* ═══════════ шаги ═══════════ */

/* Номер шага загорается при наведении на строку */
.shagi li::before {
  transition: transform .25s var(--pruzhina),
              box-shadow .25s var(--plavno);
}

.shagi li:hover::before {
  transform: scale(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 0 16px -2px var(--med-svet),
    0 2px 6px rgba(0, 0, 0, .3);
}

/* ═══════════ вопросы ═══════════ */

.vopros {
  transition: box-shadow .25s var(--plavno),
              background-color .25s var(--plavno);
}

.vopros[open] {
  background: var(--sloj-2);
  box-shadow:
    inset 0 .5px 0 var(--kromka),
    0 0 0 1px var(--med-linija);
}

/* Ответ разворачивается плавно, а не выскакивает */
.vopros[open] p {
  animation: razvernut .35s var(--plavno);
}

@keyframes razvernut {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ═══════════ сравнительная таблица ═══════════ */

.sravnitelnaja tbody tr {
  transition: background-color .2s var(--plavno);
}

.sravnitelnaja tbody tr:hover {
  background: var(--sloj-1);
}

/* ═══════════ ссылки в тексте ═══════════ */

/* Подчёркивание вырастает, а не появляется разом */
.podval a,
.dve-kolonki a,
.vopros p a {
  text-decoration: none;
  background-image: linear-gradient(var(--acc), var(--acc));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s var(--plavno);
}

.podval a:hover,
.dve-kolonki a:hover,
.vopros p a:hover {
  background-size: 100% 1px;
  text-decoration: none;
}

/* ═══════════ полоса прокрутки ═══════════ */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 133, 69, .35) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(217, 133, 69, .3);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(217, 133, 69, .55);
  background-clip: content-box;
}

/* ═══════════ выделение текста ═══════════ */

::selection {
  background: rgba(217, 133, 69, .28);
  color: var(--text);
}

/* ═══════════ кому движение мешает ═══════════ */

@media (prefers-reduced-motion: reduce) {
  .knopka.glavnaja::after,
  .tochka::after {
    animation: none;
    display: none;
  }
  .vid:hover img,
  .karta:hover .karta-snimok,
  .plitka:hover .znachok,
  .shagi li:hover::before {
    transform: none;
  }
  .vopros[open] p { animation: none; }
  .chislo-plitka::before { transition: none; }
  .plitka::after, .vid::after, .chislo-plitka::after,
  .plata-karta::after, .karta::after { display: none; }
}

/* ═══════════ автор ═══════════ */

.avtor-blok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  align-items: start;
}

.avtor-glavnoe {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.avtor-foto.pobolshe {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  flex: none;
  object-fit: cover;
  box-shadow:
    inset 0 .5px 0 var(--kromka),
    0 0 0 1px var(--kontur),
    0 0 26px -6px var(--med-svet);
}

.avtor-foto.ogromno {
  width: 124px;
  height: 124px;
  border-radius: 24px;
  flex: none;
  object-fit: cover;
  box-shadow:
    inset 0 .5px 0 var(--kromka),
    0 0 0 1px var(--kontur),
    0 0 36px -8px var(--med-svet);
}

.avtor-shapka {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
}

.avtor-ssylki {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.avtor-slova p {
  margin: 0 0 14px;
  color: var(--text-dim);
  line-height: 1.65;
}

.rasskaz {
  max-width: 44em;
}
.rasskaz p {
  margin: 0 0 16px;
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.7;
}

/* Плитки-ссылки на проекты */
a.plitka { color: inherit; }
a.plitka:hover { text-decoration: none; }

/* ═══════════ сборки под системы ═══════════ */

/* Рядом с главной кнопкой: браузер мог ошибиться с системой,
   да и второй компьютер у человека бывает */
.drugie-sborki {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 13.5px;
}

.drugie-podpis { color: var(--text-faint); }

.drugie-sborki a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--text-dim);
  background: var(--sloj-1);
  box-shadow:
    inset 0 .5px 0 var(--kromka-tihaja),
    0 0 0 1px var(--kontur);
  transition: box-shadow .2s var(--plavno),
              background-color .2s var(--plavno),
              color .2s var(--plavno);
}

.drugie-sborki a:hover {
  color: var(--text);
  background: var(--sloj-2);
  box-shadow:
    inset 0 .5px 0 var(--kromka),
    0 0 0 1px var(--med-linija);
  text-decoration: none;
}

.drugie-sborki i {
  font-style: normal;
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* На странице версий — плитками, с размером */
.sborki-rjad {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sborka {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 16px;
  border-radius: 9px;
  color: var(--text-dim);
  background: var(--sloj-1);
  box-shadow:
    inset 0 .5px 0 var(--kromka-tihaja),
    0 0 0 1px var(--kontur);
  transition: box-shadow .2s var(--plavno),
              background-color .2s var(--plavno),
              transform .2s var(--plavno);
}

.sborka b { font-size: 14px; color: var(--text); font-weight: 600; }
.sborka i {
  font-style: normal;
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.sborka:hover {
  transform: translateY(-2px);
  background: var(--sloj-2);
  box-shadow:
    inset 0 .5px 0 var(--kromka),
    0 0 0 1px var(--med-linija),
    0 0 20px -6px var(--med-svet);
  text-decoration: none;
}

/* Основная сборка свежего выпуска — медная */
.sborka.glavnaja {
  background: linear-gradient(180deg, #E59A5E, #D98545 58%, #C2723A);
  color: #2A1B0F;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -2px 0 rgba(0, 0, 0, .18),
    0 0 18px -2px rgba(217, 133, 69, .30);
}
.sborka.glavnaja b { color: #2A1B0F; }
.sborka.glavnaja i { color: rgba(42, 27, 15, .7); }

/* ═══════════ значки систем ═══════════ */

.drugie-sborki a {
  align-items: center;
  gap: 7px;
}
.drugie-sborki a svg { flex: none; opacity: .75; }
.drugie-sborki a:hover svg { opacity: 1; color: var(--acc); }

/* На странице версий — значок слева, название и размер справа */
.sborka {
  flex-direction: row;
  align-items: center;
  gap: 11px;
  padding: 11px 17px;
}

.sborka-znak {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--med-fon);
  color: var(--acc);
  box-shadow: inset 0 0 0 1px rgba(217, 133, 69, .2);
  transition: background-color .2s var(--plavno),
              box-shadow .2s var(--plavno);
}

.sborka:hover .sborka-znak {
  background: rgba(217, 133, 69, .18);
  box-shadow: inset 0 0 0 1px var(--med-linija);
}

.sborka > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* У главной сборки значок на меди — делаем его тёмным */
.sborka.glavnaja .sborka-znak {
  background: rgba(42, 27, 15, .16);
  color: #2A1B0F;
  box-shadow: inset 0 0 0 1px rgba(42, 27, 15, .18);
}
.sborka.glavnaja:hover .sborka-znak {
  background: rgba(42, 27, 15, .24);
  box-shadow: inset 0 0 0 1px rgba(42, 27, 15, .28);
}

/* ═══════════ узкий экран ═══════════ */

/* Кнопка меню видна только когда пункты не помещаются */
.knopka-menju {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  place-items: center;
  color: var(--text-dim);
}
.knopka-menju:hover { background: var(--sloj-2); color: var(--text); }

@media (max-width: 680px) {
  /* 🔴 До 680 точек пункты меню не помещались в строку: она уезжала
     за край, и вся страница ехала вбок. Прячем их за кнопку. */
  .knopka-menju { display: grid; }

  .navigacija {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    background: var(--panel);
    box-shadow:
      inset 0 .5px 0 var(--kromka-tihaja),
      0 1px 0 var(--kontur),
      var(--ten-vysoko);
    /* Закрыто: не занимает места и не ловит нажатия */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s var(--plavno),
                transform .18s var(--plavno),
                visibility .18s;
  }

  .shapka { position: sticky; }
  .shapka-vnutri { position: relative; }

  .shapka.menju-otkryto .navigacija {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .navigacija a {
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 15px;
  }

  /* Название рядом со значком занимает место — оставляем значок */
  .znak { font-size: 16px; gap: 7px; }
}

/* Совсем узкие экраны: телефоны */
@media (max-width: 420px) {
  .obolochka { padding-inline: 16px; }

  .pervyj { padding-top: 52px; }
  .pervyj h1 { font-size: clamp(1.9rem, 8.5vw, 2.5rem); }

  /* Сборки в столбик: в строку они не помещаются */
  .drugie-sborki { gap: 7px; }
  .drugie-sborki a { font-size: 12.5px; padding: 5px 9px; }

  .sborki-rjad { flex-direction: column; }
  .sborka { width: 100%; }

  /* Числа по два в ряд, а не по одному */
  .chisla { grid-template-columns: repeat(2, 1fr); }

  /* Таблица сравнения шире экрана — даём прокрутку ей, не странице */
  .sravnitelnaja { font-size: 13px; }
  .sravnitelnaja th, .sravnitelnaja td { padding: 9px 8px; }
}

/* Таблица сравнения на любом узком экране прокручивается сама */
@media (max-width: 620px) {
  .razdel .sravnitelnaja {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .sravnitelnaja td { white-space: normal; min-width: 130px; }
}