/**
 * Cursor-following border glow effect
 * Creates a subtle highlight on the border portion nearest the cursor
 */

/* Cards that get the glow effect */
.hp-features__card,
.hp-patterns__card {
    position: relative;
    --glow-x: 50%;
    --glow-y: 50%;
    --glow-size: 280px;
    --glow-size-bg: 400px; /* Larger, blurrier for background */
    --glow-color: oklch(0.85 0.2 117.354); /* Brighter green */
    --glow-color-bg: oklch(0 0 0 / 0); /* Black for bg, starts invisible */
    --border-color: oklch(0.531001 0.143 117.354); /* Original border */
    overflow: visible !important; /* Override any overflow:hidden to allow glow to render */
    background:
        radial-gradient(
            var(--glow-size-bg) circle at var(--glow-x) var(--glow-y),
            var(--glow-color-bg),
            transparent 70%
        ),
        var(--neutral-ultra-dark, #141414) !important; /* Override Etch page styles */
    transition: --glow-color-bg 0.3s ease;
}

/* Background glow activates on hover */
.hp-features__card:hover,
.hp-patterns__card:hover {
    --glow-color-bg: oklch(0 0 0 / 0.4); /* Subtle black on hover */
}

/* The glow pseudo-element */
.hp-features__card::before,
.hp-patterns__card::before {
    content: '';
    position: absolute;
    inset: -1px; /* Extend over the border */
    border-radius: inherit;
    padding: 1px; /* Match border width */
    background: radial-gradient(
        var(--glow-size) circle at var(--glow-x) var(--glow-y),
        var(--glow-color),
        transparent 50%
    );

    /* Mask to show only the border area */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    /* Animation */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

/* Ensure card content stays above the glow */
.hp-features__card > *,
.hp-patterns__card > * {
    position: relative;
    z-index: 2;
}

/* Hover state activates the glow - must target pseudo-element directly */
.hp-features__card:hover::before,
.hp-patterns__card:hover::before {
    opacity: 1;
}