/*
 * ========================================
 * 性能优化CSS
 * 版本: 1.0
 * 创建时间: 2025-10-13
 * ========================================
 * 
 * 核心优化：
 * 1. GPU硬件加速（will-change + translateZ）
 * 2. 只使用 transform 和 opacity 做动画
 * 3. 避免触发重排的属性（width, height, top, left等）
 */

/* ==================== GPU加速优化 ==================== */

/* 所有动画卡片 - 启用硬件加速 */
.service-card,
.advantage-item,
.case-card,
.result-card,
.value-item,
.showcase-item,
.team-member,
.process-step {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 粒子系统 - GPU加速 */
.particle,
.floating-particle,
.hero-particles > * {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 鼠标光晕效果 - GPU加速 */
.mouse-glow,
.custom-cursor {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 导航栏 - GPU加速 */
.navbar {
    will-change: background-color, backdrop-filter;
    transform: translateZ(0);
}

/* 按钮 - GPU加速 */
.btn,
.btn-primary,
.btn-secondary,
button {
    will-change: transform, box-shadow;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 视差元素 - GPU加速 */
.hero-particles,
.hero-grid,
[data-parallax],
[data-mouse-parallax] {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ==================== 优化后的动画 ==================== */

/* 卡片悬停效果 - 只使用 transform */
.service-card:hover,
.advantage-item:hover,
.case-card:hover {
    transform: translateY(-10px) scale(1.02) translateZ(0) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 按钮悬停效果 - 只使用 transform */
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-2px) translateZ(0) !important;
    transition: transform 0.2s ease-out;
}

/* ==================== 粒子CSS动画（替代JS） ==================== */

/* 粒子漂浮动画 1 */
@keyframes particleFloat1 {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.3;
    }
    25% {
        transform: translate3d(30px, -40px, 0);
        opacity: 0.6;
    }
    50% {
        transform: translate3d(-20px, -80px, 0);
        opacity: 0.8;
    }
    75% {
        transform: translate3d(40px, -120px, 0);
        opacity: 0.5;
    }
}

/* 粒子漂浮动画 2 */
@keyframes particleFloat2 {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 0.4;
    }
    33% {
        transform: translate3d(-40px, -50px, 0) rotate(120deg);
        opacity: 0.7;
    }
    66% {
        transform: translate3d(20px, -100px, 0) rotate(240deg);
        opacity: 0.6;
    }
}

/* 粒子漂浮动画 3 */
@keyframes particleFloat3 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate3d(-30px, -60px, 0) scale(1.5);
        opacity: 0.8;
    }
}

/* ==================== 滚动动画优化 ==================== */

/* 淡入动画 - 使用 transform + opacity */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* 滑入动画 - 使用 transform */
.animate-slide-in-up {
    animation: slideInUp 0.6s ease-out forwards;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

.animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out forwards;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

/* 缩放动画 - 使用 transform */
.animate-scale-in {
    animation: scaleIn 0.6s ease-out forwards;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateZ(0);
    }
    to {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}

/* ==================== 移动端优化 ==================== */

/* 移动端：禁用某些动画以提升性能 */
@media (max-width: 768px) {
    /* 禁用视差效果 */
    .hero-particles,
    .hero-grid,
    [data-parallax],
    [data-mouse-parallax] {
        transform: none !important;
        will-change: auto;
    }
    
    /* 简化卡片动画 */
    .service-card:hover,
    .advantage-item:hover,
    .case-card:hover {
        transform: translateY(-5px) translateZ(0) !important;
    }
    
    /* 禁用粒子效果 */
    .particle,
    .floating-particle {
        display: none;
    }
}

/* ==================== 性能优化提示 ==================== */

/* 
 * 性能最佳实践：
 * 
 * ✅ 推荐使用的CSS属性（不触发重排）：
 * - transform
 * - opacity
 * - filter
 * 
 * ❌ 避免在动画中使用（会触发重排）：
 * - width, height
 * - top, left, right, bottom
 * - margin, padding
 * - border-width
 * - font-size
 * 
 * ✅ GPU加速属性：
 * - will-change: transform, opacity;
 * - transform: translateZ(0);
 * - backface-visibility: hidden;
 * - perspective: 1000px;
 * 
 * ⚠️ 注意：
 * - 不要过度使用 will-change（会占用内存）
 * - 只在需要动画的元素上使用
 * - 动画完成后可以移除 will-change
 */

/* ==================== 减少重绘优化 ==================== */

/* 使用 contain 属性限制重绘范围 */
.service-card,
.advantage-item,
.case-card {
    contain: layout style paint;
}

/* 静态内容使用 content-visibility */
.footer,
.testimonials-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ==================== 字体渲染优化 ==================== */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==================== 图片优化 ==================== */

img {
    /* 启用硬件加速 */
    transform: translateZ(0);
    
    /* 优化图片渲染 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* 懒加载图片占位 */
img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==================== 调试工具 ==================== */

/* 开发模式：显示重绘区域（需在浏览器DevTools中启用） */
.debug-repaint * {
    outline: 1px solid red !important;
}

/* 性能监控 - FPS计数器样式 */
.fps-counter {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #0f0;
    padding: 10px;
    font-family: monospace;
    z-index: 99999;
    border-radius: 4px;
    font-size: 14px;
}