/* states.css — стили состояний, которые раньше задавал main.js через element.style.
   JS теперь только переключает классы / CSS-переменные, а как это выглядит — здесь.
   Подключать после main.css и home.css. */

/* ---------- Палитра для canvas в hero (читается из main.js) ---------- */
:root {
    --cool-rgb:      0, 102, 255;       /* синий: «холодные» частицы */
    /* --accent-rgb (красный, «горячие» частицы) уже объявлен в main.css */
    --hero-bg:       #11151B;           /* заливка canvas */
    --hero-trail:    rgba(9, 11, 14, .09); /* полупрозрачная заливка кадра — длина «хвостов» частиц */
    --hero-line-rgb: 147, 151, 171;     /* серые окружности и линии узла */
  }
  
  /* ---------- Шапка: фон после прокрутки (класс .is-scrolled) ---------- */
  .site-header.is-scrolled {
    background: rgba(17, 21, 27, .78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: #23262E;
  }
  
  /* ---------- Полоса прогресса «Процесс» (JS ставит --progress: 0..1) ---------- */
  #processTrack [data-progress] {
    width: calc(var(--progress, 0) * 100%);
  }
  
  /* ---------- Схема контура: подсветка узла при наведении ---------- */
  #loopDiagram [data-node] {
    transition: opacity 250ms;
  }
  #loopDiagram.is-focusing [data-node] {
    opacity: .42;
  }
  #loopDiagram.is-focusing [data-node].is-active {
    opacity: 1;
  }
  
  /* ---------- Модалка: блокировка прокрутки страницы ---------- */
  body.modal-open {
    overflow: hidden;
  }