/* Small, deliberate responses for actual controls. The scroll entrance layer
   owns reveals; this layer never changes layout or transforms a gallery. */
main :is(a, button):is(.btn-1, .btn-2, .btn-3, .btn-4, .btn-5, .pr-load-more):not(:where(dialog *, .modal *, [role="dialog"] *)) {
  transition-property: background-color, color, border-color, box-shadow, translate;
  transition-duration: 180ms, 180ms, 180ms, 220ms, 180ms;
  transition-timing-function: ease, ease, ease, ease, cubic-bezier(.2, .7, .25, 1);
  transition-delay: 0s;
}

/* Preserve the existing colour, underline and focus treatment of text links. */
main :is(.dp-card-brand-link, .dp-secondary-link, .sc-text-link, .co-about-text-link,
         .cp-text-link, .rr-source-link, .pr-all-link, .ui-related-links a) {
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

main :is(.dp-card-brand-link, .link-1)::after {
  transition: translate 180ms cubic-bezier(.2, .7, .25, 1);
}

/* Only links that are complete cards receive a card response. Specification
   cards and reviews with plain text must not look like clickable containers. */
main :is(a.catalog-item, a.catalog-list-1-item, a.catalog-list-2-item,
         a.catalog-list-3-item, a.catalog-list-5-item, a.up-about-document):not(:where(.swiper-slide, .swiper-wrapper *, dialog *, .modal *, [role="dialog"] *)) {
  transition: border-color 180ms ease, box-shadow 220ms ease;
}

/* Filters, FAQ controls and calculator inputs retain their exact JS states.
   No opacity/display/height transition can delay hiding their content. */
main .tab-buttons > button,
main #formCalculator .input-wrapper,
main #formCalculator .input-wrapper button,
main .questions-item :is(h3,h2:where(.production-h3))[role="button"],
main .up-reference-details > summary {
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, box-shadow 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  main :is(a, button):is(.btn-1, .btn-2, .btn-3, .btn-4, .btn-5, .pr-load-more):not(:where(dialog *, .modal *, [role="dialog"] *)):not(:disabled):not([aria-disabled="true"]):hover {
    translate: 0 -2px;
  }

  main :is(.dp-card-brand-link, .link-1):hover::after {
    translate: 3px 0;
  }

  main :is(a.catalog-item, a.catalog-list-1-item, a.catalog-list-2-item,
           a.catalog-list-3-item, a.catalog-list-5-item, a.up-about-document):not(:where(.swiper-slide, .swiper-wrapper *, dialog *, .modal *, [role="dialog"] *)):hover {
    box-shadow: 0 7px 20px rgb(35 42 48 / 8%);
  }
}

/* One-pixel feedback on press, including touch. The foundation already moves
   native buttons by 1px, so only anchor buttons need an added press offset. */
main button:is(.btn-1, .btn-2, .btn-3, .btn-4, .btn-5, .pr-load-more):not(:where(dialog *, .modal *, [role="dialog"] *)):not(:disabled):not([aria-disabled="true"]):active {
  translate: none;
  transition-duration: 100ms;
}
main a:is(.btn-1, .btn-2, .btn-3, .btn-4, .btn-5, .pr-load-more):not(:where(dialog *, .modal *, [role="dialog"] *)):not([aria-disabled="true"]):active {
  translate: 0 1px;
  transition-duration: 100ms;
}

@media (prefers-reduced-motion: reduce) {
  main :is(a, button):is(.btn-1, .btn-2, .btn-3, .btn-4, .btn-5, .pr-load-more):not(:where(dialog *, .modal *, [role="dialog"] *)),
  main :is(.dp-card-brand-link, .dp-secondary-link, .sc-text-link, .co-about-text-link,
           .cp-text-link, .rr-source-link, .pr-all-link, .ui-related-links a),
  main :is(a.catalog-item, a.catalog-list-1-item, a.catalog-list-2-item,
           a.catalog-list-3-item, a.catalog-list-5-item, a.up-about-document),
  main .tab-buttons > button,
  main #formCalculator .input-wrapper,
  main #formCalculator .input-wrapper button,
  main .questions-item :is(h3,h2:where(.production-h3))[role="button"],
  main .up-reference-details > summary {
    transition: none;
    translate: none !important;
  }
  main :is(.dp-card-brand-link, .link-1)::after {
    transition: none;
    translate: none !important;
  }
}