/* Pointer-tracked network spotlight cards. */
.glow-card {
    --glow-x: 50%;
    --glow-y: 50%;
    --glow-rgb: 70, 159, 255;
    --glow-edge-rgb: 99, 245, 210;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(123, 160, 219, 0.16);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        rgba(7, 12, 25, 0.72);
    box-shadow:
        0 1.1rem 2.8rem rgba(0, 0, 0, 0.18),
        inset 0 1px rgba(255, 255, 255, 0.045);
    transform: translateZ(0);
    transition:
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 260ms ease;
}

.glow-card--speed {
    --glow-rgb: 22, 140, 245;
    --glow-edge-rgb: 98, 168, 255;
}

.glow-card--privacy {
    --glow-rgb: 52, 216, 184;
    --glow-edge-rgb: 99, 245, 210;
}

.glow-card--platform {
    --glow-rgb: 139, 111, 255;
    --glow-edge-rgb: 177, 141, 255;
}

.glow-card::before,
.glow-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms ease;
}

.glow-card::before {
    z-index: -1;
    background:
        radial-gradient(
            17rem circle at var(--glow-x) var(--glow-y),
            rgba(var(--glow-rgb), 0.22),
            rgba(var(--glow-rgb), 0.075) 34%,
            transparent 68%
        );
}

.glow-card::after {
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    background:
        radial-gradient(
            9rem circle at var(--glow-x) var(--glow-y),
            rgba(var(--glow-edge-rgb), 0.95),
            rgba(var(--glow-rgb), 0.44) 38%,
            transparent 72%
        );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.glow-card > * {
    position: relative;
    z-index: 1;
}

.glow-card:hover,
.glow-card.is-glowing {
    border-color: rgba(var(--glow-edge-rgb), 0.22);
    box-shadow:
        0 1.5rem 3.5rem rgba(0, 0, 0, 0.24),
        0 0 2.2rem rgba(var(--glow-rgb), 0.09),
        inset 0 1px rgba(255, 255, 255, 0.06);
    transform: translateY(-4px);
}

.glow-card:hover::before,
.glow-card:hover::after,
.glow-card.is-glowing::before,
.glow-card.is-glowing::after {
    opacity: 1;
}

:root[data-theme="light"] .noise.glow-card {
    border-color: rgba(83, 119, 157, 0.18);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(241, 247, 253, 0.72)),
        rgba(255, 255, 255, 0.72);
    box-shadow:
        0 1rem 2.5rem rgba(42, 71, 103, 0.09),
        inset 0 1px rgba(255, 255, 255, 0.94);
}

:root[data-theme="light"] .noise.glow-card::before {
    background:
        radial-gradient(
            18rem circle at var(--glow-x) var(--glow-y),
            rgba(var(--glow-rgb), 0.17),
            rgba(var(--glow-rgb), 0.055) 36%,
            transparent 69%
        );
}

:root[data-theme="light"] .noise.glow-card:hover,
:root[data-theme="light"] .noise.glow-card.is-glowing {
    border-color: rgba(var(--glow-edge-rgb), 0.34);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 253, 0.82)),
        rgba(255, 255, 255, 0.86);
    box-shadow:
        0 1.4rem 3.3rem rgba(42, 71, 103, 0.15),
        0 0 2rem rgba(var(--glow-rgb), 0.1),
        inset 0 1px rgba(255, 255, 255, 0.98);
}

@media (hover: none), (pointer: coarse) {
    .glow-card::before {
        opacity: 0.42;
    }

    .glow-card::after {
        opacity: 0.28;
    }

    .glow-card.is-glowing {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .glow-card,
    .glow-card::before,
    .glow-card::after {
        transition-duration: 1ms;
    }

    .glow-card.is-glowing {
        transform: none;
    }
}