/* Base styles for the steps */
.step-one {
  background: url("/img/1.svg");
}

.step-two {
  background: url("/img/2.svg");
}

.step-three {
  background: url("/img/3.svg");
}

.step-one,
.step-two,
.step-three {
  position: relative;
  height: 30vh;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

/* Dark mode overlay */
html.dark-ui .step-one::after,
html.dark-ui .step-two::after,
html.dark-ui .step-three::after {
  content: '';
  position: absolute;
  inset: 1;
  background: hsl(261 89% 4% / 0.6);
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Light mode overlay */
html.light-ui .step-one::after,
html.light-ui .step-two::after,
html.light-ui .step-three::after {
  content: '';
  position: absolute;
  inset: 1;
  background: hsl(0 0% 98% / 0.6);
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Steps container */
.steps-list {
  margin-block: var(--padding-tight) var(--padding-normal);
}

/* Step text color */
.step {
  color: var(--clr-cta);
}

/* Animation for non-reduced motion preferences */
@media (prefers-reduced-motion: no-preference) {
  .slide-in {
    opacity: 0;
    transform: translateY(50%);
    transition: transform 750ms ease-out, opacity 750ms ease-out;
    will-change: transform, opacity;
  }

  .slide-in.active {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Simplified animation for reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .slide-in {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    will-change: opacity;
  }

  .slide-in.active {
    opacity: 1;
  }
}