/* ==========================================================================
   GRID.CSS — Irregular Technical Grid Background
   ========================================================================== */

/* 
   The grid must NOT be perfectly uniform.
   - Some vertical lines closer together, some farther apart
   - Some horizontal lines closer together, some farther apart
   - Subtle differences in spacing across the viewport
   - Resembles an experimental technical drawing / notebook grid
   - Keep it subtle, low opacity, supporting rather than overpowering
*/

.grid-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-grid);
    pointer-events: none;
    overflow: hidden;
}

/* Base grid layer — irregular vertical lines */
.grid-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-accent) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-accent) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-accent) 1px, transparent 1px);
    background-size: 
        280px 100%,
        420px 100%,
        180px 100%,
        360px 100%,
        220px 100%,
        310px 100%,
        90px 100%,
        140px 100%,
        60px 100%;
    background-position: 
        0 0,
        40px 0,
        120px 0,
        300px 0,
        500px 0,
        720px 0,
        20px 0,
        80px 0,
        950px 0;
    background-repeat: repeat-x;
    opacity: 0.6;
}

/* Horizontal grid lines — irregular spacing */
.grid-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(var(--color-grid-accent) 1px, transparent 1px),
        linear-gradient(var(--color-grid-accent) 1px, transparent 1px),
        linear-gradient(var(--color-grid-accent) 1px, transparent 1px),
        linear-gradient(var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(var(--color-grid-line) 1px, transparent 1px);
    background-size: 
        100% 160px,
        100% 240px,
        100% 120px,
        100% 200px,
        100% 60px,
        100% 90px,
        100% 45px,
        100% 300px,
        100% 180px;
    background-position: 
        0 0,
        0 30px,
        0 120px,
        0 280px,
        0 20px,
        0 80px,
        0 150px,
        0 400px,
        0 520px;
    background-repeat: repeat-y;
    opacity: 0.5;
}
/* Accent cross-hairs at some intersections — subtle technical feel */
.grid-background .grid-accent {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.grid-background .grid-accent::before,
.grid-background .grid-accent::after {
    content: '';
    position: absolute;
    background: var(--color-grid-accent);
    opacity: 0.3;
}

/* Small accent marks at specific grid intersections */
.grid-accent:nth-child(1)::before {
    top: 160px; left: 280px;
    width: 8px; height: 1px;
}
.grid-accent:nth-child(1)::after {
    top: 160px; left: 280px;
    width: 1px; height: 8px;
}

.grid-accent:nth-child(2)::before {
    top: 400px; left: 420px;
    width: 6px; height: 1px;
}
.grid-accent:nth-child(2)::after {
    top: 400px; left: 420px;
    width: 1px; height: 6px;
}

.grid-accent:nth-child(3)::before {
    top: 240px; left: 180px;
    width: 10px; height: 1px;
}
.grid-accent:nth-child(3)::after {
    top: 240px; left: 180px;
    width: 1px; height: 10px;
}

.grid-accent:nth-child(4)::before {
    top: 560px; left: 360px;
    width: 8px; height: 1px;
}
.grid-accent:nth-child(4)::after {
    top: 560px; left: 360px;
    width: 1px; height: 8px;
}

.grid-accent:nth-child(5)::before {
    top: 320px; left: 500px;
    width: 6px; height: 1px;
}
.grid-accent:nth-child(5)::after {
    top: 320px; left: 500px;
    width: 1px; height: 6px;
}

/* Subtle margin rulers on edges */
.grid-background .grid-rulers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Top ruler */
.grid-rulers::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-image: 
        linear-gradient(90deg, var(--color-grid-accent) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
    background-size: 20px 100%, 100px 100%;
    background-position: 0 0, 0 0;
    opacity: 0.4;
}

/* Left ruler */
.grid-rulers::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background-image: 
        linear-gradient(var(--color-grid-accent) 1px, transparent 1px),
        linear-gradient(var(--color-grid-line) 1px, transparent 1px);
    background-size: 100% 20px, 100% 100px;
    background-position: 0 0, 0 0;
    opacity: 0.4;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .grid-background::before {
        background-size: 
            200px 100%,
            300px 100%,
            140px 100%,
            260px 100%,
            180px 100%,
            240px 100%,
            70px 100%,
            100px 100%,
            50px 100%;
    }
    
    .grid-background::after {
        background-size: 
            100% 140px,
            100% 200px,
            100% 100px,
            100% 160px,
            100% 50px,
            100% 70px,
            100% 35px,
            100% 240px,
            100% 140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .grid-background {
        opacity: 0.3;
    }
}