/**
 * Frontend styles for WooCommerce Hover Image plugin
 */

/* Base hover image styles - designed to work with existing theme animations */
.wc-hover-image-enabled {
    /* Don't override existing transitions, let theme handle them */
}

/* Pulsing animation for loading state */
@keyframes wcHoverImagePulse {
    0% {
        opacity: 1 !important;
        filter: brightness(1);
    }
    50% {
        opacity: 0.6 !important;
        filter: brightness(0.8);
    }
    100% {
        opacity: 1 !important;
        filter: brightness(1);
    }
}

/* Loading state - ensure it's visible */
img.wc-hover-image-loading,
.wc-hover-image-container .wc-hover-image-loading,
.wc-hover-image-container img.wc-hover-image-enabled.wc-hover-image-loading {
    animation-name: wcHoverImagePulse !important;
    animation-duration: 0.8s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
}

.wc-hover-image-container {
    position: relative !important;
    display: inline-block;
}

.wc-hover-image-alternate {
    position: absolute !important;
    top: 0;
    left: 0;
    opacity: 0 !important;
    transition: opacity 0.1s ease-in-out !important;
    pointer-events: none;
    z-index: 10;
    max-width: 100%;
    height: auto;
    border-radius: inherit;
    object-fit: cover;
    filter: none !important;
}

.wc-hover-image-alternate.visible {
    opacity: 1 !important;
    filter: none !important;
}

/* Ensure proper positioning in various theme layouts */
.wc-hover-image-container img.wc-hover-image-alternate {
    object-fit: cover;
    border-radius: inherit;
    /* Only transition opacity, not other properties */
    transition: opacity 0.1s ease-in-out !important;
}

/* Handle lazy loading conflicts */
.wc-hover-image-container .lazyline-wrapper {
    position: relative;
}

/* Ensure the alternate image inherits styling from the original */
.wc-hover-image-alternate {
    box-shadow: inherit;
    border: inherit;
}

/* Prevent hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .wc-hover-image-enabled,
    .wc-hover-image-alternate {
        transition: none !important;
    }
    
    .wc-hover-image-alternate {
        display: none !important;
    }
}