/* V2.1 motion is a progressive enhancement: no content starts hidden. */
.motion-v21 .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-v21 .button {
  transition: background-color 180ms ease, color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease;
}

.motion-v21 :is(.button, .text-link, .hero-ribbon > a) > span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 180ms ease;
}

.motion-v21 .service-tab {
  transition: background-color 160ms ease, color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .motion-v21:not(.motion-paused) .button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
  }

  .motion-v21:not(.motion-paused) :is(.button, .text-link, .hero-ribbon > a):hover > span[aria-hidden="true"] {
    transform: translate(2px, -2px);
  }
}

.motion-v21 :is(a, button, summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 5px;
}

html.motion-paused {
  scroll-behavior: auto;
}

.motion-v21.motion-paused *,
.motion-v21.motion-paused *::before,
.motion-v21.motion-paused *::after {
  animation: none !important;
  transition: none !important;
}

.motion-v21.motion-paused .button:hover {
  transform: none;
  box-shadow: 4px 4px 0 var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .motion-v21 .reveal {
    opacity: 1;
    transform: none;
  }

  .motion-v21 .button:hover {
    transform: none;
    box-shadow: 4px 4px 0 var(--ink);
  }
}

@media (max-width: 640px) {
  .motion-v21 .review-dock {
    gap: 2px;
    font-size: 9px;
  }

  .motion-v21 .review-dock > span,
  .motion-v21 .review-dock a {
    padding: 9px 8px;
  }

  .motion-v21 .review-dock a {
    gap: 7px;
  }
}