body.single-post .entry-content img:not(.avatar):not(.emoji):not(.wp-smiley),
body.single-post .post-content img:not(.avatar):not(.emoji):not(.wp-smiley),
body.single-post .wp-block-post-content img:not(.avatar):not(.emoji):not(.wp-smiley),
body.single-post article .wp-post-image,
body.single-post .post-thumbnail img,
body.single-post .featured-image img,
body.single-post .entry-thumbnail img,
body.single-post .single-featured-image-header img {
    -webkit-box-reflect: none !important;
    transition: filter 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.khomanguon-image-hover-frame {
    position: relative;
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    line-height: 0;
    transition: box-shadow 240ms ease, transform 240ms ease;
    vertical-align: top;
}

.khomanguon-image-hover-frame > a,
.khomanguon-image-hover-frame > picture {
    display: block;
    max-width: 100%;
}

.khomanguon-image-hover-frame img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 0;
    -webkit-box-reflect: none !important;
}

.khomanguon-image-hover-frame::before {
    position: absolute;
    z-index: 2;
    top: -35%;
    bottom: -35%;
    left: -85%;
    width: 48%;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255, 255, 255, 0) 22%,
            rgba(255, 255, 255, 0.38) 38%,
            rgba(255, 245, 190, 0.9) 48%,
            rgba(180, 220, 255, 0.72) 54%,
            rgba(255, 255, 255, 0.28) 66%,
            transparent 100%
        );
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: skewX(-18deg) translateX(0);
}

.khomanguon-image-hover-frame:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 12px 34px rgba(250, 204, 21, 0.4), 0 0 46px rgba(34, 211, 238, 0.34);
    transform: translateY(-2px);
}

.khomanguon-image-hover-frame:hover::before {
    opacity: 1;
    animation: khomanguon-metallic-flash 900ms ease-out forwards;
}

.khomanguon-image-hover-frame:hover img {
    filter: brightness(1.16) contrast(1.08) saturate(1.1);
    transform: translateY(-2px);
}

body.single-post:not(.khomanguon-image-hover-js) .entry-content img:not(.avatar):not(.emoji):not(.wp-smiley):hover,
body.single-post:not(.khomanguon-image-hover-js) .post-content img:not(.avatar):not(.emoji):not(.wp-smiley):hover,
body.single-post:not(.khomanguon-image-hover-js) .wp-block-post-content img:not(.avatar):not(.emoji):not(.wp-smiley):hover,
body.single-post:not(.khomanguon-image-hover-js) article .wp-post-image:hover,
body.single-post:not(.khomanguon-image-hover-js) .post-thumbnail img:hover,
body.single-post:not(.khomanguon-image-hover-js) .featured-image img:hover,
body.single-post:not(.khomanguon-image-hover-js) .entry-thumbnail img:hover,
body.single-post:not(.khomanguon-image-hover-js) .single-featured-image-header img:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.86), 0 12px 34px rgba(250, 204, 21, 0.38), 0 0 42px rgba(34, 211, 238, 0.32);
    filter: brightness(1.12) contrast(1.04) saturate(1.08);
}

@keyframes khomanguon-metallic-flash {
    0% {
        left: -85%;
    }

    100% {
        left: 140%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.single-post .entry-content img:not(.avatar):not(.emoji):not(.wp-smiley),
    body.single-post .post-content img:not(.avatar):not(.emoji):not(.wp-smiley),
    body.single-post .wp-block-post-content img:not(.avatar):not(.emoji):not(.wp-smiley),
    body.single-post article .wp-post-image,
    body.single-post .post-thumbnail img,
    body.single-post .featured-image img,
    body.single-post .entry-thumbnail img,
    body.single-post .single-featured-image-header img {
        transition: filter 120ms ease, box-shadow 120ms ease;
    }

    .khomanguon-image-hover-frame:hover::before {
        animation: none;
        opacity: 0;
    }

    .khomanguon-image-hover-frame:hover,
    .khomanguon-image-hover-frame:hover img {
        transform: none;
    }

    body.single-post .entry-content img:not(.avatar):not(.emoji):not(.wp-smiley):hover,
    body.single-post .post-content img:not(.avatar):not(.emoji):not(.wp-smiley):hover,
    body.single-post .wp-block-post-content img:not(.avatar):not(.emoji):not(.wp-smiley):hover,
    body.single-post article .wp-post-image:hover,
    body.single-post .post-thumbnail img:hover,
    body.single-post .featured-image img:hover,
    body.single-post .entry-thumbnail img:hover,
    body.single-post .single-featured-image-header img:hover {
        transform: none;
    }
}
