/* Motion is an enhancement: no content is hidden while waiting for JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  a.button {
    transition: background-color 180ms ease, color 180ms ease,
      border-color 180ms ease, translate 220ms cubic-bezier(.2,.7,.3,1);
  }

  .agency-hero__services > span,
  .service-contact > span,
  .quiet-link > span,
  .about-services-link > span {
    display: inline-block;
    transition: translate 220ms cubic-bezier(.2,.7,.3,1);
  }

  .services-list summary {
    transition: color 180ms ease;
  }

  .services-list summary:focus-visible {
    outline-offset: -3px;
    border-radius: 6px;
  }

  .services-list details[open] summary {
    color: var(--blue);
  }

  .services-list .plus {
    transition: background-color 220ms ease, border-color 220ms ease;
  }

  .services-list details[open] .plus {
    background: #edf3fd;
    border-color: #b6ccec;
  }

  @media (hover: hover) and (pointer: fine) {
    a.button:hover { translate: 0 -2px; }
    a.button:active { translate: 0 0; }
    .agency-hero__services:hover > span { translate: 0 3px; }
    .service-contact:hover > span { translate: 2px -2px; }
    .quiet-link:hover > span { translate: 3px 0; }
    .about-services-link:hover > span { translate: 2px 2px; }
    .services-list summary:hover { color: var(--blue); }
  }
}

/* Native open state remains the source of truth, including during a transition. */
.services-list details.motion-detail-ready > .service-body {
  animation: none;
}

.services-list details.motion-detail-running {
  overflow: hidden;
  overflow: clip;
}

/* Keep the departing content visible for the short collapse. Its body is inert. */
.services-list details.motion-detail-closing::details-content {
  content-visibility: visible;
}

.services-list details.motion-detail-closing > .service-body {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a.button,
  .agency-hero__services > span,
  .service-contact > span,
  .quiet-link > span,
  .about-services-link > span {
    translate: none !important;
    transition: none !important;
  }
}