/*
 * Crush Image Motion Optimizer
 * Lightweight CSS-only movement for article images.
 */

.crush-motion-picture {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    vertical-align: middle;
}

.crush-motion-image,
article img.crush-motion-image,
.entry-content img.crush-motion-image,
.post img.crush-motion-image,
.site-main img.crush-motion-image,
#content img.crush-motion-image {
    opacity: 0 !important;
    transform: translateY(14px) scale(1.01) !important;
    transition:
        opacity 700ms ease,
        filter 900ms ease;
    will-change: opacity, transform;
}

.crush-motion-image.crush-motion-visible,
article img.crush-motion-image.crush-motion-visible,
.entry-content img.crush-motion-image.crush-motion-visible,
.post img.crush-motion-image.crush-motion-visible,
.site-main img.crush-motion-image.crush-motion-visible,
#content img.crush-motion-image.crush-motion-visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    animation: crush-soft-kenburns 7s ease-in-out infinite alternate;
    transform-origin: center center;
}

.crush-motion-image.crush-motion-visible:hover,
article img.crush-motion-image.crush-motion-visible:hover,
.entry-content img.crush-motion-image.crush-motion-visible:hover,
.post img.crush-motion-image.crush-motion-visible:hover,
.site-main img.crush-motion-image.crush-motion-visible:hover,
#content img.crush-motion-image.crush-motion-visible:hover {
    transform: translateY(-3px) scale(1.045) !important;
    filter: saturate(1.03) contrast(1.02);
}

.single-post .entry-content .crush-motion-image:first-of-type,
.single-post .wp-block-post-content .crush-motion-image:first-of-type {
    animation: crush-soft-kenburns 14s ease-in-out infinite alternate;
    transform-origin: center center;
}

@keyframes crush-soft-kenburns {
    0% {
        transform: translateY(0) scale(1);
    }
    100% {
        transform: translateY(-4px) scale(1.045);
    }
}

@media (prefers-reduced-motion: reduce) {
    .crush-motion-image,
    .crush-motion-image.crush-motion-visible,
    .crush-motion-image.crush-motion-visible:hover,
    .single-post .entry-content .crush-motion-image:first-of-type,
    .single-post .wp-block-post-content .crush-motion-image:first-of-type {
        animation: none;
        opacity: 1;
        transform: none;
        transition: none;
        filter: none;
    }
}