@media (prefers-reduced-motion: no-preference) {   
    
    /* Static ---------------------------------------------------- */

    body::before {
        background-image: url("/wp-content/themes/nnndesign/assets/src/noise-light.png");
        content: "";
        height: calc(100% + 20rem);
        opacity: 0.6;
        position: fixed;
            inset-block-start: -10rem;
            inset-inline-start: -10rem;
        pointer-events: none;
        width: calc(100% + 20rem);
        z-index: 9999;
        animation: noise 1s steps(2) infinite;
    }
    @keyframes noise {
        0%  { transform:translate3d(0, 9rem, 0)      }
        10% { transform:translate3d(-1rem, -4rem, 0) }
        20% { transform:translate3d(-8rem, 2rem, 0)  }
        30% { transform:translate3d(9rem, -9rem, 0)  }
        40% { transform:translate3d(-2rem, 7rem, 0)  }
        50% { transform:translate3d(-9rem, -4rem, 0) }
        60% { transform:translate3d(2rem, 6rem, 0)   }
        70% { transform:translate3d(7rem, -8rem, 0)  }
        80% { transform:translate3d(-9rem, 1rem, 0)  }
        90% { transform:translate3d(6rem, -5rem, 0)  }
        to  { transform:translate3d(-7rem, 0, 0)     }
    }

    /* Scanline -------------------------------------------------- */

    body::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 1px;
        background-color: var(--wp--preset--color--secondary);
        pointer-events: none;
        z-index: 9999;
        animation: scanline 10s steps(1) infinite;
    }
    @keyframes scanline {
        0%   { top: 0; opacity: 0 }
        8%   { top: 0; opacity: 0 }
        9%   { top: 27%; opacity: 0.08 }
        10%  { top: 27%; opacity: 0 }
        25%  { top: 0; opacity: 0 }
        26%  { top: 62%; opacity: 0.09 }
        27%  { top: 62%; opacity: 0 }
        45%  { top: 0; opacity: 0 }
        46%  { top: 15%; opacity: 0.06 }
        47%  { top: 15%; opacity: 0 }
        60%  { top: 0; opacity: 0 }
        61%  { top: 82%; opacity: 0.07 }
        62%  { top: 82%; opacity: 0 }
        80%  { top: 0; opacity: 0 }
        81%  { top: 43%; opacity: 0.05 }
        82%  { top: 43%; opacity: 0 }
        to   { top: 0; opacity: 0 }
    }

    /* Transition ------------------------------------------------ */

    #primary .inner {
        opacity: 0;
        transition: opacity 400ms ease;
    }
    .page-is-loaded #primary .inner {
        opacity: 1;
    }
    .page-is-loaded.glitch-out .site-header,
    .page-is-loaded.glitch-out #primary,
    .page-is-loaded.glitch-out .site-footer {
        will-change: opacity;
    }
    @keyframes glitchOut {
        0%   { opacity: 1 }
        8%   { opacity: 1 }
        9%   { opacity: 0.08 }
        10%  { opacity: 0 }
        25%  { opacity: 0 }
        26%  { opacity: 0.06 }
        27%  { opacity: 0 }
        45%  { opacity: 10 }
        46%  { opacity: 0.04 }
        47%  { opacity: 0 }
        60%  { opacity: 0 }
        61%  { opacity: 0.03 }
        62%  { opacity: 0 }
        80%  { opacity: 0 }
        81%  { opacity: 0.01 }
        82%  { opacity: 0 }
        to   { opacity: 0 }
    }
    .page-is-loaded.glitch-out .site-header,
    .page-is-loaded.glitch-out #primary,
    .page-is-loaded.glitch-out .site-footer {
        animation: glitchOut 1000ms ease forwards;
    }

}