.steps::before {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity .35s ease, transform 1.25s cubic-bezier(.22, 1, .36, 1);
}

.steps:has(.step.is-visible)::before {
  opacity: 1;
  transform: scaleX(1);
  transition-delay: .08s;
}

.steps .step[data-reveal] {
  --step-delay: 0s;
  opacity: 0;
  filter: blur(5px);
  transform: translateY(30px) scale(.96);
  transition:
    opacity .68s cubic-bezier(.22, 1, .36, 1) var(--step-delay),
    transform .78s cubic-bezier(.22, 1, .36, 1) var(--step-delay),
    filter .55s ease var(--step-delay);
  will-change: opacity, transform, filter;
}

.steps .step:nth-child(1) { --step-delay: .04s; }
.steps .step:nth-child(2) { --step-delay: .20s; }
.steps .step:nth-child(3) { --step-delay: .36s; }
.steps .step:nth-child(4) { --step-delay: .52s; }

.steps .step[data-reveal].is-visible {
  opacity: 1;
  filter: none;
  transform: translateY(0) scale(1);
}

.steps .step.is-visible .step__num {
  animation: fenix-step-arrive .72s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--step-delay) + .08s);
}

@keyframes fenix-step-arrive {
  0% { box-shadow: 0 8px 22px rgba(25,125,166,.08); transform: scale(.72); }
  62% { box-shadow: 0 16px 38px rgba(25,125,166,.3); transform: scale(1.09); }
  100% { box-shadow: 0 10px 30px rgba(25,125,166,.22); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .steps::before,
  .steps:has(.step.is-visible)::before {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .steps .step[data-reveal],
  .steps .step[data-reveal].is-visible {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .steps .step.is-visible .step__num { animation: none; }
}