/* ============================================================
   ЖИЗНЬ В 3D-СЛОТАХ

   Картинки в слотах [data-art] стоят неподвижно, и на длинной
   странице это заметно: вокруг всё дышит — луч идёт по заголовку,
   у кнопок отрисовывается контур, — а предмет застыл.

   Три движения, и все они ничего не стоят:
     1. парение по вертикали — здесь, на CSS;
     2. дыхание свечения под предметом — тоже здесь;
     3. доворот за курсором — в art-motion.js, инлайновым стилем.

   ПОЧЕМУ НЕ ВИДЕО. Считали 03.09.2026: image-to-video у GPTunnel
   стоит 30 ₽ за ролик (дешёвая модель за 6.8 ₽ не подходит —
   ей нужен исходный ролик, это перенос движения). Двенадцать
   слотов — 360 ₽ и несколько мегабайт на страницу, которые
   поедут в трафик телефона. Это движение стоит ноль и весит ноль.

   ДВИЖЕНИЕ РАЗНЕСЕНО ПО ДВУМ ЭЛЕМЕНТАМ намеренно: парение живёт
   на <img>, доворот — на самом слоте. Пиши оба в один transform —
   и они затрут друг друга.
   ============================================================ */

/* Слот получает точку отсчёта для свечения и для доворота.

   ИСКЛЮЧЕНИЕ .svc__art — не придирка, а исправление поломки:
   в карточках услуг знак стоит `position:absolute` в углу карточки,
   и общее `position:relative` вернуло его в поток. Главная выросла
   на 485px (5853 → 6338), пока это не поймали замером. Абсолютный
   элемент и так сам себе система координат, свечению этого хватает. */
[data-art]:has(img):not(.svc__art){
  position:relative;
}
[data-art]:has(img){
  transform-style:preserve-3d;
  transition:transform .5s var(--ease);
}

/* Картинка выше подсветки. Ни у одной из них нет отрицательного
   z-index: слой с ним проваливается под фон страницы, если у предка
   нет своего контекста наложения — на этом уже спотыкались
   с обоймой космоса 31.08. */
[data-art] img{
  position:relative;
  z-index:1;
  animation:art-float 9s ease-in-out infinite;
  animation-delay:var(--ad, 0s);
}

/* Парение. Амплитуда нарочно маленькая: предмет должен казаться
   висящим, а не подпрыгивать. На 170px в каталоге 5px — это 3%
   высоты, у глаза это читается как «висит». */
@keyframes art-float{
  0%, 100%{ transform:translate3d(0, -4px, 0); }
  50%     { transform:translate3d(0,  4px, 0); }
}

/* Дыхание свечения. В самой картинке свет запечён и неподвижен;
   это пятно под предметом добавляет ему пульс. Цвет — акцентный
   токен, поэтому на странице 1С оно жёлтое само собой. */
[data-art]:has(img)::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:6%;
  width:56%;
  aspect-ratio:2 / 1;
  transform:translateX(-50%);
  border-radius:50%;
  /* Без filter:blur — градиент и так мягкий, а размытие на анимированном
     слое единственное здесь, что стоило бы кадров. Анимируются только
     opacity и transform: их браузер отдаёт композитору и не перерисовывает. */
  background:radial-gradient(closest-side,
             rgba(var(--accent-rgb), .26), rgba(var(--accent-rgb), 0) 72%);
  animation:art-pulse 9s ease-in-out infinite;
  animation-delay:var(--ad, 0s);
  pointer-events:none;
  z-index:0;
}

@keyframes art-pulse{
  0%, 100%{ opacity:.45; transform:translateX(-50%) scale(.92); }
  50%     { opacity:.85; transform:translateX(-50%) scale(1.06); }
}

/* Кому движение мешает — тому его нет. Правило общее по сайту,
   но здесь повторено: анимаций тут три, и отключать их надо все. */
@media (prefers-reduced-motion: reduce){
  [data-art] img,
  [data-art]:has(img)::after{ animation:none; }
  [data-art]:has(img){ transition:none; }
}