/* Shared short interaction timing; all motion is opt-in to user preference. */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .button,
  .filter,
  .setup-tabs button,
  .category-small a,
  .solution-list > a {
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      color 180ms ease,
      transform 240ms var(--motion-ease),
      box-shadow 240ms ease;
  }
  .button > svg:last-child:not(.brand-icon),
  .text-link > svg:last-child,
  .product a > svg:last-child,
  .round-arrow svg,
  .category-small a > svg:last-child {
    transition: translate 240ms var(--motion-ease);
  }
  .category-icon {
    transition: transform 280ms var(--motion-ease);
  }
  .nav-links a {
    position: relative;
  }
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--accent-ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms var(--motion-ease);
  }
  .nav-links a:focus-visible::after {
    transform: scaleX(1);
  }
  .button:active,
  .filter:active,
  .setup-tabs button:active {
    transform: scale(0.98);
  }
  input,
  select,
  textarea {
    transition:
      border-color 160ms ease,
      box-shadow 160ms ease;
  }
  .motion-entering {
    transition: none !important;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .nav-links a:hover::after {
    transform: scaleX(1);
  }
  .button:hover > svg:last-child:not(.brand-icon),
  .text-link:hover > svg:last-child {
    translate: 3px 0;
  }
  .product a:hover > svg:last-child,
  .category:hover .round-arrow svg,
  .category-small a:hover > svg:last-child {
    translate: 2px -2px;
  }
  .category-small a:hover {
    transform: translateY(-3px);
    border-color: var(--accent-border);
  }
  .category-small a:hover .category-icon {
    transform: rotate(-5deg);
  }
  .filter:hover,
  .setup-tabs button:hover {
    transform: translateY(-2px);
  }
}

.motion-offscreen .brands-marquee-track {
  animation-play-state: paused;
}