/* ============================================
   Blur-Load: Shimmer Placeholder + Fade-In
   ============================================ */

.blur-load {
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}

/* Shimmer animation overlay */
.blur-load::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg,
            transparent 30%,
            rgba(255, 255, 255, 0.5) 50%,
            transparent 70%);
    background-size: 200% 100%;
    animation: blurShimmer 1.8s ease-in-out infinite;
    pointer-events: none;
}

/* Image starts invisible */
.blur-load>img {
    opacity: 0;
    transition: opacity 0.6s ease;
    position: relative;
    z-index: 2;
}

/* Loaded state: show image, hide shimmer */
.blur-load.loaded::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blur-load.loaded>img {
    opacity: 1;
}

.blur-load.loaded {
    background: transparent;
}

@keyframes blurShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}