/* ---------- Border Glow Component ---------- */
.border-glow-card {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--card-dark);
    padding: 2px; /* Border thickness */
    overflow: hidden;
    /* Add a subtle static border to look good even when not hovered */
    box-shadow: 0 0 0 1px var(--divider-dark);
    display: flex;
    flex-direction: column;
}

/* The interactive glow gradient */
.border-glow-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(77, 166, 217, 0.9) 0%,     /* var(--cyan) */
        rgba(140, 198, 63, 0.4) 15%,    /* var(--green) */
        transparent 35%
    );
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.border-glow-card:hover::before {
    opacity: 1;
}

/* Base static mesh gradient (optional flair) */
.border-glow-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cyan-glow) 0%, transparent 50%, var(--green-glow) 100%);
    z-index: 0;
    opacity: 0.5;
}

/* The inner content area (masks the center so only the border glows) */
.border-glow-inner {
    position: relative;
    background: var(--bg-dark);
    border-radius: calc(var(--radius-lg) - 2px);
    flex-grow: 1;
    z-index: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.border-glow-inner > img {
    border-radius: inherit;
    width: 100%;
    height: 100%;
    object-fit: cover;
}