/* Blurhash Image Enhancement Styles */

/* Hide images with blurhash initially, but allow them to show when loaded */
img[data-blurhash]:not(.loaded) {
    opacity: 0 !important;
    transition: opacity 0.3s ease;
}

img[data-blurhash].loaded {
    opacity: 1 !important;
    transition: opacity 0.3s ease;
}

/* Show images in Webflow design mode */
.wf-design-mode img[data-blurhash] {
    opacity: 1 !important;
    transition: opacity 0.3s ease;
}

/* Blurhash container styles */
.blurhash-enhanced {
    position: relative;
    display: inline-block;
}

.blurhash-enhanced img {
    transition: opacity 0.3s ease;
}

.blurhash-enhanced .blurhash-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.blurhash-enhanced img.loaded {
    z-index: 2;
}

.blurhash-enhanced .blurhash-canvas.hidden {
    opacity: 0;
}

/* Loading animation - pulse effect */
.blurhash-enhanced.loading .blurhash-canvas {
    animation: blurhash-pulse 1s ease-in-out infinite;
}

@keyframes blurhash-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}