.process-ring.process-scroll-ready {
  --process-turn: 0deg;
  isolation: isolate;
  will-change: box-shadow;
  transition: box-shadow .35s ease;
}

.process-ring.process-scroll-ready::before {
  animation: none;
  transform: rotate(var(--process-turn));
  will-change: transform;
}

.process-ring.process-scroll-ready::after {
  transform: scale(var(--process-scale, 1));
  transition: transform .18s linear;
}

.process-ring.process-scroll-ready .ring-center {
  position: relative;
}

.process-ring.process-scroll-ready .ring-center::before {
  position: absolute;
  z-index: -1;
  inset: -42px;
  content: "";
  opacity: var(--process-glow-opacity, .24);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(120, 103, 255, .17),
    rgba(36, 214, 208, .045) 48%,
    transparent 72%
  );
  transform: scale(var(--process-glow-scale, .92));
  transition: opacity .2s linear, transform .2s linear;
}

.process-ring.process-scroll-ready .process-node {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  color: var(--muted);
  border-color: rgba(124, 105, 255, .2);
  will-change: transform;
  transition:
    color .32s ease,
    border-color .32s ease,
    background .32s ease,
    box-shadow .32s ease;
}

.process-ring.process-scroll-ready .process-node::before {
  position: absolute;
  top: 9px;
  width: 4px;
  height: 4px;
  content: "";
  opacity: .42;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
  transition: opacity .32s ease, transform .32s ease;
}

.process-ring.process-scroll-ready .process-node.is-active {
  color: #d9d3ff;
  border-color: rgba(157, 143, 255, .76);
  background:
    radial-gradient(
      circle at 50% 24%,
      rgba(120, 103, 255, .2),
      transparent 52%
    ),
    var(--ink-2);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, .34),
    0 0 28px rgba(120, 103, 255, .2),
    inset 0 0 18px rgba(120, 103, 255, .08);
}

.process-ring.process-scroll-ready .process-node.is-active::before {
  opacity: 1;
  transform: scale(1.45);
}

.process-ring.process-scroll-ready .process-node.is-active small {
  color: var(--text);
}

[data-theme="light"] .process-ring.process-scroll-ready .process-node.is-active {
  color: #4e3fb8;
  background:
    radial-gradient(
      circle at 50% 24%,
      rgba(120, 103, 255, .13),
      transparent 52%
    ),
    var(--ink-2);
  box-shadow:
    0 16px 38px rgba(44, 52, 82, .13),
    0 0 24px rgba(120, 103, 255, .12);
}

@media (max-width: 680px) {
  .process-ring.process-scroll-ready .process-node {
    width: 68px;
    height: 68px;
  }

  .process-ring.process-scroll-ready .process-node small {
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-ring.process-scroll-ready::before,
  .process-ring.process-scroll-ready::after,
  .process-ring.process-scroll-ready .process-node {
    transition: none;
  }
}