/* Progressive motion: content is visible without JavaScript or animation support. */
:root {
  --motion-ease-out: cubic-bezier(.23, 1, .32, 1);
}

.button,
.text-link,
.contact-card {
  transition: transform 160ms var(--motion-ease-out);
}

.text-link > [aria-hidden="true"]:last-child,
.button > .arrow {
  transition: transform 180ms var(--motion-ease-out);
}

/* Override the original contact hover on touchscreens. */
.contact-card:hover {
  transform: none;
}

.demo-workspace {
  position: relative;
}

.motion-feedback-line {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.motion-feedback-beam {
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:not(:disabled):hover {
    transform: translateY(-2px);
  }

  .button:not(:disabled):hover > .arrow,
  .text-link:hover > [aria-hidden="true"]:last-child {
    transform: translateX(3px);
  }

  .text-link:hover {
    transform: translateY(-1px);
  }

  .contact-card:hover {
    transform: translateY(-3px);
  }

  .button:not(:disabled):active {
    transform: translateY(0) scale(.975);
    transition-duration: 100ms;
  }

  .text-link:active,
  .contact-card:active {
    transform: translateY(0) scale(.99);
    transition-duration: 100ms;
  }
}

/* Focus is immediate. Keyboard activation never waits for decorative motion. */
.button:not(:disabled):focus-visible,
:is(.text-link, .contact-card):focus-visible,
html[data-motion-input="keyboard"] :is(.button, .text-link, .contact-card),
html[data-motion-input="keyboard"] :is(.button, .text-link, .contact-card):is(:hover, :active) {
  transform: none;
  transition: none;
}

.button:not(:disabled):focus-visible > .arrow,
.text-link:focus-visible > [aria-hidden="true"],
html[data-motion-input="keyboard"] :is(.button, .text-link) > [aria-hidden="true"],
html[data-motion-input="keyboard"] :is(.button, .text-link):is(:hover, :active) > [aria-hidden="true"] {
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(.button, .text-link, .contact-card),
  :is(.button, .text-link, .contact-card):is(:hover, :active),
  .text-link > [aria-hidden="true"],
  .button > .arrow {
    transform: none;
    transition: none;
  }

  .motion-feedback-line {
    display: none;
  }
}