/* Motion is a response to the photographs and controls, not extra decoration. */
:root {
  --motion-out: cubic-bezier(.16, 1, .3, 1);
}

/* Content stays readable before JavaScript and if an observer never runs. */
.reveal,
.reveal.show,
.service-card.reveal,
.service-card.reveal.show,
.service-card .service-copy > *,
.service-card.show .service-copy > * {
  opacity: 1;
  transform: none;
  transition: none;
}
.hero .photo-card img,
.services .service-photo img {
  will-change: auto;
}

/* Short, intentional feedback under the hand. */
.cta,
.services .service-card:not(#refrigeration) .service-copy > .cta,
.services #refrigeration .service-copy > .cta {
  transition: transform 160ms var(--motion-out), box-shadow 220ms ease, background-color 220ms ease, color 220ms ease;
}
.cta:active {
  transform: scale(.985);
}
.cta .arrow {
  display: inline-block;
  transition: transform 260ms var(--motion-out);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover .arrow { transform: translateX(5px); }
  .service-chips .chip:hover { background: #f7edcf; }
}
.service-chips .chip:active { transform: scale(.985); }
.lead-form input:focus-visible,
.lead-form select:focus-visible,
.lead-form textarea:focus-visible {
  outline: 3px solid var(--coral, #f16648);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cta,
  .services .service-card:not(#refrigeration) .service-copy > .cta,
  .services #refrigeration .service-copy > .cta,
  .cta .arrow,
  .service-chips .chip { transition-duration: 0.01ms; }
  .cta:active,
  .service-chips .chip:active { transform: none; }
}