/* css/grid-zone.css */
@layer layout {

/* GLOBAL GRID ZONE */
.site-grid-zone {
    position: relative;

    isolation: isolate;

    overflow: hidden;
}

.site-grid-zone::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(113, 76, 255, 0.75) 1.35px,
            transparent 1.35px
        ),
        radial-gradient(
            circle,
            rgba(211, 240, 10, 0.28) 1px,
            transparent 1px
        );

    background-size:
        24px 24px,
        72px 72px;

    background-position:
        0 0,
        12px 12px;

    opacity: 0.18;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 3%,
            black 97%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 3%,
            black 97%,
            transparent 100%
        );

    animation:
        global-grid-drift 18s linear infinite;
}

@keyframes global-grid-drift {

    from {
        background-position:
            0 0,
            12px 12px;
    }

    to {
        background-position:
            48px 48px,
            84px 84px;
    }
}

}