/*
 * NxGlow — soft light that follows the mouse inside panel cards (see js/nx-glow.js).
 * Two layers, like the reference effect: a background glow and a faint glow on the card's edge.
 * Tune the look with these variables (globally, or on any single card):
 */
:root {
    --nxg-rgb: 224, 164, 88;      /* glow colour as r, g, b (brand saffron) */
    --nxg-size: 260px;            /* radius of the background glow */
    --nxg-opacity: .10;          /* strength of the background glow — keep it subtle */
    --nxg-rim-size: 170px;        /* radius of the edge glow */
    --nxg-rim-opacity: .34;       /* strength of the edge glow */
}

/* The card becomes its own stacking context so the layers can sit behind its content. */
.nxg-host { isolation: isolate; }

.nxg-layer, .nxg-rim {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    opacity: 0; transition: opacity .6s ease;          /* slow fade-out */
}
.nxg-host.nxg-on > .nxg-layer, .nxg-host.nxg-on > .nxg-rim { opacity: 1; transition-duration: .35s; }   /* quicker fade-in */

.nxg-layer {
    background: radial-gradient(var(--nxg-size) circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--nxg-rgb), var(--nxg-opacity)), transparent 100%);
}

/* Edge glow: a 1px ring revealed only where the light is (mask keeps just the border area) */
.nxg-rim {
    padding: 1px;
    background: radial-gradient(var(--nxg-rim-size) circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--nxg-rgb), var(--nxg-rim-opacity)), transparent 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* The mouse light replaces the older hover "shine sweep" so the two never stack up. */
body.is-authed .metric-card:hover::before,
body.is-authed .monitor-card:hover::before,
body.is-authed .quick-action:hover::before { animation: none; }

@media (prefers-reduced-motion: reduce), (hover: none) {
    .nxg-layer, .nxg-rim { display: none; }
}