/**
 * Pxl Gradient Sweep — самостоятельный виджет, без зависимостей.
 *
 * Подсвеченная градиентом маска: форма берётся из произвольного SVG/PNG
 * через CSS mask-image, а сам цвет — отдельный градиент "под маской". В
 * покое градиент плавно и бесконечно "перетекает" через фигуру в одну
 * сторону; при наведении курсора мышью (только там, где есть точный
 * указатель — мышь, а не палец) яркая точка следует за курсором; на
 * тач-устройствах — статичный градиент без анимации, никакой JS-нагрузки
 * (см. pxl-gradient-sweep.js — на таких устройствах он даже не подписывается
 * на события мыши).
 *
 * ПОДКЛЮЧЕНИЕ:
 *   <link rel="stylesheet" href="pxl-gradient-sweep.css">
 *   <script src="pxl-gradient-sweep.js"></script>
 *
 *   <div class="pxl-gradient-sweep" role="img" aria-label="Название"
 *        style="
 *          --pxl-sweep-mask: url('/path/to/shape.svg');
 *          aspect-ratio: 1598 / 161;
 *          max-width: 600px;
 *        "></div>
 *
 * НАСТРОЙКА — через CSS-переменные (на самом элементе или выше по каскаду,
 * например через класс шаблона/проекта):
 *   --pxl-sweep-mask         url(...) формы (ОБЯЗАТЕЛЬНО, дефолта нет)
 *   --pxl-sweep-color        яркий цвет в пике полосы (по умолчанию #00ba25)
 *   --pxl-sweep-shadow       цвет по краям/фон под градиентом (#0d1228)
 *   --pxl-sweep-edge         цвет на самих краях полосы (по умолчанию
 *                            transparent — сквозь него виден --pxl-sweep-shadow;
 *                            можно задать полупрозрачный акцентный цвет,
 *                            например rgba(0, 186, 37, .25), чтобы края были
 *                            не совсем "пустыми")
 *   --pxl-sweep-duration     длительность одного прохода в покое (5s)
 *   --pxl-sweep-angle        угол градиента (89.98deg)
 *   --pxl-sweep-rest         позиция полосы по умолчанию, 0-100% (45.56%)
 *   --pxl-sweep-band-before  ширина размытия ДО пика, в % (55.36%)
 *   --pxl-sweep-band-after   ширина размытия ПОСЛЕ пика, в % (64.59%)
 *
 * Требует поддержки CSS @property (Chrome/Edge 85+, Safari 16.4+,
 * Firefox 128+) — без неё просто не будет анимации (никаких ошибок,
 * фигура отрисуется статично в положении --pxl-sweep-rest).
 */
@property --pxl-sweep-pos {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 45.56%;
}

.pxl-gradient-sweep {
  --pxl-sweep-color: #00ba25;
  --pxl-sweep-shadow: #0d1228;
  --pxl-sweep-edge: rgba(0, 186, 37, .25);
  --pxl-sweep-duration: 5s;
  --pxl-sweep-angle: 89.98deg;
  --pxl-sweep-rest: 45.56%;
  --pxl-sweep-band-before: 55.36%;
  --pxl-sweep-band-after: 64.59%;
  --pxl-sweep-pos: var(--pxl-sweep-rest);

  display: block;
  width: 100%;

  -webkit-mask-image: var(--pxl-sweep-mask, none);
  mask-image: var(--pxl-sweep-mask, none);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;

  /* Цвет по краям — это фон под градиентом: там, где градиент прозрачный,
     видно именно его */
  background-color: var(--pxl-sweep-shadow);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: linear-gradient(
    var(--pxl-sweep-angle),
    var(--pxl-sweep-edge) calc(var(--pxl-sweep-pos) - var(--pxl-sweep-band-before)),
    var(--pxl-sweep-color) var(--pxl-sweep-pos),
    var(--pxl-sweep-edge) calc(var(--pxl-sweep-pos) + var(--pxl-sweep-band-after))
  );

  /* linear (не ease) — постоянная скорость, полоса именно "перетекает", а
     не замедляется у краёв; direction по умолчанию (normal, без alternate)
     — едет только в одну сторону, в конце цикла мгновенно "телепортируется"
     в начало, а не едет назад */
  animation: pxl-gradient-sweep-move var(--pxl-sweep-duration) linear infinite;

  /* Плавность при ведении курсором — см. pxl-gradient-sweep.js: он ловит
     момент входа в наведение в два шага именно ради того, чтобы этот
     transition реально сработал (переход "под управлением анимации ->
     обычное значение" в один присест никогда не анимируется, только
     "обычное -> обычное"). */
  transition: --pxl-sweep-pos .15s linear;
}

@keyframes pxl-gradient-sweep-move {
  from { --pxl-sweep-pos: -70%; }
  to   { --pxl-sweep-pos: 170%; }
}

/* Класс ставит/снимает pxl-gradient-sweep.js (не CSS :hover) — так у скрипта
   есть контроль над точным моментом отключения анимации, нужный для
   плавного "перехвата" (см. комментарий про transition выше). */
.pxl-gradient-sweep.is-hovering {
  animation: none;
}

/* Тач-устройства — статичный градиент, никакой анимации, чтобы не грузить
   устройство постоянной перерисовкой (pxl-gradient-sweep.js на них даже не
   подписывается на события мыши). */
@media (hover: none), (pointer: coarse) {
  .pxl-gradient-sweep {
    animation: none;
    --pxl-sweep-pos: var(--pxl-sweep-rest);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pxl-gradient-sweep {
    animation: none;
    --pxl-sweep-pos: var(--pxl-sweep-rest);
  }
}