.xybix-results-wrap svg {
  width: 100% !important;
  height: auto !important;
}

#xybixSvg .seg {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.1, 1), opacity 0.7s;
  opacity: 0;
  will-change: transform, opacity;
}

/* Направления для каждой секции */
#left-xybix.seg {
  --off: translateX(-64px);
  --in: translateX(0);
  --out: translateX(-64px);
}
#right-xybix.seg {
  --off: translateX(64px);
  --in: translateX(0);
  --out: translateX(64px);
}
#center-xybix.seg {
  --off: translateY(64px);
  --in: translateY(0);
  --out: translateY(64px);
}

/* Базовое состояние (перед входом в вьюпорт) */
#xybixSvg .seg {
  transform: var(--off);
}

/* Когда во вьюпорте — собираемся в центр и проявляемся */
#xybixSvg.is-in .seg {
  transform: var(--in);
  opacity: 1;
}

/* Вне вьюпорта — уезжаем туда, откуда прилетали, и скрываемся */
#xybixSvg.is-out .seg {
  transform: var(--out);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  #xybixSvg .seg {
    transition: none;
    transform: none !important;
    opacity: 1 !important;
  }
}