/* Dithering effect specific styles */

/* Initially hide all images until processed */
img:not(.dithered):not(.no-dither) {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Make dithered images look crisper */
img.dithered {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    opacity: 1; /* Show the image once dithered */
    /* Ensure transparency is preserved */
    background-color: transparent !important;
}

/* Show images when classic mode is disabled */
body.classic-mode-disabled img {
    opacity: 1 !important;
    transition: opacity 0.3s ease;
}

/* Style for images that are actively being processed */
img.dithering-in-progress {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Optional: Add a subtle border to dithered images, but only if they don't have transparent parts */
img.dithered:not(.no-border) {
    border: 1px solid var(--dark-gray);
    padding: 2px;
    background-color: var(--white);
}

/* Add a class for images with transparency that shouldn't have a border or background */
img.dithered.has-transparency {
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/* Style for images that can't be dithered due to CORS issues */
img.no-dither {
    /* Subtle indicator that it's not dithered */
    opacity: 1; /* Show the image if marked as no-dither */
}

/* Styling for dithering demo images */
.dither-demo-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 1em 0;
}

.dither-demo-item {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    margin-bottom: 1em;
    text-align: center;
}

.dither-demo-item img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 1px solid var(--dark-gray);
}

/* Transition effect when toggling dithering */
img.dithered {
    transition: filter 0.3s ease;
}

/* Visual indicator when dithering is disabled */
body.dithering-disabled img.dithered {
    filter: grayscale(0.5) brightness(1.1); /* Subtle effect when dithering is off */
}

/* Container for dithered image galleries */
.dithered-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.dithered-gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
}