/* static/css/magic.css */

/* ?? 优雅的 Logo 呼吸灯发光特效 */
.elegant-breathing {
    animation: mysticGlow 2s ease-in-out infinite alternate !important;
    color: transparent !important;
    background: linear-gradient(135deg, #3b82f6, #a855f7, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    transition: all 0.3s ease;
}
@keyframes mysticGlow {
    0% { filter: drop-shadow(0 0 2px rgba(59,130,246,0.3)); transform: scale(1); }
    100% { filter: drop-shadow(0 0 15px rgba(168,85,247,0.8)); transform: scale(1.05); }
}

/* ?? 旁边浮现的提示气泡 */
.status-tooltip {
    position: absolute;
    /* 1. 修改位置：把原本的 140px 改大，比如 220px，它就会往右边挪，不会挡住 Logo 了 */
    /* 如果还是挡住，可以继续把这个数字改大，比如 250px */
    left: 170px; 
    top: 2px; /* 稍微往下挪一点点，和 Logo 更对齐 */
    
    /* 2. 修改颜色：换成非常优雅的清新淡绿色渐变 */
    background: linear-gradient(135deg, #ecfdf5, #d1fae5); 
    
    /* 3. 字体颜色：因为背景变成了淡绿色，白色字会看不清，这里换成质感很好的深墨绿色 */
    color: #065f46; 
    
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 4. 阴影和边框：也配套换成了带一点点绿色的柔和光晕 */
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15); 
    border: 1px solid #a7f3d0; 
    white-space: nowrap;
    z-index: 100;
}

.status-tooltip.show-tooltip {
    opacity: 1;
    transform: translateX(0);
    animation: floatUpDown 3s ease-in-out infinite;
}

@keyframes floatUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
/* ?? 飞线流光 SVG 容器 */
#magicPathContainer {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 9999;
}
.light-streak {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes dash {
    0% { stroke-dashoffset: 1000; opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}