@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .intro > *,
  .portrait {
    animation: rise-in .58s cubic-bezier(.22, .68, .24, 1) both;
  }
  .intro h1 { animation-delay: .06s; }
  .intro .lead { animation-delay: .12s; }
  .intro-copy { animation-delay: .17s; }
  .intro .actions { animation-delay: .22s; }
  .portrait { animation-delay: .12s; }

  .button {
    transition: transform .2s ease, background-color .2s ease;
  }
  .button:focus-visible { transform: translateY(-2px); }
}

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

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .photos img, .services li, .contact-row {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}