/* Dithering Patterns - Black and White Pixels Only */
/* Creates gray effects using only pure black (#000000) and white (#FFFFFF) pixels */

/* Dithering Effect - Black and White 1-bit simulation */
/* When dithering is ON (default, body does NOT have .no-dither), apply grayscale filter */
/* When dithering is OFF (body.no-dither), show images in color */

/* Default: Apply grayscale/black and white filter to images and thumbnails */
/* These rules must override the filter: none rules in video.css and music.css */
/* Since dither.css loads AFTER video.css and music.css, these rules will win */

/* Video thumbnails - override video.css filter: none */
/* Must come after video.css in the cascade */
/* Use body selector to increase specificity */
/* Only apply if dithering is NOT disabled (check both body class and html data attribute) */
html:not([data-dither-disabled="true"]) body:not(.no-dither) .video-thumbnail,
html:not([data-dither-disabled="true"]) body:not(.no-dither) .video-thumbnail-container img,
html:not([data-dither-disabled="true"]) body:not(.no-dither) .video-item img,
html:not([data-dither-disabled="true"]) body:not(.no-dither) .video-wrapper img,
html:not([data-dither-disabled="true"]) body:not(.no-dither) .video-grid-2x2 .video-thumbnail,
html:not([data-dither-disabled="true"]) body:not(.no-dither) .video-grid-2x2 .video-thumbnail-container img,
html:not([data-dither-disabled="true"]) body:not(.no-dither) .release-video-item .video-wrapper .video-thumbnail-container img {
    filter: grayscale(100%) contrast(200%) !important;
    -webkit-filter: grayscale(100%) contrast(200%) !important;
}

/* Release artwork - override music.css filter: grayscale(0%) */
html:not([data-dither-disabled="true"]) body:not(.no-dither) .release-artwork img,
html:not([data-dither-disabled="true"]) body:not(.no-dither) .release-artwork-large img,
html:not([data-dither-disabled="true"]) body:not(.no-dither) .release-card .release-artwork img {
    filter: grayscale(100%) contrast(200%) !important;
    -webkit-filter: grayscale(100%) contrast(200%) !important;
}

/* General images - but exclude already dithered ones */
/* Dithered images should NOT have CSS filter applied */
html:not([data-dither-disabled="true"]) body:not(.no-dither) img:not([data-dithered="true"]) {
    filter: grayscale(100%) contrast(200%) !important;
    -webkit-filter: grayscale(100%) contrast(200%) !important;
}

/* Ensure dithered images don't get CSS filter */
body img[data-dithered="true"] {
    filter: none !important;
    -webkit-filter: none !important;
}

/* When dithering is disabled, show images in color */
/* Also check for data attribute as fallback */
body.no-dither .video-thumbnail,
body.no-dither .video-thumbnail-container img,
body.no-dither .video-item img,
body.no-dither .video-wrapper img,
body.no-dither .video-grid-2x2 .video-thumbnail,
body.no-dither .video-grid-2x2 .video-thumbnail-container img,
body.no-dither .release-artwork img,
body.no-dither .release-artwork-large img,
body.no-dither img,
html[data-dither-disabled="true"] .video-thumbnail,
html[data-dither-disabled="true"] .video-thumbnail-container img,
html[data-dither-disabled="true"] .video-item img,
html[data-dither-disabled="true"] .video-wrapper img,
html[data-dither-disabled="true"] .release-artwork img,
html[data-dither-disabled="true"] .release-artwork-large img,
html[data-dither-disabled="true"] img {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Disable dithering background patterns when .no-dither class is on body */
body.no-dither .dither-gray-50,
body.no-dither .dither-gray-25,
body.no-dither .dither-gray-75 {
    background-image: none !important;
    background-color: #808080 !important; /* Solid gray when dithering is off */
}

/* 50% Gray - Checkerboard pattern (1x1 pixels for subtle dither) */
.dither-gray-50 {
    background-color: var(--color-white);
    background-image: 
        repeating-linear-gradient(
            0deg,
            var(--color-white) 0px,
            var(--color-white) 1px,
            var(--color-black) 1px,
            var(--color-black) 2px
        ),
        repeating-linear-gradient(
            90deg,
            var(--color-white) 0px,
            var(--color-white) 1px,
            var(--color-black) 1px,
            var(--color-black) 2px
        );
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px;
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
}

/* 25% Gray - Ordered dither pattern (lighter gray) */
.dither-gray-25 {
    background-color: var(--color-white);
    background-image: 
        repeating-linear-gradient(
            0deg,
            var(--color-white) 0px,
            var(--color-white) 6px,
            var(--color-black) 6px,
            var(--color-black) 8px
        ),
        repeating-linear-gradient(
            90deg,
            var(--color-white) 0px,
            var(--color-white) 6px,
            var(--color-black) 6px,
            var(--color-black) 8px
        );
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
}

/* 75% Gray - Ordered dither pattern (darker gray) */
.dither-gray-75 {
    background-color: var(--color-black);
    background-image: 
        repeating-linear-gradient(
            0deg,
            var(--color-black) 0px,
            var(--color-black) 6px,
            var(--color-white) 6px,
            var(--color-white) 8px
        ),
        repeating-linear-gradient(
            90deg,
            var(--color-black) 0px,
            var(--color-black) 6px,
            var(--color-white) 6px,
            var(--color-white) 8px
        );
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
}