/* A mesma sequência no toque e no desktop, sem canvas ou animação contínua. */
.process { grid-template-columns: minmax(0, 1fr); }
.process-content { min-width: 0; }

@media (min-width: 64rem) {
  .process { grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); }
}

.process-list {
  --process-track-top: 44px;
  --process-track-height: calc(100% - 88px);
}

.process-list::before,
.process-list::after {
  top: var(--process-track-top);
  bottom: auto;
  left: 21px;
  width: 2px;
  height: var(--process-track-height);
}

.process-list::after {
  background: linear-gradient(#e3a18d, #f4d7af);
  transition: transform 220ms linear;
}

.process-list li,
.process-list li:not(.is-step-active) {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 1.15rem;
  opacity: 1;
  isolation: isolate;
}

.process-list li::before {
  position: absolute;
  z-index: -1;
  inset: 8px -12px;
  border-radius: 12px;
  background: linear-gradient(105deg, rgba(227, 161, 141, .10), transparent 85%);
  content: '';
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

.process-list li.is-step-active::before { opacity: 1; }

.process-list li > span {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: #1d1714;
  color: #e3a18d;
  font-size: 11px;
  box-shadow: none;
  transform: none;
}

.process-list:not([data-process-motion]) li > span {
  border: 1px solid rgba(227, 161, 141, .55);
}

.process-step-ring {
  position: absolute;
  inset: -4px;
  width: 52px;
  height: 52px;
  overflow: visible;
  transform: rotate(-90deg);
  pointer-events: none;
}

.process-step-ring circle {
  fill: none;
  stroke: rgba(227, 161, 141, .23);
  stroke-width: 1;
}

.process-step-ring .process-step-ring__draw {
  stroke: #f1c2a6;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  transition: stroke-dashoffset 950ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--step-delay, 0ms);
}

.process-list[data-process-motion] li > div {
  opacity: .7;
  transform: translate3d(18px, 14px, 0);
  transition: transform 800ms cubic-bezier(.22, 1, .36, 1), opacity 650ms ease;
  transition-delay: var(--step-delay, 0ms);
}

.process-list[data-process-motion] li.is-step-revealed > div {
  opacity: 1;
  transform: none;
}

.process-list li.is-step-revealed .process-step-ring__draw {
  stroke-dashoffset: 0;
}

.process-list li.is-step-active > span,
.process-list li.is-step-complete > span {
  background: #e3a18d;
  color: #201a17;
  box-shadow: 0 0 0 5px rgba(227, 161, 141, .08);
  transform: none;
}

.process-list li.is-step-active > span {
  animation: process-step-settle 750ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes process-step-settle {
  0% { transform: scale(.88); }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .process-list[data-process-motion] li > div { opacity: 1; transform: none; }
  .process-list .process-step-ring__draw { stroke-dashoffset: 0; }
  .process-list::after { transform: scaleY(1); }
  .process-list li.is-step-active > span { animation: none; }
}