/* 
 * 简单呼吸效果样式
 * simple-breath.css
 * 为logo添加简单直接的呼吸效果，无悬停特效
 */

/* ===== 1. 简单呼吸动画定义 ===== */
@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 ===== */
/* 确保选择器优先级最高 */
header .header .container .logo-section .logo img,
.logo img,
img[alt="热血传奇Logo"] {
    /* 强制应用呼吸动画 */
    animation: simpleBreath 3s ease-in-out infinite !important;
    
    /* 确保动画运行 */
    animation-play-state: running !important;
    
    /* 优化性能 */
    transform-origin: center center !important;
    will-change: transform, opacity, filter !important;
    
    /* 基础样式 */
    display: block !important;
    /* 移除边框和圆角 */
    border-radius: 0 !important;
    border: none !important;
    outline: none !important;
    
    /* 启用硬件加速 */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

/* ===== 3. 移除所有悬停效果 ===== */
/* 完全禁用logo的悬停效果 */
header .header .container .logo-section .logo:hover img,
.logo:hover img,
img[alt="热血传奇Logo"]:hover {
    animation: simpleBreath 3s ease-in-out infinite !important;
    transform: scale(1) !important;
    filter: brightness(1) !important;
    cursor: default !important;
}

/* 移除logo容器的悬停效果 */
.logo:hover,
header .header .container .logo-section .logo:hover {
    transform: none !important;
    filter: none !important;
}

/* ===== 4. 页面加载时的呼吸入场效果 ===== */
@keyframes breathAppear {
    0% {
        transform: scale(0.7);
        opacity: 0;
        filter: blur(8px) brightness(0.5);
    }
    
    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0) brightness(1);
    }
}

/* 页面加载时应用入场效果 */
body.page-loaded .logo img {
    animation: 
        breathAppear 0.8s ease-out forwards,
        simpleBreath 3s ease-in-out infinite 0.8s !important;
}

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

/* 确保动画在页面隐藏时暂停 */
.logo img {
    animation-play-state: running;
}

/* ===== 6. 移动端优化 ===== */
@media (max-width: 768px) {
    .logo img {
        /* 移动端减慢呼吸速度 */
        animation: simpleBreath 4s ease-in-out infinite !important;
        animation-duration: 4s !important;
        
        /* 移动端减小呼吸幅度 */
        transform: scale(1) scale(1.05) !important;
    }
}

/* ===== 7. 调试辅助样式 ===== */
/* 添加边框帮助调试 */
.debug-logo .logo img {
    outline: 2px solid red !important;
    outline-offset: 2px !important;
}

/* 呼吸效果状态指示 */
.breath-active::after {
    content: '🫁';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 12px;
    opacity: 0.5;
}

/* ===== 8. 强制样式应用 ===== */
/* 使用最高优先级确保样式应用 */
body .header .logo-section .logo img {
    /* 重复声明确保覆盖 */
    animation: simpleBreath 3s ease-in-out infinite !important;
}

/* 使用ID选择器增加优先级 */
#main-logo,
img[src="logo.png"] {
    animation: simpleBreath 3s ease-in-out infinite !important;
}

/* ===== 9. 简单呼吸效果说明 ===== */
/*
 * 简单呼吸效果特点：
 * 1. 直接应用，无需复杂交互
 * 2. 3秒完整呼吸循环
 * 3. 8%的缩放幅度
 * 4. 15%的亮度变化
 * 5. 无悬停特效，保持稳定
 * 6. 高性能，低资源占用
 */