.page-loader {
    background: transparent;
    isolation: isolate;
}

.page-loader::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background: #090a08;
    content: "";
}

.page-loader__grain {
    z-index: -1;
}

.hero-pattern {
    position: absolute;
    z-index: -3;
    inset: 0;
    background-color: #2b2b31;
    background-image: url('../img/pattern.svg');
    background-position: center top;
    background-repeat: repeat;
    background-size: 62px 68px;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
    .hero-pattern {
        will-change: auto;
    }
}