/* Scoped micro-interactions. No hidden content, layout animation or perpetual motion. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    :where(.hc-card, .hocc-card, .hwhy-card, .htesti-card, .home-review-card, .home-why-card) {
        transition: translate 220ms ease, box-shadow 220ms ease;
    }
    :where(.hc-card, .hocc-card, .hwhy-card, .htesti-card, .home-review-card, .home-why-card):hover {
        translate: 0 -3px;
        box-shadow: 0 10px 24px rgb(44 36 22 / 9%);
    }
    :where(.hc-card__img-wrap img, .product-card-img) {
        transition: transform 320ms ease;
    }
    .hc-card:hover .hc-card__img-wrap img { transform: scale(1.035); }
    :where(.btn, .hocc-card__btn):not(:disabled) {
        transition: translate 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
    }
    :where(.btn, .hocc-card__btn):not(:disabled):hover { translate: 0 -1px; }
    :where(.btn, .hocc-card__btn):not(:disabled):active { translate: 0 1px; }
}
@media (prefers-reduced-motion: reduce) {
    :where(.product-card, .hc-card, .hocc-card, .hwhy-card, .htesti-card, .btn, .product-card-img):hover {
        transform: none !important;
        translate: none !important;
    }
}