/* 
 * 底部Logo修复样式
 * footer-logo-fix.css
 * 修复底部Logo呼吸特效和居中问题
 */

/* ===== 1. 底部Logo呼吸特效修复 ===== */

/* 确保底部Logo应用呼吸动画 */
.footer-logo img {
    /* 应用呼吸动画 */
    animation: simpleBreath 3s ease-in-out infinite !important;
    
    /* 确保动画运行 */
    animation-play-state: running !important;
    
    /* 优化性能 */
    transform-origin: center center !important;
    will-change: transform, opacity, filter !important;
    
    /* 启用硬件加速 */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    
    /* 基础样式 */
    display: block !important;
    margin: 0 auto !important;
}

/* 如果simpleBreath动画未定义，定义备用动画 */
@keyframes simpleBreath {
    0%, 100% {
        transform: scale(1);
        opacity: 0.85;
        filter: brightness(0.95) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    }
    
    50% {
        transform: scale(1.08);
        opacity: 1;
        filter: brightness(1.1) drop-shadow(0 4px 8px rgba(212, 175, 55, 0.6));
    }
}

/* ===== 2. 底部Logo容器居中 ===== */

.footer-logo {
    /* 居中显示 */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 10px 0 !important; /* 缩小50%：从20px改为10px */
    
    /* 确保在footer中正确布局 */
    order: 1 !important;
    flex: 0 0 auto !important;
}

/* ===== 3. Footer布局调整 ===== */

.footer {
    /* 确保footer使用flex布局 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Footer内容区域调整 */
.footer-content {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    
    /* 在Logo下方 */
    order: 2 !important;
}

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

@media (max-width: 768px) {
    .footer-logo img {
        /* 移动端调整动画速度 */
        animation: simpleBreath 4s ease-in-out infinite !important;
        
        /* 调整Logo大小 */
        max-width: 80px !important;
        height: auto !important;
    }
    
    .footer-logo {
        padding: 7.5px 0 !important; /* 缩小50%：从15px改为7.5px */
    }
}

@media (max-width: 480px) {
    .footer-logo img {
        max-width: 60px !important;
    }
    
    .footer-logo {
        padding: 5px 0 !important; /* 缩小50%：从10px改为5px */
    }
}

/* ===== 5. 动画状态监控 ===== */

/* 添加调试边框（开发时使用） */
.debug-mode .footer-logo img {
    outline: 2px solid #00ff00 !important;
    outline-offset: 2px !important;
}

/* 动画运行状态指示 */
.footer-logo.breathing::after {
    content: '🫁';
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 12px;
    opacity: 0.3;
    color: #D4AF37;
}

/* ===== 6. 兼容性修复 ===== */

/* 确保在静态展示模式下仍然有呼吸效果 */
.footer-logo img {
    /* 覆盖static-display.css可能的影响 */
    transition: none !important;
    animation: simpleBreath 3s ease-in-out infinite !important;
}

/* 移除可能影响底部Logo的悬停效果覆盖 */
.footer-logo:hover img {
    animation: simpleBreath 3s ease-in-out infinite !important;
    transform: none !important;
}

/* ===== 7. 打印样式 ===== */

@media print {
    .footer-logo img {
        animation: none !important;
        filter: none !important;
    }
}

/* ===== 8. 性能优化 ===== */

/* 页面不可见时暂停动画 */
@media (prefers-reduced-motion: reduce) {
    .footer-logo img {
        animation: none !important;
    }
}

/* ===== 9. 修复完成声明 ===== */
/*
 * 此样式表修复：
 * 1. 底部Logo呼吸特效恢复
 * 2. 底部Logo居中显示
 * 3. Footer布局优化
 * 4. 响应式适配
 * 5. 兼容性保证
 */