/* Skeleton Loading & Lazy Image Animations */
.skeleton-container {
    background-color: #e5e7eb;
    /* gray-200 */
    position: relative;
    overflow: hidden;
}

.skeleton::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Base state for lazy images */
.lazy-image {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Loaded state - FORCE override of any utility classes like opacity-0 */
.lazy-image.loaded {
    opacity: 1 !important;
}

/* Fade out skeleton background once loaded */
.skeleton-container.loaded {
    background-color: transparent !important;
    transition: background-color 0.5s ease-in-out;
}

.skeleton-container.loaded::after {
    display: none;
}