/* ДЫХАНИЕ — общий язык движения приложения (КОД_ДИЗАЙНА §9).
 *
 * Размытые пятна с РАЗНЫМИ ВЗАИМНО ПРОСТЫМИ периодами (17, 23, 29, 37 с): их
 * рисунок повторяется раз в несколько часов, поэтому глаз не ловит цикл и экран
 * не выглядит зациклённой гифкой. Низкий потолок яркости, мягкость — от самого
 * градиента.
 *
 * ПОЧЕМУ НЕ filter:blur. Размытие пересчитывается на КАЖДОМ кадре, и на телефоне
 * это заметная задержка при открытии экрана. Плавные стопы градиента дают ту же
 * мягкость даром, а браузеру остаётся двигать готовую картинку: transform и
 * opacity считает видеокарта.
 *
 * Как пользоваться: слой кладётся первым ребёнком в блок с `position:relative`
 * или `position:fixed`, содержимое — над ним со своим `z-index`.
 *
 *     <div class="dyhanie" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
 *
 * Тише или ярче — переменной `--dyh`, это множитель прозрачности всего слоя:
 * `.myblock .dyhanie{--dyh:.5}`. Слой сам себя не обрезает по краям: если блок
 * не во весь экран, ему нужен `overflow:hidden`, а свечение обязано гаснуть ДО
 * линии реза — иначе на срезе читается прямая линия (КОД_ДИЗАЙНА §9).
 *
 * ЭТО ПРОСТОЙ ВАРИАНТ, И ОН ВЫБРАН НАРОЧНО. 19.08.2026 из него собирали
 * богатую версию: яркое место чуть выше середины экрана, лучи из него, шесть
 * облаков, общий такт вдох-выдох 11 секунд, разные фазы у слоёв, виньетка.
 * Владелец в тот же день вернул прежний вариант. Богатая версия сохранена:
 * `11_Дизайн/Черновики/dyhanie-версия-19.08-яркое-место.css.txt`, разбор — в
 * хронике за 19 августа. Не пересобирайте её заново, если однажды захочется:
 * возьмите оттуда.
 *
 * Это ТРЕТЬЕ место с дыханием после шапки «Памяти о клиентах» и главной
 * карточки витрины — и первое общее. Те два переедут сюда отдельным шагом:
 * они обрезаны своими масками, и переносить их заодно с новым экраном значит
 * трогать живое без нужды (32_Общие_кусочки.md).
 */
.dyhanie{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  opacity:var(--dyh, 1); transition:opacity .6s ease}
.dyhanie i{position:absolute; display:block; border-radius:50%;
  will-change:transform, opacity}

/* Четыре пятна по углам: синее и фиолетовое — основные, зелёное и янтарное
   держатся в тени и лишь подкрашивают. Цвета — из палитры (COLORS.md). */
.dyhanie i:nth-child(1){left:-25%; top:-20%; width:85%; height:60%;
  background:radial-gradient(closest-side, rgba(90,147,232,.55), rgba(90,147,232,.22) 42%, rgba(90,147,232,.06) 68%, transparent 88%);
  animation:dyh1 17s ease-in-out infinite}
.dyhanie i:nth-child(2){right:-25%; top:-5%; width:80%; height:55%;
  background:radial-gradient(closest-side, rgba(127,119,221,.5), rgba(127,119,221,.2) 42%, rgba(127,119,221,.05) 68%, transparent 88%);
  animation:dyh2 23s ease-in-out infinite}
.dyhanie i:nth-child(3){left:-15%; bottom:-20%; width:75%; height:55%;
  background:radial-gradient(closest-side, rgba(86,179,123,.34), rgba(86,179,123,.13) 42%, rgba(86,179,123,.03) 68%, transparent 88%);
  animation:dyh3 29s ease-in-out infinite}
.dyhanie i:nth-child(4){right:-10%; bottom:-15%; width:65%; height:50%;
  background:radial-gradient(closest-side, rgba(224,160,64,.24), rgba(224,160,64,.09) 42%, rgba(224,160,64,.02) 68%, transparent 88%);
  animation:dyh4 37s ease-in-out infinite}

@keyframes dyh1{
  0%,100%{transform:translate3d(0,0,0) scale(.9);       opacity:.5}
  30%    {transform:translate3d(16%,7%,0) scale(1.18);  opacity:1}
  65%    {transform:translate3d(-9%,-5%,0) scale(1);    opacity:.6}
}
@keyframes dyh2{
  0%,100%{transform:translate3d(0,0,0) scale(1.05);     opacity:.75}
  40%    {transform:translate3d(-18%,9%,0) scale(.85);  opacity:.35}
  75%    {transform:translate3d(10%,-6%,0) scale(1.2);  opacity:.95}
}
@keyframes dyh3{
  0%,100%{transform:translate3d(0,0,0) scale(1);        opacity:.42}
  45%    {transform:translate3d(20%,-10%,0) scale(1.25);opacity:.8}
  80%    {transform:translate3d(-7%,6%,0) scale(.9);    opacity:.3}
}
@keyframes dyh4{
  0%,100%{transform:translate3d(0,0,0) scale(1.1);      opacity:.3}
  35%    {transform:translate3d(-20%,-8%,0) scale(.8);  opacity:.6}
  70%    {transform:translate3d(8%,7%,0) scale(1.05);   opacity:.22}
}

/* Кому движение мешает — тому статичное свечение, а не мигание (КОД_ДИЗАЙНА §9) */
@media (prefers-reduced-motion:reduce){
  .dyhanie i{animation:none; opacity:.35}
}