/* Shaders - Dither, Voronoi, Canvas Styles */

/* Dither Plugin CSS - Plain CSS version */
.dither {
    --dither-gray: 1;
    --dither-contrast: 120;
    --dither-bright: 1;
    --dither-blur: 0px;
    --dither-cell: 20px;
    --dither-opacity: 1;
    --dither-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAu0lEQVQ4T6WSMQqFMBBEE2wDXiVgG8gtglilCuIpcoogVqlEPIVgK3gVIa2Qzw9YbIpttlqGgbcMM5wxlr33LMbI/nccx3I/PQwD0LXPj+OgAaSUBWCtLZ+2bSv308uyAF37/HkeGkAIASL0fQ8yT9MEdO3z67poAKUUiDDPM8g87zvQtc/f96UBmqZBazTG4Ds4z5MG6LoOrTGEgO8gpUQDtG2L1uicw3dw3zcNoLVGa1zXFd9BzpkE+AFp94/4eKx9+AAAAABJRU5ErkJggg==);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    z-index: 0;
    background: #000;
    filter: grayscale(var(--dither-gray)) brightness(var(--dither-bright)) blur(var(--dither-blur)) contrast(var(--dither-contrast));
}

.dither::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: var(--dither-image);
    background-repeat: repeat;
    background-size: var(--dither-cell) var(--dither-cell);
    background-position: 0 0;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    opacity: var(--dither-opacity);
    mix-blend-mode: screen;
}

.dither-none {
    filter: none !important;
    background: none !important;
}

.dither-none::after {
    content: none !important;
    background: none !important;
}

/* Dither effect styles */
.dither-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    isolation: isolate;
    overflow: hidden;
    z-index: 0;
    background: #000;
}

.dither-container.dither-active {
    filter: grayscale(1) brightness(1.1) contrast(140%);
}

.dither-container.dither-active::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAu0lEQVQ4T6WSMQqFMBBEE2wDXiVgG8gtglilCuIpcoogVqlEPIVgK3gVIa2Qzw9YbIpttlqGgbcMM5wxlr33LMbI/nccx3I/PQwD0LXPj+OgAaSUBWCtLZ+2bSv308uyAF37/HkeGkAIASL0fQ8yT9MEdO3z67poAKUUiDDPM8i87zvQtc/f96UBmqZBazTG4Ds4z5MG6LoOrTGEgO8gpUQDtG2L1uicw3dw3zcNoLVGa1zXFd9BzpkE+AFp94/4eKx9+AAAAABJRU5ErkJggg==");
    background-repeat: repeat;
    background-size: 16px 16px;
    background-position: 0 0;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    opacity: 0.8;
    mix-blend-mode: screen;
}

#voronoiCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Shader Section - Full width at section start */
.shader-section-full {
    position: relative;
    width: 100vw;
    height: 120px;
    background: transparent;
    overflow: hidden;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: var(--edge-column-width);
    padding-right: var(--edge-column-width);
    box-sizing: border-box;
    z-index: -1;
}

.shader-section-full canvas {
    position: absolute;
    top: 0;
    left: calc(var(--edge-column-width) + var(--border-width));
    width: calc(100% - var(--edge-column-width) * 2 - var(--border-width) * 2);
    height: 100%;
    z-index: -1;
}

/* Mobile: Full width shader borders (edge-to-edge) */
@media (max-width: 768px) {
    .shader-section-full {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }
    
    .shader-section-full canvas {
        left: 0;
        width: 100%;
    }
}

.mitosis-shader-bg {
    position: absolute;
    top: -140px;
    right: -100px;
    width: 600px;
    height: 500px;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
}