/* ================================
   标题跳动动画 - 高性能GPU加速
   "恒星云爆文" 字符跳动效果
   ================================ */

/* ========== 字符基础样式 ========== */
.title-main .char {
    display: inline-block;
    position: relative;
    font-weight: 900;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    animation: charBounce 2s ease-in-out infinite;
    
    /* 字体清晰度优化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-smooth: always;
    -webkit-text-stroke: 0.3px currentColor;
}

/* 为每个字符设置不同的延迟 - 独立跳动效果 */
.char-1 { animation-delay: 0s; }
.char-2 { animation-delay: 0.2s; }
.char-3 { animation-delay: 0.4s; }
.char-4 { animation-delay: 0.6s; }
.char-5 { animation-delay: 0.8s; }

/* ========== 跳动动画 - 更明显的单独跳动 ========== */
@keyframes charBounce {
    0%, 100% {
        transform: translateY(0) scale(1) translateZ(0);
    }
    
    15% {
        transform: translateY(-20px) scale(1.1) translateZ(0);
    }
    
    30% {
        transform: translateY(0) scale(1) translateZ(0);
    }
    
    45% {
        transform: translateY(-10px) scale(1.05) translateZ(0);
    }
    
    60%, 100% {
        transform: translateY(0) scale(1) translateZ(0);
    }
}

/* ========== 鼠标悬停增强 ========== */
.title-main:hover .char {
    animation: charBounceHover 0.8s ease-in-out infinite;
}

@keyframes charBounceHover {
    0%, 100% {
        transform: translateY(0) scale(1) translateZ(0);
    }
    
    25% {
        transform: translateY(-20px) scale(1.1) translateZ(0);
    }
    
    50% {
        transform: translateY(0) scale(1) translateZ(0);
    }
    
    75% {
        transform: translateY(-10px) scale(1.05) translateZ(0);
    }
}

/* ========== 字符阴影增强 - 简化以提高清晰度 ========== */
.title-main .char {
    text-shadow: 
        1px 1px 2px rgba(255, 107, 0, 0.2),
        0 2px 4px rgba(245, 127, 23, 0.2);
}

.title-main:hover .char {
    text-shadow: 
        1px 1px 3px rgba(255, 107, 0, 0.3),
        0 3px 6px rgba(245, 127, 23, 0.3);
}

/* ========== 响应式优化 ========== */
@media (max-width: 768px) {
    .title-main .char {
        -webkit-text-stroke: 0.2px currentColor;
    }
    
    @keyframes charBounce {
        0%, 100% {
            transform: translateY(0) scale(1) translateZ(0);
        }
        
        15% {
            transform: translateY(-15px) scale(1.08) translateZ(0);
        }
        
        30% {
            transform: translateY(0) scale(1) translateZ(0);
        }
        
        45% {
            transform: translateY(-8px) scale(1.04) translateZ(0);
        }
        
        60%, 100% {
            transform: translateY(0) scale(1) translateZ(0);
        }
    }
    
    @keyframes charBounceHover {
        0%, 100% {
            transform: translateY(0) scale(1) translateZ(0);
        }
        
        25% {
            transform: translateY(-12px) scale(1.05) translateZ(0);
        }
        
        50% {
            transform: translateY(0) scale(1) translateZ(0);
        }
        
        75% {
            transform: translateY(-6px) scale(1.02) translateZ(0);
        }
    }
}

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

/* 硬件加速 */
.title-main,
.title-main .char {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
}

/* 减少重绘 */
.title-main {
    contain: layout style paint;
}

/* 优化动画性能 */
.title-main .char {
    will-change: transform;
}

/* 减弱动画偏好 - 尊重用户设置 */
@media (prefers-reduced-motion: reduce) {
    .title-main .char {
        animation: none !important;
    }
    
    .title-main .char {
        transform: translateY(0) translateZ(0) !important;
    }
}

/* ========== 暗黑模式适配 ========== */
@media (prefers-color-scheme: dark) {
    .title-main .char {
        text-shadow: 
            1px 1px 3px rgba(255, 107, 0, 0.3),
            0 2px 6px rgba(245, 127, 23, 0.3);
    }
}

/* ========== 打印样式 ========== */
@media print {
    .title-main .char {
        animation: none !important;
        transform: none !important;
        text-shadow: none !important;
    }
}

/* ========== 额外的视觉增强 ========== */

/* 为每个字符添加微妙的颜色变化 */
.char-1 { color: #F57F17; }
.char-2 { color: #FF9500; }
.char-3 { color: #FFB800; }
.char-4 { color: #FF9500; }
.char-5 { color: #F57F17; }

/* 渐变色方案（可选） */
.title-main.gradient-mode .char {
    background: linear-gradient(135deg, #F57F17, #FFB800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== 性能监控提示 ========== */

/* 
性能优化要点：
1. ✅ 仅使用 transform 和 opacity（GPU加速）
2. ✅ 避免使用 top/left/width/height（会触发重排）
3. ✅ 使用 will-change 提示浏览器
4. ✅ 使用 translateZ(0) 开启硬件加速
5. ✅ 合理控制动画时长（2秒）
6. ✅ 尊重用户的减弱动画偏好
7. ✅ 响应式适配移动端（降低跳动幅度）
8. ✅ 使用 contain 属性减少重绘范围
*/