/* Quiet interaction motion; geometry, the palette and carousel movement stay unchanged. */
:root {
  --radent-motion-ease: cubic-bezier(.2, .7, .2, 1);
  --radent-motion-control: 160ms;
  --radent-motion-card: 180ms;
  --radent-motion-photo: 220ms;
}
html { scrollbar-gutter: stable; }
/* Result changes scroll inside the search window instead of moving its centre. */
dialog.site-search-dialog { height: min(680px, calc(100dvh - 40px)); }

@media (prefers-reduced-motion: no-preference) {
  /* The translate property composes with the one-time entry animation's transform. */
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent):not(details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *) {
    transition: translate var(--radent-motion-control) var(--radent-motion-ease),
      transform 120ms var(--radent-motion-ease),
      background-color 200ms var(--radent-motion-ease),
      border-color 200ms var(--radent-motion-ease),
      color 200ms var(--radent-motion-ease);
  }

  main :is(a.ref8-hero-shop, a.about-fact, a.ref8-benefit, .catalog-product-card, .journal-card, .ref8-journal-preview-card, .ref8-gallery-item > a[data-clinic-gallery]):not(details *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *) {
    transition: background-color var(--radent-motion-card) var(--radent-motion-ease);
  }

  /* Each listed image already has a rounded wrapper that clips its contents. */
  main :is(.ref8-hero-photo, .ref8-offer-photo, .ref8-gallery-item > a[data-clinic-gallery], .ref8-journal-preview-media, .journal-card-media, .about-chief-photo) img {
    transition: scale var(--radent-motion-photo) var(--radent-motion-ease);
  }

  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent, .text-link) > .icon:not(details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *),
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent) .btn-arrow > .icon:not(details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *),
  main a.ref8-hero-shop .ref8-outline-arrow > .icon {
    transform: none;
    transition: translate var(--radent-motion-control) var(--radent-motion-ease);
  }

  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent):focus-visible:not(:disabled, [aria-disabled="true"], [aria-busy="true"], details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *),
  main :is(a.ref8-hero-shop, a.about-fact, a.ref8-benefit, .ref8-gallery-item > a[data-clinic-gallery]):focus-visible,
  main :is(.catalog-product-card, .journal-card, .ref8-journal-preview-card):has(:focus-visible):not(details *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *) {
    translate: 0;
  }
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent):focus-visible:not(:disabled, [aria-disabled="true"], [aria-busy="true"], details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *) { translate: 0 -1px; }

  main :is(.ref8-gallery-item > a[data-clinic-gallery], .ref8-journal-preview-media, .journal-card-media):has(:focus-visible) img,
  main .ref8-gallery-item > a[data-clinic-gallery]:focus-visible img {
    scale: 1.015;
  }

  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent, .text-link):focus-visible > .icon:not(details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *),
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent):focus-visible .btn-arrow > .icon:not(details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *),
  main a.ref8-hero-shop:focus-visible .ref8-outline-arrow > .icon {
    translate: 2px 0;
  }

  /* Existing button press transforms provide the 1px down state without compounding the lift. */
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent):active:not(:disabled, [aria-disabled="true"], [aria-busy="true"], details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *) {
    translate: 0;
    box-shadow: none;
  }
  main :is(a.ref8-hero-shop, a.about-fact, a.ref8-benefit, .ref8-gallery-item > a[data-clinic-gallery]):active {
    translate: 0;
    box-shadow: none;
  }

  body .radent-search-control,
  :is(main, dialog) .field :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), textarea, select) {
    transition: border-color 200ms var(--radent-motion-ease),
      box-shadow 200ms var(--radent-motion-ease),
      background-color 200ms var(--radent-motion-ease);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *),
  main :is(a.ref8-hero-shop, a.about-fact, a.ref8-benefit, .catalog-product-card, .journal-card, .ref8-journal-preview-card, .ref8-gallery-item > a[data-clinic-gallery]):hover:not(details *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *) {
    translate: 0;
  }
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"], details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *) {
    translate: 0 -1px;
  }
  main :is(a.ref8-hero-shop, a.about-fact, a.ref8-benefit, .catalog-product-card, .ref8-gallery-item > a[data-clinic-gallery]):hover:not(details *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *) {
    box-shadow: none;
  }
  main :is(.ref8-hero-photo, .ref8-offer-photo, .ref8-gallery-item > a[data-clinic-gallery], .ref8-journal-preview-media, .journal-card-media, .about-chief-photo):hover img {
    scale: 1.015;
  }
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent, .text-link):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) > .icon:not(details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *),
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent):hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) .btn-arrow > .icon:not(details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *),
  main a.ref8-hero-shop:hover .ref8-outline-arrow > .icon {
    translate: 2px 0;
  }
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent):active:not(:disabled, [aria-disabled="true"], [aria-busy="true"], details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *) {
    translate: 0;
    box-shadow: none;
  }
  main :is(a.ref8-hero-shop, a.about-fact, a.ref8-benefit, .ref8-gallery-item > a[data-clinic-gallery]):active { translate: 0; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent, a.ref8-hero-shop, a.about-fact, a.ref8-benefit, .catalog-product-card, .journal-card, .ref8-journal-preview-card, .ref8-gallery-item > a[data-clinic-gallery]):not(details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *),
  main :is(.ref8-hero-photo, .ref8-offer-photo, .ref8-gallery-item > a[data-clinic-gallery], .ref8-journal-preview-media, .journal-card-media, .about-chief-photo) img,
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent, .text-link) > .icon:not(details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *),
  main :is(.btn, .btn-primary, .btn-secondary, .btn-accent) .btn-arrow > .icon:not(details *, table *, [role="table"] *, .data-table *, [data-ref-carousel] *, .ref8-doctor-track *, .about-photo-track *),
  main a.ref8-hero-shop .ref8-outline-arrow > .icon {
    transition: none;
    translate: none;
    scale: none;
  }
  body .radent-search-control,
  :is(main, dialog) .field :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), textarea, select) { transition: none; }
}