/* 项目卡片hover效果 */
/* 设置卡片基础样式 */
.project-card {
    position: relative;
    transition: all 0.3s ease;
    z-index: 1;
}

/* 卡片悬停效果由JavaScript控制，避免CSS和JS冲突 */

.project-card:hover {
    filter: brightness(1); /* 保持当前卡片正常亮度 */
    transform: translateY(-5px); /* 上浮效果 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    z-index: 10; /* 确保hover的卡片在最上层 */
}

/* 进度条容器样式 */
.project-progress-container {
    position: relative;
    background-color: #f0f0f0;
    border-radius: 4px;
    height: 24px;
    margin: 10px 0;
    overflow: hidden;
}

.project-progress-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #333; /* 默认黑色 */
    font-weight: 500;
}

.project-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #0c34ff;
    z-index: 1;
}

/* 进度条文字颜色变化 - 当进度条长度超过50%时变为白色 */
.project-progress-bar[style*="width: 5"]:not([style*="width: 0"]):not([style*="width: 1"]):not([style*="width: 2"]):not([style*="width: 3"]):not([style*="width: 4"]) ~ .project-progress-text,
.project-progress-bar[style*="width: 6"] ~ .project-progress-text,
.project-progress-bar[style*="width: 7"] ~ .project-progress-text,
.project-progress-bar[style*="width: 8"] ~ .project-progress-text,
.project-progress-bar[style*="width: 9"] ~ .project-progress-text,
.project-progress-bar[style*="width: 100"] ~ .project-progress-text {
    color: white;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3); /* 添加文字阴影以增强可读性 */
}