/* Animated 3D grid shared by every page. It sits on the root pseudo-element so each page
   keeps using body::before for its own glow layer, and it stays behind all content
   because html::before precedes body in tree order. */

html::before {
    content: "";
    position: fixed;
    inset: -40% -40% -10% -40%;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(620px) rotateX(62deg);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, transparent 85%);
    animation: sceneGridDrift 18s linear infinite;
}

@keyframes sceneGridDrift {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 64px, 64px 0;
    }
}

@media (max-width: 600px) {
    html::before {
        background-size: 44px 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html::before {
        animation: none;
    }
}