/* Glowing Edge Effect for Cards */

.main-pricing-card,
.tool-card,
.addon-card-compact {
    --glow-color: 270deg 80% 70%;
    --glow-sens: 30;
    --color-sens: 50;
    --pointer-x: 50%;
    --pointer-y: 50%;
    --pointer-deg: 45deg;
    --pointer-d: 0;
    isolation: isolate;
}

/* Glow overlay element */
.main-pricing-card > .card-glow,
.tool-card > .card-glow,
.addon-card-compact > .card-glow {
    content: "";
    position: absolute;
    inset: -40px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    mix-blend-mode: plus-lighter;
    mask-image: 
        conic-gradient( 
            from var(--pointer-deg) at center, 
            black 2.5%, transparent 12%, transparent 88%, black 97.5%
        );
}

.main-pricing-card:hover > .card-glow,
.tool-card:hover > .card-glow,
.addon-card-compact:hover > .card-glow {
    opacity: calc((var(--pointer-d) - var(--glow-sens)) / (100 - var(--glow-sens)));
}

.main-pricing-card > .card-glow::before,
.tool-card > .card-glow::before,
.addon-card-compact > .card-glow::before {
    content: "";
    position: absolute;
    inset: 40px;
    border-radius: inherit;
    box-shadow: 
        inset 0 0 0 1px hsl(var(--glow-color) / 100%), 
        inset 0 0 1px 0 hsl(var(--glow-color) / 60%), 
        inset 0 0 4px 0 hsl(var(--glow-color) / 50%), 
        inset 0 0 8px 0 hsl(var(--glow-color) / 40%), 
        inset 0 0 16px 0 hsl(var(--glow-color) / 30%), 
        inset 0 0 28px 2px hsl(var(--glow-color) / 20%), 
        inset 0 0 50px 2px hsl(var(--glow-color) / 10%), 
        0 0 1px 0 hsl(var(--glow-color) / 60%), 
        0 0 4px 0 hsl(var(--glow-color) / 50%), 
        0 0 8px 0 hsl(var(--glow-color) / 40%), 
        0 0 16px 0 hsl(var(--glow-color) / 30%), 
        0 0 28px 2px hsl(var(--glow-color) / 20%), 
        0 0 50px 2px hsl(var(--glow-color) / 10%);
}

/* Colored border that follows pointer */
.main-pricing-card::after,
.tool-card::after,
.addon-card-compact::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    border: 1px solid transparent;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    background:
        linear-gradient(rgba(20, 10, 40, 0.95) 0 100%) padding-box,
        linear-gradient(rgba(255, 255, 255, 0) 0% 100%) border-box,
        radial-gradient(at 75% 25%, hsla(280, 100%, 70%, 1) 0px, transparent 50%) border-box,
        radial-gradient(at 25% 75%, hsla(260, 100%, 65%, 1) 0px, transparent 50%) border-box,
        radial-gradient(at 85% 85%, hsla(300, 100%, 75%, 1) 0px, transparent 50%) border-box,
        radial-gradient(at 15% 15%, hsla(240, 100%, 70%, 1) 0px, transparent 50%) border-box,
        linear-gradient(hsla(270, 80%, 70%, 1) 0 100%) border-box;
    mask-image: 
        conic-gradient( 
            from var(--pointer-deg) at center, 
            black 20%, transparent 35%, transparent 65%, black 80%
        );
}

.main-pricing-card:hover::after,
.tool-card:hover::after,
.addon-card-compact:hover::after {
    opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
}

/* Inner colored wash on edges */
.main-pricing-card > .card-glow-inner,
.tool-card > .card-glow-inner,
.addon-card-compact > .card-glow-inner {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    mix-blend-mode: soft-light;
    background:
        radial-gradient(at 75% 25%, hsla(280, 100%, 70%, 1) 0px, transparent 50%),
        radial-gradient(at 25% 75%, hsla(260, 100%, 65%, 1) 0px, transparent 50%),
        radial-gradient(at 85% 85%, hsla(300, 100%, 75%, 1) 0px, transparent 50%),
        radial-gradient(at 15% 15%, hsla(240, 100%, 70%, 1) 0px, transparent 50%);
    mask-image:
        linear-gradient(to bottom, black, black),
        radial-gradient(ellipse at 50% 50%, black 35%, transparent 60%),
        radial-gradient(ellipse at 66% 66%, black 5%, transparent 35%),
        radial-gradient(ellipse at 33% 33%, black 5%, transparent 35%),
        radial-gradient(ellipse at 66% 33%, black 5%, transparent 35%),
        radial-gradient(ellipse at 33% 66%, black 5%, transparent 35%),
        conic-gradient(from var(--pointer-deg) at center, transparent 5%, black 15%, black 85%, transparent 95%);
    mask-composite: subtract, add, add, add, add, add;
}

.main-pricing-card:hover > .card-glow-inner,
.tool-card:hover > .card-glow-inner,
.addon-card-compact:hover > .card-glow-inner {
    opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
}

/* Animation state - show glow without hover */
.main-pricing-card.glow-animating > .card-glow,
.tool-card.glow-animating > .card-glow,
.addon-card-compact.glow-animating > .card-glow {
    opacity: calc((var(--pointer-d) - var(--glow-sens)) / (100 - var(--glow-sens)));
}

.main-pricing-card.glow-animating::after,
.tool-card.glow-animating::after,
.addon-card-compact.glow-animating::after {
    opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
}

.main-pricing-card.glow-animating > .card-glow-inner,
.tool-card.glow-animating > .card-glow-inner,
.addon-card-compact.glow-animating > .card-glow-inner {
    opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
}