/* Contact fill interaction; portfolio zoom lives in portfolio.css. */
.home-page {
  --detail-ease: cubic-bezier(.22, 1, .36, 1);
  --detail-ink: #e7e4dc;
}

.home-page #contact .project_btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color .35s;
}
.home-page #contact .project_btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--detail-ink);
  transform: translateY(102%);
  transition: transform .5s var(--detail-ease);
}
.home-page #contact .project_btn > span { transition: transform .5s var(--detail-ease); }
.home-page #contact .project_btn:is(:hover, :focus-visible) {
  padding-inline: 0;
  background: transparent;
  color: #171715;
}
.home-page #contact .project_btn:is(:hover, :focus-visible)::before { transform: translateY(0); }
.home-page #contact .project_btn:is(:hover, :focus-visible) > span:first-child { transform: translateX(16px); }
.home-page #contact .project_btn:is(:hover, :focus-visible) .arrow { transform: translateX(-16px); }
.home-page #contact .project_btn:active > span { opacity: .65; }
.home-page #contact .project_btn:focus-visible { outline: 2px solid var(--detail-ink); outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  .home-page #contact .project_btn,
  .home-page #contact .project_btn::before,
  .home-page #contact .project_btn > span { transition: none; }
}