/* Cuadrícula global estática — elegancia Vercel */

:root {
    --vy-grid-base: #000000;
    --vy-grid-line: rgba(255, 255, 255, 0.06);
    --vy-grid-size: 64px;
}

html.vy-light {
    --vy-grid-base: #fafafa;
    --vy-grid-line: rgba(0, 0, 0, 0.06);
}

html:not(.vy-no-grid) {
    background-color: var(--vy-grid-base);
}

html:not(.vy-no-grid) body {
    background-color: transparent !important;
}

html.vy-light:not(.vy-no-grid) body.hub-layout-section,
html.vy-light:not(.vy-no-grid) body.hub-layout-home {
    background-color: transparent !important;
}

/* Cuadrícula fija, sin animación */
html:not(.vy-no-grid)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--vy-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--vy-grid-line) 1px, transparent 1px);
    background-size: var(--vy-grid-size) var(--vy-grid-size);
    background-position: center top;
    mask-image: radial-gradient(ellipse 110% 95% at 50% 0%, #000 15%, transparent 88%);
    -webkit-mask-image: radial-gradient(ellipse 110% 95% at 50% 0%, #000 15%, transparent 88%);
}

/* Brillo sutil superior (como Vercel hero) */
html:not(.vy-no-grid)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        ellipse 80% 50% at 50% -10%,
        rgba(255, 255, 255, 0.04) 0%,
        transparent 55%
    );
}

html.vy-light:not(.vy-no-grid)::after {
    background: radial-gradient(
        ellipse 80% 50% at 50% -10%,
        rgba(0, 0, 0, 0.03) 0%,
        transparent 55%
    );
}

html.vy-no-grid::before,
html.vy-no-grid::after,
body.vy-no-grid::before,
body.vy-no-grid::after {
    display: none !important;
}

/* Legacy: ocultar capa JS antigua si quedó en caché */
#vy-grid-bg {
    display: none !important;
}

/* Las páginas del hub no deben tapar la cuadrícula global */
html:not(.vy-no-grid) .inv-grid,
html:not(.vy-no-grid) .sv-grid,
html:not(.vy-no-grid) .gm-bg-grid,
html:not(.vy-no-grid) .cur-bg-grid,
html:not(.vy-no-grid) .shop-bg-grid {
    display: none !important;
}

html:not(.vy-no-grid) .inv-bg,
html:not(.vy-no-grid) .sv-bg,
html:not(.vy-no-grid) .gm-bg,
html:not(.vy-no-grid) .cur-bg,
html:not(.vy-no-grid) .shop-bg {
    background-color: transparent !important;
}

html:not(.vy-no-grid) .sv-bg {
    background-image: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(210, 210, 218, 0.1), transparent 55%) !important;
}

html.vy-light:not(.vy-no-grid) .inv-bg,
html.vy-light:not(.vy-no-grid) .sv-bg,
html.vy-light:not(.vy-no-grid) .gm-bg,
html.vy-light:not(.vy-no-grid) .cur-bg,
html.vy-light:not(.vy-no-grid) .shop-bg {
    background-color: transparent !important;
}

/* Dashboard: cuadrícula en toda la página, no solo el hero */
html:has(body.dash-page-root):not(.vy-no-grid)::before {
    mask-image: none;
    -webkit-mask-image: none;
}

html:not(.vy-no-grid) body.dash-page-root {
    background-color: transparent !important;
}

html:not(.vy-no-grid) body.dash-page-root .app-bg {
    background:
        radial-gradient(ellipse 100% 60% at 50% 0, rgba(34, 158, 217, 0.07) 0, transparent 55%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(191, 90, 242, 0.05) 0, transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 30%, rgba(48, 209, 88, 0.04) 0, transparent 60%) !important;
}

html:not(.vy-no-grid) body.dash-page-root .app-bg-grid {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    opacity: 1 !important;
    background-image:
        linear-gradient(var(--vy-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--vy-grid-line) 1px, transparent 1px) !important;
    background-size: var(--vy-grid-size) var(--vy-grid-size) !important;
}

html:not(.vy-no-grid) body.dash-page-root #shader-canvas,
html:not(.vy-no-grid) body.dash-page-root #app-particle-canvas {
    display: none !important;
}

/* Combos Cloud: misma cuadrícula a pantalla completa */
html:has(.cc-bg-grid):not(.vy-no-grid)::before,
html:has(header.cc-nav):not(.vy-no-grid)::before {
    mask-image: none;
    -webkit-mask-image: none;
}

html:not(.vy-no-grid) .cc-bg {
    background:
        radial-gradient(ellipse 90% 55% at 50% -10%, rgba(34, 158, 217, 0.09), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(167, 139, 250, 0.05), transparent 50%) !important;
}

html:not(.vy-no-grid) .cc-bg-grid {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    opacity: 1 !important;
    background-image:
        linear-gradient(var(--vy-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--vy-grid-line) 1px, transparent 1px) !important;
    background-size: var(--vy-grid-size) var(--vy-grid-size) !important;
}

html:not(.vy-no-grid) #cc-particle-canvas {
    display: none !important;
}

html.vy-light:not(.vy-no-grid) .cc-bg {
    background:
        radial-gradient(ellipse 90% 55% at 50% -10%, rgba(34, 158, 217, 0.06), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(167, 139, 250, 0.04), transparent 50%) !important;
}