/* ============================================
   性能优化专用样式表
   用于提升野生蓝莓产业页面的渲染性能和流畅度
   ============================================ */

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

/* 为关键动画元素启用硬件加速 */
.scroll-reveal,
.benefit-card,
.product-card,
.subsidiary-card,
.mission-card,
.eco-node,
.floating-circle,
.process-step,
.testimonial-card,
.platform-card {
    /* 强制使用GPU渲染 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* 启用硬件加速 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* ========== Will-Change 优化 ========== */

/* 提示浏览器即将发生的变化，优化渲染 */
.benefit-card,
.product-card,
.subsidiary-card,
.platform-card {
    will-change: transform, opacity;
}

/* 悬停状态完成后移除will-change */
.benefit-card:not(:hover),
.product-card:not(:hover),
.subsidiary-card:not(:hover),
.platform-card:not(:hover) {
    will-change: auto;
}

/* 滚动时的will-change提示 */
.scroll-reveal:not(.revealed) {
    will-change: transform, opacity;
}

.scroll-reveal.revealed {
    will-change: auto;
}

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

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

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

/* 图片加载状态 */
img.loading {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

img.loaded {
    opacity: 1;
}

/* ========== 减少重排重绘 ========== */

/* 使用contain属性限制布局影哓范围 */
.product-card,
.benefit-card,
.subsidiary-card,
.testimonial-card,
.platform-card {
    contain: layout style paint;
}

/* 为独立模块使用contain */
.blueberry-advantages,
.blueberry-products,
.group-introduction,
.business-platforms {
    contain: layout;
}

/* ========== 滚动性能优化 ========== */

/* 启用CSS Containment降低布局成本 */
.hero-section,
.benefits-grid,
.products-grid,
.subsidiaries-grid {
    contain: layout;
}

/* 使用transform代替top/left进行定位动画 */
/* .floating-circle 已使用transform,无需额外优化 */

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

body {
    /* 优化字体渲染 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
}

/* ========== 动画性能优化 ========== */

/* 确保所有动画使用transform和opacity */
@media (prefers-reduced-motion: no-preference) {
    /* 只在用户未禁用动画时应用复杂动画 */
    .eco-node {
        animation: orbit 30s linear infinite;
    }
    
    .floating-circle {
        animation: float 20s infinite ease-in-out;
    }
    
    .connection-line {
        animation: connectionPulse 3s infinite;
    }
}

/* 用户禁用动画时的降级方案 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== 复合层优化 ========== */

/* 将频繁动画的元素提升到独立的复合层 */
.hero-visual,
.blueberry-ecosystem,
.network-center,
.ecosystem-nodes {
    transform: translateZ(0);
    will-change: transform;
}

/* ========== 视差效果优化 ========== */

/* 集团介绍视差效果 */
.group-introduction {
    /* 使用CSS变量配合transform优化视差 */
    --parallax-offset: 0px;
    --bg-opacity: 1;
}

.group-introduction::before {
    transform: translateY(var(--parallax-offset));
    opacity: var(--bg-opacity);
    will-change: transform, opacity;
}

/* ========== 内容可见性优化 ========== */

/* 使用content-visibility优化离屏内容 */
@supports (content-visibility: auto) {
    .blueberry-products,
    .blueberry-process,
    .testimonials,
    .business-platforms {
        content-visibility: auto;
        contain-intrinsic-size: 0 500px; /* 估算高度 */
    }
}

/* ========== 过渡和动画统一优化 ========== */

/* 确保所有过渡效果使用硬件加速属性 */
.benefit-card,
.product-card,
.btn-primary,
.btn-secondary,
.filter-btn {
    /* 只对transform和opacity做动画 */
    transition-property: transform, opacity, box-shadow, border-color, background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== 响应式图片优化 ========== */

/* 确保图片不会引起重排 */
.product-image,
.hero-visual,
.platform-image {
    position: relative;
    overflow: hidden;
}

.product-image img,
.hero-visual img,
.platform-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========== 防止布局抖动 ========== */

/* 为动态内容预留空间 */
.countdown-timer,
.stat-number,
.time-value {
    min-width: fit-content;
    text-align: center;
}

/* ========== 关键CSS内联优化建议 ========== */

/* 以下样式建议内联到HTML <head>中 */
/*
.wild-blueberry-hero {
    min-height: 90vh;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #8b5cf6 100%);
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
*/

/* ========== 预加载和预连接 ========== */

/* 在HTML中添加以下标签:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preload" href="styles/blueberry-theme.css" as="style">
<link rel="preload" href="scripts/group-buying.js" as="script">
*/

/* ========== 滚动吸附优化 ========== */

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 在低性能设备上禁用平滑滚动 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ========== 渲染层管理 ========== */

/* 避免不必要的层创建 */
.section-header,
.section-title,
.section-subtitle {
    /* 不需要独立层 */
    will-change: auto;
}

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

@media (max-width: 768px) {
    /* 移动端减少动画复杂度 */
    .floating-circle,
    .eco-node {
        animation-duration: 30s; /* 减慢动画减少CPU使用 */
    }
    
    /* 移动端禁用视差效果 */
    .group-introduction::before {
        transform: none !important;
    }
    
    /* 减少阴影复杂度 */
    .benefit-card:hover,
    .product-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

/* ========== 触摸优化 ========== */

/* 移除点击延迟 */
a,
button,
.btn-primary,
.btn-secondary,
.filter-btn {
    touch-action: manipulation;
}

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

/* 开发时可用：显示重绘区域 */
/* 
* {
    outline: 1px solid rgba(255, 0, 0, 0.2);
}
*/