/* ============================================================
   TITO.TRADE – BORDER GLOW (Vanilla-Port von React Bits "BorderGlow")
   Auf die Projektkarten (Bento) angewendet.
   Konfiguration: config.js → SITE_CONFIG.borderGlow
   Aktiv nur bei Desktop/pointer:fine + motion (js/border-glow.js).
   ============================================================ */

.border-glow-card {
    /* Defaults – JS versorgt die Cards mit Werten aus config.js */
    --edge-proximity: 0;
    --cursor-angle: 45deg;
    --edge-sensitivity: 30;
    --color-sensitivity: calc(var(--edge-sensitivity) + 20);
    --border-radius: var(--radius-large);
    --glow-padding: 36px;
    --cone-spread: 25;
    --fill-opacity: 0.35;

    overflow: visible;
    isolation: isolate;
}

/* ---------- Mesh-Gradient BORDER (::before) ---------- */
.border-glow-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--color-surface-solid) 0 100%) padding-box,
        linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
        var(--gradient-one) border-box,
        var(--gradient-two) border-box,
        var(--gradient-three) border-box,
        var(--gradient-four) border-box,
        var(--gradient-five) border-box,
        var(--gradient-six) border-box,
        var(--gradient-seven) border-box,
        var(--gradient-base) border-box;
    opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
    transition: opacity 0.25s ease-out;
    z-index: -1;
    pointer-events: none;

    mask-image: conic-gradient(
        from var(--cursor-angle) at center,
        black calc(var(--cone-spread) * 1%),
        transparent calc((var(--cone-spread) + 15) * 1%),
        transparent calc((100 - var(--cone-spread) - 15) * 1%),
        black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* ---------- Mesh-Gradient FILL (::after) ---------- */
.border-glow-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    background:
        var(--gradient-one) padding-box,
        var(--gradient-two) padding-box,
        var(--gradient-three) padding-box,
        var(--gradient-four) padding-box,
        var(--gradient-five) padding-box,
        var(--gradient-six) padding-box,
        var(--gradient-seven) padding-box,
        var(--gradient-base) padding-box;
    opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
    mix-blend-mode: soft-light;
    transition: opacity 0.25s ease-out;
    z-index: -1;
    pointer-events: none;

    mask-image:
        linear-gradient(to bottom, black, black),
        radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
        conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
    mask-composite: subtract, add, add;
}

/* ---------- Edge Light (äußerer Glow) ---------- */
.border-glow-card > .edge-light {
    position: absolute;
    inset: calc(var(--glow-padding) * -1);
    border-radius: var(--border-radius);
    pointer-events: none;
    z-index: -1;
    opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
    transition: opacity 0.25s ease-out;
    mix-blend-mode: plus-lighter;

    mask-image: conic-gradient(
        from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
}

.border-glow-card > .edge-light::before {
    content: "";
    position: absolute;
    inset: var(--glow-padding);
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px var(--glow-color, hsl(var(--glow-hsl, '180deg 100% 99%'))),
        inset 0 0 1px 0 var(--glow-color-60, hsl(var(--glow-hsl, '180deg 100% 99%') / 60%)),
        inset 0 0 3px 0 var(--glow-color-50, hsl(var(--glow-hsl, '180deg 100% 99%') / 50%)),
        inset 0 0 6px 0 var(--glow-color-40, hsl(var(--glow-hsl, '180deg 100% 99%') / 40%)),
        inset 0 0 15px 0 var(--glow-color-30, hsl(var(--glow-hsl, '180deg 100% 99%') / 30%)),
        inset 0 0 25px 2px var(--glow-color-20, hsl(var(--glow-hsl, '180deg 100% 99%') / 20%)),
        inset 0 0 50px 2px var(--glow-color-10, hsl(var(--glow-hsl, '180deg 100% 99%') / 10%)),
        0 0 1px 0 var(--glow-color-60, hsl(var(--glow-hsl, '180deg 100% 99%') / 60%)),
        0 0 3px 0 var(--glow-color-50, hsl(var(--glow-hsl, '180deg 100% 99%') / 50%)),
        0 0 6px 0 var(--glow-color-40, hsl(var(--glow-hsl, '180deg 100% 99%') / 40%)),
        0 0 15px 0 var(--glow-color-30, hsl(var(--glow-hsl, '180deg 100% 99%') / 30%)),
        0 0 25px 2px var(--glow-color-20, hsl(var(--glow-hsl, '180deg 100% 99%') / 20%)),
        0 0 50px 2px var(--glow-color-10, hsl(var(--glow-hsl, '180deg 100% 99%') / 10%));
}

/* Nicht-Hover: Glow-Layer sanft ausblenden */
.border-glow-card:not(:hover)::before,
.border-glow-card:not(:hover)::after,
.border-glow-card:not(:hover) > .edge-light {
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
}

/* ---------- Integration in Projektkarten ---------- */
.project-card.border-glow-card { overflow: visible; }

/* Touch / no-motion: Glow deaktiviert */
@media (pointer: coarse), (hover: none) {
    .border-glow-card::before,
    .border-glow-card::after,
    .border-glow-card > .edge-light { display: none !important; }
}
html.no-motion .border-glow-card::before,
html.no-motion .border-glow-card::after,
html.no-motion .border-glow-card > .edge-light { display: none !important; }