/**
 * The rules only apply after JavaScript has added the activation class.
 * Images therefore remain visible when JavaScript is unavailable.
 */
html.rt-proper-image-loading-enabled :where(
    img.rt-proper-image-loading,
    .woocommerce ul.products li.product img,
    .wc-block-grid__product-image img
) {
    opacity: 0;
    filter: blur(10px);
    transition:
        opacity 400ms ease,
        filter 600ms ease;
}

html.rt-proper-image-loading-enabled :where(
    img.rt-proper-image-loading,
    .woocommerce ul.products li.product img,
    .wc-block-grid__product-image img
).rt-proper-image-loading-loaded {
    opacity: 1;
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    html.rt-proper-image-loading-enabled :where(
        img.rt-proper-image-loading,
        .woocommerce ul.products li.product img,
        .wc-block-grid__product-image img
    ) {
        filter: none;
        transition: none;
    }
}