.form-motion-prototype .plan-guide-shell .form-card {
  height: auto;
}

.form-motion-prototype .plan-guide-shell .form-card.is-height-animating {
  will-change: height;
  transition: height 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.form-motion-prototype .plan-guide-shell .form-step {
  transition: background-color 220ms ease;
}

.form-motion-prototype .plan-guide-shell .form-card input,
.form-motion-prototype .plan-guide-shell .form-card select {
  transition:
    border-color 150ms ease,
    box-shadow 140ms ease-out;
}

.form-motion-prototype .plan-guide-shell .continue-button {
  transition:
    background-color 150ms ease,
    box-shadow 140ms ease-out,
    transform 150ms ease;
}

.form-motion-prototype
  .plan-guide-shell
  .form-step--revealed:not([hidden]) {
  animation: alt-step-reveal 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.form-motion-prototype
  .plan-guide-shell
  #county-step.form-step--revealed:not([hidden]) {
  animation: none;
}

.form-motion-prototype
  .plan-guide-shell
  #county-step.form-step--revealed:not([hidden])
  .step-number {
  animation: alt-county-marker-arrive 240ms cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.form-motion-prototype
  .plan-guide-shell
  #county-step.form-step--revealed:not([hidden])
  .step-content {
  animation: alt-county-content-arrive 300ms 70ms
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

.form-motion-prototype .plan-guide-shell .form-step.is-complete {
  background-color: #f6fbfc;
}

.form-motion-prototype .plan-guide-shell .step-number {
  position: relative;
  transition:
    background-color 180ms ease,
    color 140ms ease,
    transform 180ms ease;
}

.form-motion-prototype
  .plan-guide-shell
  .form-step.is-complete
  .step-number {
  background: var(--form-blue);
  color: transparent;
}

.form-motion-prototype
  .plan-guide-shell
  .form-step.is-complete
  .step-number::after {
  position: absolute;
  inset: 0;
  background: url("assets/check-filled.svg") center / 1.0625rem 1.0625rem no-repeat;
  content: "";
}

.form-motion-prototype
  .plan-guide-shell
  .form-step.is-just-completed
  .step-number {
  animation: alt-complete-pop 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.form-motion-prototype .plan-guide-shell .field-feedback {
  position: relative;
  isolation: isolate;
  width: fit-content;
}

.form-motion-prototype .plan-guide-shell #zip-guidance.is-faded {
  opacity: 0;
}

.form-motion-prototype .plan-guide-shell #zip-guidance {
  transition: opacity 280ms ease;
}

.form-motion-prototype .plan-guide-shell #county-guidance {
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.4, 0, 1, 1);
}

.form-motion-prototype .plan-guide-shell #county-guidance.is-dismissed {
  opacity: 0;
  transform: translateY(-0.45rem);
}

.form-motion-prototype .plan-guide-shell .zip-result-row {
  display: flex;
  width: calc(100% + var(--step-label-offset));
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  margin-left: calc(-1 * var(--step-label-offset));
}

.form-motion-prototype .plan-guide-shell .zip-result-row .field-feedback {
  min-width: 0;
}

.form-motion-prototype .plan-guide-shell .zip-state-silhouette {
  display: block;
  flex: 0 0 clamp(4rem, 22%, 6.25rem);
  width: clamp(4rem, 22%, 6.25rem);
  height: 4rem;
  overflow: visible;
  fill: rgb(0 145 146 / 9%);
  stroke: var(--form-blue);
  stroke-linejoin: round;
  stroke-width: 0.125rem;
}

.form-motion-prototype
  .plan-guide-shell
  .zip-state-silhouette.is-silhouette-entering {
  animation: alt-state-silhouette-arrive 320ms 70ms
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

.form-motion-prototype
  .plan-guide-shell
  .field-feedback.is-feedback-entering:not(:empty) {
  animation: alt-feedback-arrive 220ms ease-out both;
}

.form-motion-prototype
  .plan-guide-shell
  .field-feedback.is-success-feedback::before {
  position: absolute;
  z-index: -1;
  inset: -0.15rem -0.3rem;
  border-radius: 0.25rem;
  background: linear-gradient(
    90deg,
    rgb(0 145 146 / 0%) 0%,
    rgb(0 145 146 / 14%) 35%,
    rgb(0 145 146 / 8%) 70%,
    rgb(0 145 146 / 0%) 100%
  );
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  animation: alt-success-sweep 520ms 50ms cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

@keyframes alt-step-reveal {
  from {
    opacity: 0;
    transform: translateY(0.65rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes alt-complete-pop {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes alt-feedback-arrive {
  from {
    opacity: 0;
    transform: translateY(0.2rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes alt-success-sweep {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes alt-state-silhouette-arrive {
  from {
    opacity: 0;
    transform: translateX(0.35rem) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes alt-county-marker-arrive {
  from {
    opacity: 0;
    transform: translateY(0.45rem) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes alt-county-content-arrive {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-motion-prototype .plan-guide-shell .form-card,
  .form-motion-prototype .plan-guide-shell .form-step,
  .form-motion-prototype .plan-guide-shell .step-number,
  .form-motion-prototype .plan-guide-shell .form-card input,
  .form-motion-prototype .plan-guide-shell .form-card select,
  .form-motion-prototype .plan-guide-shell .continue-button,
  .form-motion-prototype .plan-guide-shell #zip-guidance,
  .form-motion-prototype .plan-guide-shell #county-guidance {
    transition: none !important;
  }

  .form-motion-prototype
    .plan-guide-shell
    #county-guidance.is-dismissed {
    transform: none !important;
  }

  .form-motion-prototype
    .plan-guide-shell
    .form-step--revealed:not([hidden]),
  .form-motion-prototype
    .plan-guide-shell
    .form-step.is-just-completed
    .step-number,
  .form-motion-prototype
    .plan-guide-shell
    .field-feedback.is-feedback-entering:not(:empty),
  .form-motion-prototype
    .plan-guide-shell
    .field-feedback.is-success-feedback::before,
  .form-motion-prototype
    .plan-guide-shell
    .zip-state-silhouette.is-silhouette-entering,
  .form-motion-prototype
    .plan-guide-shell
    #county-step.form-step--revealed:not([hidden])
    .step-number,
  .form-motion-prototype
    .plan-guide-shell
    #county-step.form-step--revealed:not([hidden])
    .step-content {
    animation: none !important;
  }
}