/* ═══ BorderGlow — 跟随光标的发光边框（纯 CSS 移植自 React Bits 完整版） ═══
   用法：给元素加 class="border-glow-card"，内部放
   <span class="edge-light"></span> + <span class="border-glow-inner">内容</span>
   原生 JS（script.js → initBorderGlow）实时更新
   --edge-proximity（0–100，离边缘越近越大）与 --cursor-angle（光锥朝向）。
   本文件完全对齐 React Bits 完整版的 ::before 网格渐变描边 / ::after 边缘填充 /
   .edge-light 多层 box-shadow 外发光 + blend 混合，仅把颜色收束为工具品牌紫。
   ─────────────────────────────────────────────────────────── */

/* ── 卡片基类：变量 + 发光层定位 ── */
.border-glow-card {
    /* 由 JS 实时驱动 */
    --edge-proximity: 0;
    --cursor-angle: 45deg;

    /* 外观变量（可用 inline style 覆盖） */
    --edge-sensitivity: 30;                 /* 0–100：多近才出现外发光 */
    --color-sensitivity: calc(var(--edge-sensitivity) + 20); /* 多近才出现网格描边 */
    --border-radius: 28px;
    --glow-padding: 40px;                   /* 外发光向外延伸的像素 */
    --cone-spread: 25;                      /* 光锥张角的一半（度，5–45） */
    --fill-opacity: 0.5;                    /* 边缘填充层整体不透明度 */

    /* 品牌紫外发光（默认），glow-danger 会覆盖为红 */
    --glow-color:    hsl(262deg 83% 66% / 100%);
    --glow-color-60: hsl(262deg 83% 66% / 60%);
    --glow-color-50: hsl(262deg 83% 66% / 50%);
    --glow-color-40: hsl(262deg 83% 66% / 40%);
    --glow-color-30: hsl(262deg 83% 66% / 30%);
    --glow-color-20: hsl(262deg 83% 66% / 20%);
    --glow-color-10: hsl(262deg 83% 66% / 10%);

    /* 7 点网格渐变描边配色（对应 React Bits 默认 colors） */
    --gradient-one:   radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%);
    --gradient-two:   radial-gradient(at 69% 34%, #f472b6 0px, transparent 50%);
    --gradient-three: radial-gradient(at 8% 6%,   #38bdf8 0px, transparent 50%);
    --gradient-four:  radial-gradient(at 41% 38%, #c084fc 0px, transparent 50%);
    --gradient-five:  radial-gradient(at 86% 85%, #f472b6 0px, transparent 50%);
    --gradient-six:   radial-gradient(at 82% 18%, #38bdf8 0px, transparent 50%);
    --gradient-seven: radial-gradient(at 51% 4%,  #f472b6 0px, transparent 50%);
    --gradient-base:  linear-gradient(#c084fc 0 100%);

    position: relative;
    border-radius: var(--border-radius);
    isolation: isolate;
    transform: translate3d(0, 0, 0.01px);
    display: grid;
    border: 1px solid rgb(255 255 255 / 15%);
    background: var(--card-bg, #120F17);
    overflow: visible;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 2px,
        rgba(0, 0, 0, 0.1) 0px 2px 4px,
        rgba(0, 0, 0, 0.1) 0px 4px 8px,
        rgba(0, 0, 0, 0.1) 0px 8px 16px,
        rgba(0, 0, 0, 0.1) 0px 16px 32px,
        rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

/* ── 三个发光层共用定位 ── */
.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: opacity 0.25s ease-out;
    z-index: -1;
}

/* 未悬停且未播放入场动画时全部隐藏 */
.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
}

/* ── ::before：7 点网格渐变描边（彩色发光边框） ── */
.border-glow-card::before {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--card-bg, #120F17) 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)));

    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%)
        );
}

/* ── ::after：边缘填充层（彩色光晕漫入内部，soft-light 混合） ── */
.border-glow-card::after {
    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;

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

    mask-composite: subtract, add, add, add, add, add;
    opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
    mix-blend-mode: soft-light;
}

/* ── .edge-light：向外延伸的多层 box-shadow 外发光（悬停光晕） ── */
.border-glow-card > .edge-light {
    inset: calc(var(--glow-padding) * -1);
    pointer-events: none;
    z-index: 1;

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

    opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
    mix-blend-mode: plus-lighter;
}

.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(262deg 83% 66% / 100%)),
        inset 0 0 1px 0 var(--glow-color-60, hsl(262deg 83% 66% / 60%)),
        inset 0 0 3px 0 var(--glow-color-50, hsl(262deg 83% 66% / 50%)),
        inset 0 0 6px 0 var(--glow-color-40, hsl(262deg 83% 66% / 40%)),
        inset 0 0 15px 0 var(--glow-color-30, hsl(262deg 83% 66% / 30%)),
        inset 0 0 25px 2px var(--glow-color-20, hsl(262deg 83% 66% / 20%)),
        inset 0 0 50px 2px var(--glow-color-10, hsl(262deg 83% 66% / 10%)),
        0 0 1px 0 var(--glow-color-60, hsl(262deg 83% 66% / 60%)),
        0 0 3px 0 var(--glow-color-50, hsl(262deg 83% 66% / 50%)),
        0 0 6px 0 var(--glow-color-40, hsl(262deg 83% 66% / 40%)),
        0 0 15px 0 var(--glow-color-30, hsl(262deg 83% 66% / 30%)),
        0 0 25px 2px var(--glow-color-20, hsl(262deg 83% 66% / 20%)),
        0 0 50px 2px var(--glow-color-10, hsl(262deg 83% 66% / 10%));
}

/* ── 内容层 ── */
.border-glow-card .border-glow-inner {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: auto;
    z-index: 1;
}

/* ═══ 按钮适配：card 只管发光薄层，外观交给 inner ═══ */
.border-glow-card.btn-generate,
.border-glow-card.btn-guide,
.border-glow-card.guide-modal-close {
    display: inline-flex;
    padding: 0;                  /* 不留间隙，inner 填满卡片 */
    background: transparent;
    border: none;
    box-shadow: none;
    /* 按钮发光收紧：光晕范围缩小、强度降低 */
    --glow-padding: 1px;
    --cone-spread: 18;
    --edge-sensitivity: 35;
}
/* 中和 style.css 给按钮卡片自身加的 hover 位移，避免发光层被位移影响 */
.border-glow-card.btn-generate:hover,
.border-glow-card.btn-guide:hover,
.border-glow-card.guide-modal-close:hover {
    transform: none;
    box-shadow: none !important;   /* 覆盖 style.css .btn-guide:hover 的 accent-glow */
}
/* 打包中禁用态：内层转灰，避免仍显示高亮渐变 */
.border-glow-card.btn-generate:disabled .border-glow-inner {
    background: #3a3550;
    color: #9a93b5;
    cursor: not-allowed;
}

.border-glow-card.btn-generate,
.border-glow-card.btn-guide {
    --card-bg: transparent;
    --border-radius: 12px;
}
/* 按钮的网格描边层压到极淡，避免粗环感；只靠 edge-light 外发光 */
.border-glow-card.btn-generate::before,
.border-glow-card.btn-guide::before,
.border-glow-card.guide-modal-close::before {
    opacity: 0 !important;
}
/* 按钮边缘填充层也压淡 */
.border-glow-card.btn-generate::after,
.border-glow-card.btn-guide::after,
.border-glow-card.guide-modal-close::after {
    opacity: 0 !important;
}

.border-glow-card.btn-generate .border-glow-inner,
.border-glow-card.btn-guide .border-glow-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    border-radius: inherit;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    transition: filter .2s ease, transform .12s ease;
}

.border-glow-card.btn-generate .border-glow-inner {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.border-glow-card.btn-generate:hover .border-glow-inner { filter: brightness(1.12); }
.border-glow-card.btn-generate:active .border-glow-inner { transform: scale(.985); }

.border-glow-card.btn-guide .border-glow-inner {
    color: #b9a4f5;
    background: rgba(124, 58, 237, .12);
    border: none;
}
.border-glow-card.btn-guide:hover .border-glow-inner {
    background: rgba(124, 58, 237, .2);
    box-shadow: none;
}

/* 关闭按钮（圆形） */
.border-glow-card.guide-modal-close {
    --card-bg: transparent;
    --border-radius: 50%;
    width: 34px;
    height: 34px;
    flex: none;
}
.border-glow-card.guide-modal-close .border-glow-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    font-size: 15px;
    color: #ff9a9a;
    background: rgba(239, 68, 68, .14);
    border: 1px solid rgba(239, 68, 68, .4);
    overflow: hidden;
    transition: background .2s ease;
}
.border-glow-card.guide-modal-close:hover .border-glow-inner {
    background: rgba(239, 68, 68, .26);
}

/* 按钮外发光环收薄：只保留最内两层 box-shadow，去掉远处扩散 */
.border-glow-card.btn-generate > .edge-light::before,
.border-glow-card.btn-guide > .edge-light::before,
.border-glow-card.guide-modal-close > .edge-light::before {
    box-shadow:
        inset 0 0 0 1px var(--glow-color, hsl(262deg 83% 66% / 40%)),
        inset 0 0 2px 0 var(--glow-color-50, hsl(262deg 83% 66% / 20%)),
        0 0 1px 0 var(--glow-color-50, hsl(262deg 83% 66% / 20%)),
        0 0 3px 0 var(--glow-color-30, hsl(262deg 83% 66% / 12%));
}

/* ═══ 危险/关闭按钮：红色发光变体（覆盖网格配色 + 外发光色） ═══ */
.border-glow-card.glow-danger {
    --glow-color:    hsl(0deg 84% 66% / 100%);
    --glow-color-60: hsl(0deg 84% 66% / 60%);
    --glow-color-50: hsl(0deg 84% 66% / 50%);
    --glow-color-40: hsl(0deg 84% 66% / 40%);
    --glow-color-30: hsl(0deg 84% 66% / 30%);
    --glow-color-20: hsl(0deg 84% 66% / 20%);
    --glow-color-10: hsl(0deg 84% 66% / 10%);

    --gradient-one:   radial-gradient(at 80% 55%, #ff6b6b 0px, transparent 50%);
    --gradient-two:   radial-gradient(at 69% 34%, #ff8787 0px, transparent 50%);
    --gradient-three: radial-gradient(at 8% 6%,   #ef4444 0px, transparent 50%);
    --gradient-four:  radial-gradient(at 41% 38%, #ff6b6b 0px, transparent 50%);
    --gradient-five:  radial-gradient(at 86% 85%, #ff8787 0px, transparent 50%);
    --gradient-six:   radial-gradient(at 82% 18%, #ef4444 0px, transparent 50%);
    --gradient-seven: radial-gradient(at 51% 4%,  #ff8787 0px, transparent 50%);
    --gradient-base:  linear-gradient(#ff6b6b 0 100%);
}