/* 🎨 动态浮动Logo系统 - 独立CSS文件 */
.floating-logos-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    min-height: 500px;
    pointer-events: none; /* 容器默认穿透 */
    overflow: hidden;
    z-index: 1;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.02) 0%, transparent 70%);
}

.floating-logos-container.interactive {
    pointer-events: auto; /* 只有在Logo区域时才允许交互 */
}

.logo-canvas {
    width: 100%;
    height: 100%;
    pointer-events: none; /* 默认穿透，动态切换 */
    cursor: default;
    transition: all 0.1s ease;
}

.logo-canvas.interactive {
    pointer-events: auto; /* 当鼠标在Logo上时允许交互 */
    cursor: pointer;
}

/* 动画效果 */
@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-10px) scale(1.1);
        opacity: 1;
    }
}

@keyframes logoGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255,255,255,0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(0,255,255,0.6), 0 0 30px rgba(255,0,150,0.4);
    }
}

@keyframes particleTrail {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .floating-logos-container {
        min-height: 400px;
    }
}

@media (max-width: 480px) {
    .floating-logos-container {
        min-height: 350px;
    }
}

/* 夜间模式适配 */
.io-black-mode .floating-logos-container {
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, transparent 70%);
}