/**
 * Distorted Pixels Section — overlay styles
 */

/* Section must be relative so canvas can overlay */
[data-dps="1"] {
    position: relative;
    overflow: hidden;
}

/* Canvas overlay — sits on top of .section-bg, below content */
[data-dps="1"] .dps-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    display: block;
}

/* Section content stays above the canvas */
[data-dps="1"] > *:not(.dps-canvas):not(.section-bg):not(.bg) {
    position: relative;
    z-index: 2;
}

/* section-bg stays below, canvas renders over it replacing it visually */
[data-dps="1"] .section-bg,
[data-dps="1"] .bg {
    z-index: 0;
    /* Keep visible: the canvas renders the same image with distortion */
}

/* Ensure canvas fills the full section including padding areas */
[data-dps="1"] .dps-canvas {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}