/**
 * 项目资产 — 卡片区域点状加载遮罩（独立文件，仅本面板使用）
 * 类前缀：project-asset-body-loading
 */

.project-asset-body-loading {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--spacing-xl, 24px);
    background: rgba(20, 20, 20, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.38s ease, visibility 0.38s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.project-asset-body-loading--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.project-asset-body-loading__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.project-asset-body-loading__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--text-accent, #6b8cff);
    animation: project-asset-body-loading-dot 1.45s ease-in-out infinite;
}

.project-asset-body-loading__dot:nth-child(2) {
    animation-delay: 0.18s;
    background-color: #7b61ff;
}

.project-asset-body-loading__dot:nth-child(3) {
    animation-delay: 0.36s;
    background-color: #00c853;
}

.project-asset-body-loading__dot:nth-child(4) {
    animation-delay: 0.54s;
    background-color: #ff9800;
}

.project-asset-body-loading__dot:nth-child(5) {
    animation-delay: 0.72s;
    background-color: #ff5252;
}

@keyframes project-asset-body-loading-dot {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.65;
    }
    50% {
        transform: scale(1.45);
        opacity: 1;
    }
}