/* Сравнение двух состояний картинки по скроллу (бывш. .image-processor +
   scroll-change.js): пока блок ниже середины окна, видна вторая картинка;
   когда его центр поднимается выше середины — она гаснет и остаётся первая.
   Класс .passed ставит js/compare.js; тап (клик) переворачивает текущее
   состояние (.toggled). Обе картинки одного размера.

   <div class="ids__compare" style="--ratio: 1920 / 1235">
     <img src="on.png" alt=""><img src="off.png" alt="">
   </div> */

.ids .ids__compare {
  position: relative;
  aspect-ratio: var(--ratio, 1920 / 1235);
  margin-top: var(--shift__illustration-gap);
  margin-bottom: var(--shift__illustration-gap);
  cursor: pointer;

  & img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity var(--ids__duration-base) ease;
  }

  &.passed:not(.toggled) img:last-child,
  &.toggled:not(.passed) img:last-child {
    opacity: 0;
  }
}