:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 220ms;
  --motion-reveal: 620ms;
}

.btn, .quote, .chip, .backlink, .mobilebar button {
  transition: translate var(--motion-quick) var(--motion-ease),
    border-color var(--motion-quick) ease, box-shadow var(--motion-quick) ease;
}
.nav button, .nav button::after { transition-duration: var(--motion-quick); }
.service-card, .project, .review {
  transition: translate 320ms var(--motion-ease), border-color 320ms ease;
}
.service-card img, .project img, .about-photo img {
  transition: scale 700ms var(--motion-ease);
}
.contact-list a, .map-caption a { transition: color var(--motion-quick) ease; }
.motion-parallax::before { transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.035); }

:where(button, a, [role="button"]):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}
.page h1:focus { outline: none; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover, .quote:hover { translate: 0 -2px; border-color: rgba(154,203,126,.65); box-shadow: 0 8px 22px rgba(0,0,0,.22); }
  .chip:hover, .backlink:hover { translate: 0 -1px; }
  .service-card:hover, .service-card:focus-visible, .project:hover { translate: 0 -3px; border-color: rgba(154,203,126,.55); }
  .service-card:hover img, .service-card:focus-visible img, .project:hover img, .about-photo:hover img { scale: 1.035; }
  .review:hover { translate: 0 -2px; border-color: rgba(154,203,126,.4); }
  .contact-list a:hover, .map-caption a:hover { color: var(--green); }
}
.btn:active, .quote:active { translate: 0 0; }

@media (max-width: 980px), (pointer: coarse) {
  .motion-parallax::before { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-parallax::before { transform: none; }
  .btn, .quote, .chip, .backlink, .service-card, .project, .review { translate: none !important; }
  .service-card img, .project img, .about-photo img { scale: none !important; }
}