/* Brief, optional movement. Content is visible before and without animation. */
@media screen {
  .text-link:focus-visible { border-bottom-color: var(--navy); }
  .button:focus-visible { background: var(--navy-dark); }
  .button-light:focus-visible {
    background: var(--sand);
    color: var(--navy);
    border-color: var(--sand);
  }
  .practice-row:focus-visible .practice-title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }

  @media (prefers-reduced-motion: no-preference) {
    #main-content > .hero:not(.home-hero) h1 {
      animation: sjs-heading-arrive 420ms ease-out;
    }
    .faqs details[open] > .faq-answer {
      animation: sjs-answer-arrive 180ms ease-out;
    }
    .faqs .faq-indicator::after { transition: transform 180ms ease-out; }
    .text-link { transition: border-bottom-color 160ms ease-out; }
    .button > span[aria-hidden="true"] { transition: transform 180ms ease-out; }
    .button:is(:hover, :focus-visible) > span[aria-hidden="true"],
    .practice-row:focus-visible .practice-arrow { transform: translate(2px, -2px); }
  }
}

@keyframes sjs-heading-arrive {
  from { transform: translateY(8px); }
  to { transform: translateY(0); }
}
@keyframes sjs-answer-arrive {
  from { transform: translateY(4px); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce), print {
  #main-content > .hero:not(.home-hero) h1,
  .faqs details[open] > .faq-answer { animation: none; }
  .faqs .faq-indicator::after,
  .text-link,
  .button > span[aria-hidden="true"] { transition: none; }
  .button:is(:hover, :focus-visible) > span[aria-hidden="true"],
  .practice-row:focus-visible .practice-arrow { transform: none; }
}