/*
    Canvas layer system — full-screen pixel layers stacked
    on top of each other inside #uiLayers.
    Every source image is 960 × 540 and every canvas occupies
    the same viewport area. This keeps all PNG layers aligned.
*/

#uiLayers {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.pixel-layer {
    position: absolute;
    inset: 0;

    display: block;

    width: 100vw;
    height: 100vh;

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/*
    The UI artwork is rendered white once, then recoloured by the compositor.
    This avoids redrawing several viewport-sized canvases on every theme frame.
*/
#uiCanvas,
#pfpFrameCanvas,
.canvas-button {
    filter: brightness(var(--ui-brightness));
    transition: filter var(--theme-transition-duration) ease;
}

/* Layer z-index stack */

/* Masked templates sit behind the UI artwork. */
.masked-image-layer {
    z-index: 0;
    pointer-events: none;
}

/* Native media keeps GIF/APNG animation and video playback accelerated. */
.masked-media-layer {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    pointer-events: none;

    mask-repeat: no-repeat;
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
}

.masked-media-layer__bg {
    position: absolute;
    display: block;
    max-width: none;

    filter: blur(48px) brightness(0.4);

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.masked-media-layer__media {
    position: absolute;
    display: block;
    max-width: none;
    z-index: 1;

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#uiCanvas {
    z-index: 1;
    pointer-events: none;
}

#pfpFrameCanvas {
    z-index: 2;
    pointer-events: none;
}

#blogButton {
    z-index: 3;
}

#galleryButton {
    z-index: 4;
}

#musicButton {
    z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
    #uiCanvas,
    #pfpFrameCanvas,
    .canvas-button {
        transition: none;
    }
}