.site-header,
.skip-link {
  transition: background 180ms ease, border-color 180ms ease,
    transform 180ms ease;
}

.button {
  transition: background 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease;
}

.nav-links a::after {
  transition: right 180ms ease;
}

.demo-window {
  transition: transform 160ms ease;
}

.demo-layer {
  transition: opacity 550ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s linear 700ms;
}

.demo-window[data-state="capture"] .capture-layer,
.demo-window[data-state="select"] .select-layer,
.demo-window[data-state="finish"] .finish-layer,
.demo-window[data-state="deliver"] .deliver-layer {
  transition-delay: 0s;
}

.demo-control,
.demo-control::before {
  transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease,
    transform 180ms ease;
}

.scroll-cue > span::after {
  animation: scroll-wheel 1.8s ease-in-out infinite;
}

@keyframes scroll-wheel {
  0%,
  100% {
    opacity: 0.25;
    transform: translate(-50%, 0);
  }
  45% {
    opacity: 1;
    transform: translate(-50%, 8px);
  }
}

@media (hover: hover) {
  .button:hover {
    transform: translateY(-2px);
  }

  .button-dark:hover {
    box-shadow: 0 15px 34px rgba(23, 23, 24, 0.25);
  }

  .button-light:hover {
    border-color: rgba(23, 23, 24, 0.28);
    background: var(--white);
  }

  .nav-links a:hover::after {
    right: 0;
  }

  .demo-control:hover {
    background: #25242a;
    color: white;
  }
}

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

  .demo-window {
    transform: none !important;
  }

  .demo-progress i {
    transform: scaleX(0) !important;
  }
}