/**
 * Noise Overlay Styles
 * Shared component for noise texture overlay
 * Used on: About page, Blog page, Dynamic pages
 */

/* Noise overlay base - for inner pages */
.sphere-noise-overlay {
    position: absolute;
    background-image: url('../img/noise-bg-large.png');
    background-repeat: repeat;
    background-size: 65px 65px;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
    filter: brightness(0.1);
}

/* Noise overlay for Dynamic pages - covers the background image */
.dynamic-page-main-column-sect .sphere-noise-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    mask-image: none;
    -webkit-mask-image: none;
}

/* About page - noise on body covers gradient area */
body.about-page::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: auto;
    aspect-ratio: 1920 / 900;
    background-image: url('../img/noise-bg-large.png');
    background-repeat: repeat;
    background-size: 65px 65px;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
    filter: brightness(0.1);
}

/* Single case page - noise covers entire viewport */
body.single-case-page::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../img/noise-bg-large.png');
    background-repeat: repeat;
    background-size: 65px 65px;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
    filter: brightness(0.1);
}

/* Blog page - noise on body covers entire viewport */
body.blog-page::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../img/noise-bg-large.png');
    background-repeat: repeat;
    background-size: 65px 65px;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
    filter: brightness(0.1);
}

/* Cases page - noise on body covers entire viewport */
body.cases-page::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../img/noise-bg-large.png');
    background-repeat: repeat;
    background-size: 65px 65px;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
    filter: brightness(0.1);
}

/* Services page - noise on body covers entire viewport */
body.services-page::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../img/noise-bg-large.png');
    background-repeat: repeat;
    background-size: 65px 65px;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
    filter: brightness(0.1);
}

/* Article page - noise overlay via dedicated div element */
.article-noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/noise-bg-large.png');
    background-repeat: repeat;
    background-size: 65px 65px;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
    filter: brightness(0.1);
}