/* ============================================
   GLOW EFFECT (CI colors)
   Cursor-tracking spotlight border for tiles
   ============================================ */

[data-glow] {
    --glow-hue: 217;
    --glow-saturation: 91;
    --glow-lightness: 60;
    --glow-size: 260;
    --glow-border: 2;
    --border-size: calc(var(--glow-border) * 1px);
    --spotlight-size: calc(var(--glow-size) * 1px);

    position: relative;
    border: var(--border-size) solid rgba(37, 99, 235, 0.12);
    background-image: radial-gradient(
        var(--spotlight-size) var(--spotlight-size) at
        calc(var(--x, -500) * 1px)
        calc(var(--y, -500) * 1px),
        hsl(var(--glow-hue) calc(var(--glow-saturation) * 1%) calc(var(--glow-lightness) * 1%) / 0.12),
        transparent
    );
    background-attachment: fixed;
    background-repeat: no-repeat;
    isolation: isolate;
}

[data-glow]::before,
[data-glow]::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: calc(var(--border-size) * -1);
    border: var(--border-size) solid transparent;
    border-radius: inherit;
    background-attachment: fixed;
    background-repeat: no-repeat;
    mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
    -webkit-mask-composite: intersect;
    opacity: 0;
    transition: opacity 0.3s ease;
}

[data-glow]:hover::before,
[data-glow]:hover::after {
    opacity: 1;
}

[data-glow]::before {
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
        calc(var(--x, -500) * 1px)
        calc(var(--y, -500) * 1px),
        hsl(var(--glow-hue) calc(var(--glow-saturation) * 1%) calc(var(--glow-lightness) * 1%) / 0.9),
        transparent 100%
    );
    filter: brightness(1.3);
}

[data-glow]::after {
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.4) calc(var(--spotlight-size) * 0.4) at
        calc(var(--x, -500) * 1px)
        calc(var(--y, -500) * 1px),
        hsl(0 0% 100% / 0.9),
        transparent 100%
    );
}

.category-card[data-glow],
.product-card[data-glow] {
    border-radius: 10px;
}