/* Nothing category-image hover; Astral button feedback; Dropbox motion timing.
   Observed sources: ../reviews-design-audit-20261106/MOTION-CANDIDATES.txt */
:root { --motion-ease: cubic-bezier(.65, 0, .45, 1); }
.rating-track > span { transform-origin: left center; }
.review-attribution a > span[aria-hidden] { display: inline-block; }
.review-card:focus-within { background: #f1e9fc; }
.review-card:focus-within .review-attribution a { background: #253fc9; color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .home-feature img, .hero-media > img, .rank-image, .search-image,
  .spout-visual > img, .lock-step img, .dimensions-visual img, .gasket-detail {
    transition: scale .45s cubic-bezier(.4, 0, .2, 1);
  }
  .review-card, .review-attribution a, .rank-item > a {
    transition: background-color .25s ease, color .25s ease;
  }
  .review-attribution a > span[aria-hidden], .rank-arrow {
    transition: transform .2s var(--motion-ease);
  }
  .primary-cta { transition: filter .2s ease; }
  .home-feature:focus-visible img,
  .rank-item > a:focus-visible .rank-image,
  .search-product-image:focus-visible .search-image { scale: 1.05; }
  .review-card:focus-within .review-attribution a > span[aria-hidden],
  .rank-item > a:focus-visible .rank-arrow { transform: translate(4px, -4px); }
}

@media (hover: hover) and (pointer: fine) {
  .review-card:hover { background: #f1e9fc; }
  .review-card:hover .review-attribution a { background: #253fc9; color: #fff; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-feature:hover img, .hero-media:hover > img,
  .rank-item > a:hover .rank-image,
  .search-product-image:hover .search-image { scale: 1.05; }
  .spout-visual:hover > img, .lock-visual:hover .lock-step img { scale: 1.06; }
  .dimensions-visual:hover img { scale: 1.04; }
  /* The gasket pointer scales with the photo, preserving its exact alignment. */
  .cleaning-visual:hover .gasket-detail { scale: 1.04; }
  .review-card:hover .review-attribution a > span[aria-hidden],
  .rank-item > a:hover .rank-arrow { transform: translate(4px, -4px); }
}