.ifx-loop-scroll { width: 100%; }
.ifx-loop-scroll.can-scroll { overflow-x: auto; }

.ifx-loop {
  container-type: inline-size;
  container-name: ifxloop;
  box-sizing: border-box;
  width: 100%;
}
.ifx-loop *,
.ifx-loop *::before,
.ifx-loop *::after { box-sizing: border-box; }

.ifx-loop__head {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}
.ifx-loop__heading {
  margin: 0 0 10px;
  color: var(--ifx-heading);
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.ifx-loop__sub {
  color: var(--ifx-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.ifx-loop__sub > *:first-child { margin-top: 0; }
.ifx-loop__sub > *:last-child { margin-bottom: 0; }

.ifx-loop__stage {
  width: 100%;
  max-width: var(--ifx-max);
  margin: 0 auto;
}
.ifx-loop__ring { position: relative; width: 100%; }
.ifx-loop__svg { display: none; }

.ifx-loop__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.ifx-loop__list::before {
  content: "";
  position: absolute;
  left: calc(46px - var(--ifx-cw) / 2);
  top: 46px;
  bottom: 46px;
  width: var(--ifx-cw);
  background-image: linear-gradient(to bottom, var(--ifx-line-a), var(--ifx-line-b), var(--ifx-line-a));
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 8px, transparent 8px 16px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 8px, transparent 8px 16px);
  -webkit-mask-size: 100% 16px;
  mask-size: 100% 16px;
  animation: ifx-loop-flow-v 1.6s linear infinite;
}
.ifx-loop__ring.no-line .ifx-loop__list::before { display: none; }

.ifx-loop__node {
  --ifx-lfs: min(0.145, calc(1.05 / var(--ifx-len)));
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}

.ifx-loop__circle {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--ifx-dstack);
  height: var(--ifx-dstack);
  padding: 0;
  border: var(--ifx-ringw) solid var(--ifx-accent);
  border-radius: 50%;
  background: var(--ifx-fill);
  text-align: center;
  text-decoration: none;
  transition: transform 0.32s cubic-bezier(0.34, 1.32, 0.64, 1), box-shadow 0.32s ease;
}
a.ifx-loop__circle,
a.ifx-loop__circle:hover,
a.ifx-loop__circle:focus { text-decoration: none; font-weight: 700 !important; }

.ifx-loop__label {
  display: block;
  flex: 0 0 auto;
  color: var(--ifx-label) !important;
  font-size: max(10px, calc(var(--ifx-dstack) * var(--ifx-lfs) * var(--ifx-icf)));
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  line-height: 1.05;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.ifx-loop__icon {
  display: block;
  flex: 0 0 auto;
  margin-bottom: 4px;
  color: var(--ifx-label);
  line-height: 1;
}
.ifx-loop__icon svg {
  width: calc(var(--ifx-dstack) * 0.17);
  height: calc(var(--ifx-dstack) * 0.17);
  fill: currentColor;
}

.ifx-loop__caption {
  margin: 0;
  color: var(--ifx-caption);
  font-size: 0.95rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.ifx-loop.is-reveal .ifx-loop__node {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--ifx-delay);
}
.ifx-loop.is-reveal.is-visible .ifx-loop__node {
  opacity: 1;
  transform: translateY(0);
}

.ifx-loop.lay-ring:not(.no-ring) { min-width: 540px; }

@keyframes ifx-loop-flow {
  to { stroke-dashoffset: var(--ifx-offset); }
}
@keyframes ifx-loop-flow-v {
  to { -webkit-mask-position: 0 16px; mask-position: 0 16px; }
}

@supports (width: 1cqw) {
  @container ifxloop (min-width: 520px) {
    .ifx-loop:not(.no-ring) .ifx-loop__stage {
      padding: max(52px, 8cqw) 10px max(64px, 10cqw);
    }
    .ifx-loop:not(.no-ring) .ifx-loop__ring {
      container-type: inline-size;
      aspect-ratio: 1 / 1;
    }
    .ifx-loop:not(.no-ring) .ifx-loop__svg {
      display: block;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .ifx-loop:not(.no-ring) .ifx-loop__path.is-flowing {
      animation: ifx-loop-flow var(--ifx-dur) linear infinite;
    }
    .ifx-loop:not(.no-ring) .ifx-loop__list {
      position: absolute;
      inset: 0;
      display: block;
      gap: 0;
    }
    .ifx-loop:not(.no-ring) .ifx-loop__list::before { display: none; }

    .ifx-loop:not(.no-ring) .ifx-loop__node {
      position: absolute;
      left: 0;
      width: 100%;
      height: 0;
      top: var(--ifx-y);
      display: block;
      gap: 0;
    }

    .ifx-loop:not(.no-ring) .ifx-loop__circle {
      position: absolute;
      left: var(--ifx-x);
      top: 0;
      width: var(--ifx-d);
      height: var(--ifx-d);
      padding: 0;
      transform: translate(-50%, -50%);
    }
    .ifx-loop:not(.no-ring) .ifx-loop__label {
      font-size: max(12px, calc(var(--ifx-d) * var(--ifx-lfs) * var(--ifx-icf)));
      letter-spacing: 0.055em;
    }
    .ifx-loop:not(.no-ring) .ifx-loop__icon {
      margin-bottom: 0.6cqw;
    }
    .ifx-loop:not(.no-ring) .ifx-loop__icon svg {
      width: max(14px, calc(var(--ifx-d) * 0.17));
      height: max(14px, calc(var(--ifx-d) * 0.17));
    }

    .ifx-loop:not(.no-ring) .ifx-loop__caption {
      position: absolute;
      left: var(--ifx-x);
      top: calc(var(--ifx-d) / 2 + 3.4cqw);
      width: var(--ifx-cap);
      transform: translateX(-50%);
      text-align: center;
      font-size: max(12.5px, 2.05cqw);
    }
    .ifx-loop:not(.no-ring) .ifx-loop__node.cap-above .ifx-loop__caption {
      top: auto;
      bottom: calc(var(--ifx-d) / 2 + 3.4cqw);
    }

    .ifx-loop:not(.no-ring).hv-scale .ifx-loop__circle:hover,
    .ifx-loop:not(.no-ring).hv-both .ifx-loop__circle:hover {
      transform: translate(-50%, -50%) scale(1.07);
    }
  }
}

.ifx-loop.hv-glow .ifx-loop__circle:hover,
.ifx-loop.hv-both .ifx-loop__circle:hover {
  box-shadow: 0 0 0 4px rgba(var(--ifx-accent-rgb), 0.16), 0 0 26px rgba(var(--ifx-accent-rgb), 0.5);
}
.ifx-loop.hv-scale .ifx-loop__circle:hover {
  transform: scale(1.06);
}
.ifx-loop.hv-both .ifx-loop__circle:hover {
  transform: scale(1.06);
}
a.ifx-loop__circle:focus-visible {
  outline: 3px solid var(--ifx-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ifx-loop__path.is-flowing,
  .ifx-loop__list::before { animation: none !important; }
  .ifx-loop.is-reveal .ifx-loop__node {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ifx-loop__circle { transition: none; }
}