@media (prefers-reduced-motion: no-preference) {
  .btn,
  .btn--link__arrow {
    transition: var(--transition-zoom-premium);
  }

  .btn:hover,
  .product-card__order:hover {
    background-color: var(--color-btn-hover);
  }

  .product-card__order-capsules:hover,
  .product-card__order-capsules.is-open {
    background-color: var(--color-primary);
    color: var(--color-bg);
  }

  .product-card__order-capsules:hover .product-card__plus,
  .product-card__order-capsules.is-open .product-card__plus {
    border-right: 2px solid var(--color-bg);
  }

  .btn--link:hover .btn--link__text {
    transform: scale(1.1);
  }

  .btn--link:hover .btn--link__arrow {
    transform: translateX(4px);
  }

  .card-coffee-machine:hover {
    background-color: var(--color-accent-gold);
  }

  .card-capsules:hover {
    background-color: var(--color-accent-green);
  }

  .blog-card__wrap:hover {
    background-color: var(--color-accent-gold);
  }
  .blog__read-more.is-expanded .blog__read-more--arrow {
    transform: rotate(180deg);
  }
}

@media (min-width: 768px) {
  .icon-btn:hover,
  .header__search:hover,
  .header__cabinet:hover,
  .header__basket:hover,
  .header__phone:hover,
  .header__lang-item:hover,
  .blog-single__share-link:hover {
    transform: scale(1.1);
  }

  .product-card__body,
  .product-card__order,
  .blog-card__img,
  .blog-card__wrap,
  .product-benefits__media,
  .product-benefits__caption {
    transition: var(--transition-zoom-premium);
    will-change: transform;
  }

  .product-card:hover .product-card__body,
  .product-card:hover .product-card__order,
  .blog-card:hover .blog-card__img,
  .blog-card:hover .blog-card__wrap,
  .product-benefits__item:hover .product-benefits__media,
  .product-benefits__item:hover .product-benefits__caption {
    transform: scale(1.05);
  }

  .popup__close:hover {
    background-color: var(--color-surface);
  }
  .product-card__dropdown-grid button:hover {
    color: var(--color-accent-green);
  }
}

/*
 * Light sweep on hover for every colour-changing button on the site.
 * Runs as a keyframe animation over background-image only, so each button
 * keeps its own background-color, hover colour and transitions, and no
 * position/overflow/pseudo-element changes are needed (works on inline <a>
 * too). Animated declarations also win over `background:` shorthands in
 * component CSS.
 */
@keyframes btn-light-sweep {
  from {
    background-image: linear-gradient(
      100deg,
      transparent 42%,
      rgba(var(--color-text-invert-rgb), 0.28) 50%,
      transparent 58%
    );
    background-size: 250% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0;
  }

  to {
    background-image: linear-gradient(
      100deg,
      transparent 42%,
      rgba(var(--color-text-invert-rgb), 0.28) 50%,
      transparent 58%
    );
    background-size: 250% 100%;
    background-repeat: no-repeat;
    background-position: -50% 0;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(
      .btn,
      .product-card__order,
      .account-btn-outline,
      .checkout-step__next,
      .order-recap__cabinet,
      .checkout-summary__promo-btn,
      .checkout-summary__oneclick,
      .qty__btn
    ):not(:disabled, [aria-disabled="true"], .product-card__order--out-of-stock):hover {
    animation: btn-light-sweep 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
}