.project-search {
  min-width: min(100%, 18rem);
}

.project-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Lift the card under the pointer, unless the visitor prefers less motion. */
@media (prefers-reduced-motion: no-preference) {
  .project-card {
    transition: transform 150ms ease-out;
  }

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

/* Fade the list while htmx swaps in new search results. */
#project-list.htmx-swapping {
  opacity: 0.5;
  transition: opacity 150ms ease-out;
}

/* htmx's own indicator styles, which the CSP keeps it from injecting. */
.htmx-indicator {
  opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

/* Contact form honeypot: off-screen for people, still in the HTML for bots. */
.contact-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}