:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }

/* Native navigation stays intact, including in browsers without view transitions. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .site-header { view-transition-name: site-header; }
  ::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--motion-ease); }
  ::view-transition-old(root) { animation: page-away 240ms ease-out both; }
  ::view-transition-new(root) { animation: page-arrive 420ms var(--motion-ease) both; }

  .button, .text-link, .header-contact, .hero-practice-link, .company-return { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 240ms var(--motion-ease); }
  :is(.button, .text-link, .header-contact, .hero-practice-link, .company-return) > span[aria-hidden="true"] { display: inline-block; transition: transform 240ms var(--motion-ease); }
  :is(.button, .text-link, .header-contact, .hero-practice-link, .company-return):focus-visible > span[aria-hidden="true"] { transform: translateX(3px); }

  @media (hover: hover) and (pointer: fine) {
    :is(.button, .text-link, .header-contact, .hero-practice-link, .company-return):hover > span[aria-hidden="true"] { transform: translateX(3px); }
    .button:hover { transform: translateY(-2px); }
    .project-art img { transition: transform 360ms var(--motion-ease); }
    .project-art:hover img { transform: translateY(-5px); }
  }
}

@keyframes page-away {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes page-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  [data-reveal], [data-intro] { opacity: 1 !important; transform: none !important; }
  .button:hover, .project-art:hover img { transform: none; }
}