:root {
  --motion-duration-press: 120ms;
  --motion-duration-feedback: 160ms;
  --motion-duration-disclosure: 180ms;
  --motion-duration-value: 240ms;
  --motion-duration-slide: 500ms;
  --motion-ease-feedback: ease;
  --motion-ease-disclosure: ease-out;
  --motion-distance-enter: 4px;
  --motion-distance-press: 1px;
}

@media (prefers-reduced-motion: no-preference) {
  .header-apply,
  .site-button,
  .rate-buttons button {
    transition:
      background-color var(--motion-duration-feedback)
        var(--motion-ease-feedback),
      color var(--motion-duration-feedback) var(--motion-ease-feedback),
      transform var(--motion-duration-press) var(--motion-ease-disclosure);
  }
  .header-apply:active,
  .site-button:not(:disabled):not([aria-disabled="true"]):active,
  .rate-buttons button:not(:disabled):active {
    transform: translateY(var(--motion-distance-press));
  }
  .summary-split-bar span {
    transition: width var(--motion-duration-value) var(--motion-ease-disclosure);
  }
  .nav-list a,
  .loan-disclosure > button {
    transition: color var(--motion-duration-feedback)
      var(--motion-ease-feedback);
  }
  .loan-disclosure > button svg,
  .faq-indicator::before {
    transition: transform var(--motion-duration-disclosure)
      var(--motion-ease-disclosure);
  }
  .loan-panel:not([hidden]) {
    animation: motion-enter var(--motion-duration-disclosure)
      var(--motion-ease-disclosure);
  }
  .faq-list details[open] .faq-answer {
    animation: motion-fade-in var(--motion-duration-feedback)
      var(--motion-ease-disclosure);
  }
  @media (max-width: 921px) {
    .main-navigation.is-open {
      animation: motion-enter var(--motion-duration-disclosure)
        var(--motion-ease-disclosure);
    }
  }
  .amount-slider::-webkit-slider-thumb {
    transition: box-shadow var(--motion-duration-feedback)
      var(--motion-ease-feedback);
  }
  .amount-slider::-moz-range-thumb {
    transition: box-shadow var(--motion-duration-feedback)
      var(--motion-ease-feedback);
  }
}

.carousel-track {
  transition: transform var(--motion-duration-slide) var(--motion-ease-feedback);
}
.carousel-slide {
  transition-property: none;
}

.amount-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px oklch(55% 0.2 260 / 12%);
}
.amount-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 5px oklch(55% 0.2 260 / 12%);
}
@media (hover: hover) and (pointer: fine) {
  .amount-slider:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 5px oklch(55% 0.2 260 / 12%);
  }
  .amount-slider:hover::-moz-range-thumb {
    box-shadow: 0 0 0 5px oklch(55% 0.2 260 / 12%);
  }
}

@keyframes motion-enter {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--motion-distance-enter)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes motion-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-value: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}