/**
 * 状态转换动画样式
 * ===========================================
 * 支持OPM激活状态转换的视觉动画效果
 */

/* ============================================
   状态转换粒子动画
   ============================================ */

/* 状态转换粒子基础样式 - 移除外发光 */
.state-transition-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-info);
    z-index: 10000;
    pointer-events: none;
    opacity: 1;
    transform-origin: center;
}

/* 激活转换粒子 - 移除外发光 */
.state-transition-particle.activation {
    background-color: var(--color-info);
}

/* 取消激活转换粒子 - 移除外发光 */
.state-transition-particle.deactivation {
    background-color: var(--color-info-light);
}

/* 简化的粒子动画 - 移除外发光 */
@keyframes activationParticlePulse {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.9;
    }
}

/* 简化的取消激活粒子动画 - 移除外发光 */
@keyframes deactivationParticleFade {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}


/* ============================================
   元素状态转换动画增强
   ============================================ */

/* 激活状态转换增强 */


/* ============================================
   状态转换轨迹线
   ============================================ */

/* 转换轨迹线 */
.transition-trail {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(74, 144, 226, 0.8) 50%, 
        transparent 100%);
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    animation: trailAnimation 0.6s ease-in-out;
}

@keyframes trailAnimation {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    30% {
        opacity: 0.8;
        transform: scaleX(0.3);
    }
    70% {
        opacity: 0.6;
        transform: scaleX(0.8);
    }
    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

/* ============================================
   性能优化
   ============================================ */

/* 硬件加速优化 */
.state-transition-particle,


/* 减少重绘 */
.link-highlight {
    will-change: stroke, stroke-width, filter;
}

/* ============================================
   等待队列呼吸灯动画
   ============================================ */

/* 等待队列中的元素呼吸效果 - 仅大小变化 */
.opm-element.waiting {
    animation: waitingBreathing 2s ease-in-out infinite;
}

/* 通用呼吸动画 - 仅缩放变化 */
@keyframes waitingBreathing {
    0% {
        transform: scale(0.95);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(0.95);
    }
}

/* 等待状态的对象 - 较温和的缩放 */
.opm-object.waiting {
    animation: waitingObjectBreathing 2.2s ease-in-out infinite;
}

@keyframes waitingObjectBreathing {
    0% {
        transform: scale(0.97);
    }
    50% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(0.97);
    }
}

/* 等待状态的过程 - 稍快的节奏 */
.opm-process.waiting {
    animation: waitingProcessBreathing 1.8s ease-in-out infinite;
}

@keyframes waitingProcessBreathing {
    0% {
        transform: scale(0.96);
    }
    50% {
        transform: scale(1.04);
    }
    100% {
        transform: scale(0.96);
    }
}

/* 等待状态的状态元素 - 最温和的变化 */
.opm-object-state.waiting {
    animation: waitingStateBreathing 2.5s ease-in-out infinite;
}

@keyframes waitingStateBreathing {
    0%, 100% {
        transform: scale(0.98);
    }
    50% {
        transform: scale(1.02);
    }
}

/* ============================================
   响应式调整
   ============================================ */

/* 小屏幕设备优化 */
@media (max-width: 768px) {
    .state-transition-particle {
        width: 6px;
        height: 6px;
    }
    
    .link-highlight {
        stroke-width: 2 !important;
    }
}

/* 高DPI显示器优化 */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .state-transition-particle {
        box-shadow: none;
    }
}

/* ============================================
   调试模式
   ============================================ */

/* 调试模式下显示粒子轨迹 */
.debug-mode .state-transition-particle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: red;
    transform: translate(-50%, -50%);
}