/* ARGR - Spatial Canvas (shared page background: grid overlay + ambient aurora glows) */

.spatial-canvas {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-primary);
    overflow: hidden;
}

/* Luxury Grid Gridline Overlay */
.grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    pointer-events: none;
    z-index: 1;
}

/* Ambient Radial Blurs (Aurora Effect) */
.ambient-glows {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.7;
    transition: opacity var(--transition-smooth);
}

.glow-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    mix-blend-mode: screen;
}

[data-theme="light"] .glow-orb {
    mix-blend-mode: multiply;
    opacity: 0.15;
}

.glow-orb-1 {
    top: -10%;
    right: 15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(var(--accent-gold-rgb), 0.12) 0%, transparent 70%);
}

.glow-orb-2 {
    top: 40%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(138, 110, 75, 0.08) 0%, transparent 70%);
}

.glow-orb-3 {
    bottom: -10%;
    right: 10%;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(var(--accent-gold-rgb), 0.1) 0%, transparent 70%);
}