#bg-grid {
    --grid-cell-size: 36px;
    --grid-pattern-size: 180px;
    --light-rgb: 5, 94, 226;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    background: #eef0f3;
    overflow: hidden;
}
#bg-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="g" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(0,0,0,0.07)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23g)"/></svg>'),
        linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%);
    background-size: var(--grid-pattern-size) var(--grid-pattern-size), 100% 100%;
    opacity: 0.4;
    animation: bgGridDrift 18s linear infinite;
    pointer-events: none;
}
#bg-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 18%, rgba(5, 94, 226, 0.03) 50%, transparent 82%),
        radial-gradient(circle at 50% 50%, rgba(5, 94, 226, 0.06) 0%, transparent 58%);
    animation: bgShimmer 8s ease-in-out infinite;
    pointer-events: none;
}
.bg-grid-lights {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.bg-grid-light {
    position: absolute;
    top: 0; left: 0;
    width: 6px; height: 6px;
    margin-top: -3px; margin-left: -3px;
    opacity: 0;
    will-change: transform, opacity;
}
.bg-grid-light__head {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(var(--light-rgb), 0.95) 45%, rgba(var(--light-rgb), 0.18) 100%);
    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.62),
        0 0 12px rgba(var(--light-rgb), 0.52),
        0 0 18px rgba(var(--light-rgb), 0.24);
}
.bg-grid-light__trail {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(0.6px);
}
.bg-grid-light[data-dir='r'] .bg-grid-light__trail {
    top: 50%; right: 3px;
    width: 60px; height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(var(--light-rgb), 0) 0%, rgba(var(--light-rgb), 0.18) 38%, rgba(var(--light-rgb), 0.92) 100%);
}
.bg-grid-light[data-dir='l'] .bg-grid-light__trail {
    top: 50%; left: 3px;
    width: 60px; height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(var(--light-rgb), 0.92) 0%, rgba(var(--light-rgb), 0.18) 62%, rgba(var(--light-rgb), 0) 100%);
}
.bg-grid-light[data-dir='d'] .bg-grid-light__trail {
    left: 50%; bottom: 3px;
    width: 1px; height: 60px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(var(--light-rgb), 0) 0%, rgba(var(--light-rgb), 0.18) 38%, rgba(var(--light-rgb), 0.92) 100%);
}
.bg-grid-light[data-dir='u'] .bg-grid-light__trail {
    left: 50%; top: 3px;
    width: 1px; height: 60px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(var(--light-rgb), 0.92) 0%, rgba(var(--light-rgb), 0.18) 62%, rgba(var(--light-rgb), 0) 100%);
}
@keyframes bgGridDrift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-10px, 8px, 0); }
}
@keyframes bgShimmer {
    0% { transform: translateX(-100%) skewX(-15deg); opacity: 0; }
    50% { opacity: 0.6; }
    100% { transform: translateX(100%) skewX(-15deg); opacity: 0; }
}