/* ============================================================
   VINSTA LED — Premium Glow Card Effect
   Pure CSS + Vanilla JS, no React / TS / Framer / shadcn.
   Apply the class "glow-card" to any card you want to glow.
   Works with both overflow:visible AND overflow:hidden cards.
   ============================================================ */

/* ---- CSS Variables ---------------------------------------- */
:root {
    --glow-color-1: #00f3ff;
    /* Neon cyan — matches brand */
    --glow-color-2: #7b2ff7;
    /* Electric violet */
    --glow-color-3: #00ffaa;
    /* Mint green */
    --glow-border-width: 2px;
    --glow-radius: 16px;
    --glow-opacity: 0;
    --glow-angle: 135deg;
}

/* Light-mode: softer palette */
body.light-theme {
    --glow-color-1: #00c8d5;
    --glow-color-2: #6a00e0;
    --glow-color-3: #00c87a;
}

/* ---- Base: glow sits inside the element boundary -----------
   Using inset: 0 means it never escapes overflow:hidden.
   The mask punches out the interior so only a border strip
   of the conic-gradient is visible — a clean inner-border glow.
---------------------------------------------------------------- */
.glow-card {
    position: relative;
    isolation: isolate;
}

/* Animated gradient border layer (::before) */
.glow-card::before {
    content: '';
    position: absolute;

    /* Stay INSIDE element — safe for overflow:hidden cards */
    inset: 0;
    border-radius: inherit;
    /* Inherit parent's border-radius */

    /* Conic gradient tracks mouse angle via --glow-angle */
    background: conic-gradient(from var(--glow-angle) at 50% 50%,
            var(--glow-color-2) 0%,
            var(--glow-color-1) 20%,
            var(--glow-color-3) 40%,
            var(--glow-color-1) 60%,
            var(--glow-color-2) 80%,
            var(--glow-color-2) 100%);

    /* Mask technique: draw two layers, then subtract inner from outer.
       padding determines the visible border thickness.
       This is equivalent to painting the gradient and erasing the center. */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    /* Border thickness via padding on the mask */
    padding: var(--glow-border-width);

    opacity: var(--glow-opacity);
    transition: opacity 0.45s ease;

    /* Always behind card content */
    z-index: 1;
    pointer-events: none;
    will-change: opacity;
}

/* Ambient outer glow (::after) — subtle box-shadow bloom */
.glow-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 20px rgba(0, 243, 255, 0.08),
        0 0 28px 4px rgba(0, 243, 255, 0.15),
        0 0 60px 8px rgba(123, 47, 247, 0.08);
    opacity: var(--glow-opacity);
    transition: opacity 0.45s ease;
    z-index: 1;
    pointer-events: none;
}

/* Light mode: softer ambient bloom */
body.light-theme .glow-card::after {
    box-shadow:
        inset 0 0 16px rgba(0, 200, 213, 0.10),
        0 0 20px 3px rgba(0, 200, 213, 0.18),
        0 0 40px 6px rgba(106, 0, 224, 0.08);
}

/* ---- Active state: JS toggles .glow-active on hover/touch - */
.glow-card.glow-active::before,
.glow-card.glow-active::after {
    --glow-opacity: 1;
}

/* ---- Mobile tap pulse (quick rainbow sweep animation) ----- */
@keyframes glowTapPulse {
    0% {
        --glow-angle: 0deg;
        --glow-opacity: 0;
    }

    15% {
        --glow-opacity: 1;
    }

    50% {
        --glow-angle: 180deg;
        --glow-opacity: 1;
    }

    85% {
        --glow-opacity: 0.5;
    }

    100% {
        --glow-angle: 360deg;
        --glow-opacity: 0;
    }
}

.glow-card.glow-tap::before {
    animation: glowTapPulse 1s ease forwards;
}

/* ---- Respect reduced motion -------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .glow-card::before,
    .glow-card::after {
        transition: none;
    }

    .glow-card.glow-tap::before {
        animation: none;
        --glow-opacity: 0;
    }
}