/* ============================================================
   Bee Repair — 容器粒子边框与柔光呼吸动效引擎
   1. 粒子流动 (Border Beam traveling) 沿圆角边缘流动
   2. 粒子尾端平滑淡出至完全透明 (Fade to transparent)
   3. 双层柔光环境漫反射 (Soft Bloom & Ambient Glow)
   4. 3.6s 低频自然呼吸节奏 (Breathing Rhythm)
   5. 视口感知与 GPU 合成优化 (IntersectionObserver 挂起)
   ============================================================ */

:root {
    --bee-beam-primary: #2563eb;
    --bee-beam-accent: #0ea5e9;
    --bee-beam-glow: rgba(37, 99, 235, 0.45);
    --bee-beam-ambient: rgba(14, 165, 233, 0.25);
    --bee-beam-speed: 5.5s;
    --bee-beam-breathe: 3.6s;
    --bee-beam-width: 2px;
}

/* 焦点卡片容器 */
.bee-beam-card,
[data-particle-border] {
    position: relative;
    border-color: rgba(226, 232, 240, 0.8) !important;
}

/* SVG 粒子流光挂载层 */
.bee-beam-svg {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    pointer-events: none;
    z-index: 2;
    overflow: visible;
    border-radius: inherit;
}

/* 柔光与呼吸包装组 */
.bee-beam-group {
    animation: bee-beam-breathe var(--bee-beam-breathe) ease-in-out infinite alternate;
    will-change: opacity, filter;
}

/* 粒子路径流动 */
.bee-beam-path {
    fill: none;
    stroke-width: var(--bee-beam-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    /* 渐变中定义尾端透明淡出 */
    stroke-dasharray: 120 480;
    stroke-dashoffset: 600;
    animation: bee-beam-flow var(--bee-beam-speed) linear infinite;
    will-change: stroke-dashoffset;
}

/* 粒子流动动画 */
@keyframes bee-beam-flow {
    from {
        stroke-dashoffset: 600;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* 双层柔光呼吸动画 (正弦平滑曲线) */
@keyframes bee-beam-breathe {
    0% {
        opacity: 0.42;
        filter: drop-shadow(0 0 2px var(--bee-beam-glow))
                drop-shadow(0 0 10px var(--bee-beam-ambient));
    }
    50% {
        opacity: 0.78;
        filter: drop-shadow(0 0 4px var(--bee-beam-glow))
                drop-shadow(0 0 18px var(--bee-beam-ambient));
    }
    100% {
        opacity: 1;
        filter: drop-shadow(0 0 6px var(--bee-beam-accent))
                drop-shadow(0 0 24px var(--bee-beam-glow));
    }
}

/* ===== 模式 B：常规重点卡片交互唤醒柔光 (Interactive Hover Glow) ===== */
.bee-glow-hover {
    position: relative;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.15),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
}

.bee-glow-hover::after {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.85) 0%,
        rgba(14, 165, 233, 0.5) 35%,
        transparent 70%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.bee-glow-hover:hover::after,
.bee-glow-hover:focus-within::after {
    opacity: 1;
    animation: bee-glow-pulse 2.8s ease-in-out infinite alternate;
}

@keyframes bee-glow-pulse {
    0% {
        filter: drop-shadow(0 0 3px rgba(37, 99, 235, 0.35))
                drop-shadow(0 0 12px rgba(14, 165, 233, 0.15));
    }
    100% {
        filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.65))
                drop-shadow(0 0 20px rgba(14, 165, 233, 0.35));
    }
}

/* ===== 性能安全挂起类 (脱离视口或后台切出时) ===== */
.is-offscreen .bee-beam-group,
.is-offscreen .bee-beam-path,
.is-offscreen::after {
    animation-play-state: paused !important;
}

/* ===== 无障碍减少动效支持 ===== */
@media (prefers-reduced-motion: reduce) {
    .bee-beam-group,
    .bee-beam-path,
    .bee-glow-hover:hover::after {
        animation: none !important;
    }
    .bee-beam-group {
        opacity: 0.6 !important;
        filter: drop-shadow(0 0 3px var(--bee-beam-glow)) !important;
    }
}