/**
 * 文件名称：scroll-optimization.css
 * 文件功能：滚动性能优化样式，包含GPU加速、减少重绘和重排、动画性能优化等
 * 创建日期：2026-03-16
 * 维护人员：前端开发团队
 * 
 * 关键功能模块：
 * 1. 全局滚动优化
 * 2. GPU加速
 * 3. 减少重绘和重排
 * 4. 主要内容区域滚动优化
 * 5. 轮播图性能优化
 * 6. 滚动字幕性能优化
 * 7. HUD圆圈动画性能优化
 * 8. 视差滚动元素优化
 * 9. 卡片网格布局优化
 * 10. 统计卡片动画优化
 * 11. 防止布局抖动
 * 12. 图片加载优化
 * 13. 太阳系动画性能优化
 * 14. 导航菜单性能优化
 * 15. 按钮交互优化
 * 16. 减少动画对滚动性能的影响
 * 17. 移动端滚动优化
 * 18. 滚动条样式优化
 * 19. 页脚波浪动画优化
 * 
 * 关联文件：
 * - static/css/style.css：主样式文件
 * - static/js/script.js：与主脚本文件交互
 * 
 * 注意事项：
 * - 使用 GPU 加速提升动画性能
 * - 减少重绘和重排，提升页面滚动流畅度
 * - 优化图片加载和懒加载
 * - 适配不同设备和浏览器
 * - 尊重用户的减少动画偏好设置
 */

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

/* 全局滚动优化 */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* 启用GPU加速 */
.ios-main-content,
.hero-wrapper,
.tech-card,
.module-card,
.stat-card,
.domain-card,
.why-card,
.carousel-container,
.carousel-track,
.carousel-slide,
.hud-circle,
.character-image,
.marquee-content,
.feature-grid,
.marketing-modules,
.domains-grid,
.why-grid,
.stats-container,
.cta-character,
.macbook-container {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 减少重绘和重排 - 使用contain属性 */
.tech-card,
.module-card,
.domain-card,
.stat-card,
.why-card,
.nav-menu-item,
.universe-menu-item,
.top-nav-item,
.cyber-btn,
.cta-btn {
    contain: layout style paint;
}

/* 主要内容区域滚动优化 */
.ios-main-content {
    will-change: transform;
    transform: translateZ(0);
}

/* 轮播图性能优化 */
.carousel-container {
    overflow: hidden;
    will-change: transform;
}

.carousel-track {
    will-change: transform;
    transform: translateZ(0);
}

.carousel-slide {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* 滚动字幕性能优化 */
.hero-marquee {
    overflow: hidden;
    will-change: transform;
}

.marquee-content {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* HUD圆圈动画性能优化 */
.hud-circle {
    will-change: transform;
    transform: translateZ(0);
    pointer-events: none;
}

/* 视差滚动元素优化 */
.character-image {
    will-change: transform;
    transform: translateZ(0);
}

/* 卡片网格布局优化 */
.feature-grid,
.marketing-modules,
.domains-grid,
.why-grid {
    contain: layout;
    will-change: transform;
}

/* 统计卡片动画优化 */
.stat-card {
    will-change: transform, opacity;
    transform: translateZ(0);
}

.percent svg {
    will-change: stroke-dashoffset;
    transform: translateZ(0);
}

/* 防止布局抖动 */
.hero-container,
.cta-inner,
.footer-inner,
.content-inner {
    contain: layout;
}

/* 图片加载优化 */
img {
    content-visibility: auto;
    contain: paint;
}



/* 太阳系动画性能优化 */
.universe {
    will-change: transform;
    transform: translateZ(0);
}

.universe .orbit {
    will-change: transform;
    transform: translateZ(0);
}

.universe .body {
    will-change: transform;
    transform: translateZ(0);
}

/* 导航菜单性能优化 */
.nav-menu {
    will-change: transform, opacity;
    transform: translateZ(0);
}

.universe-menu {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* 按钮交互优化 */
.cyber-btn,
.cta-btn,
.domain-btn {
    will-change: transform;
    transform: translateZ(0);
}

/* 减少动画对滚动性能的影响 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hud-circle,
    .character-image,
    .marquee-content {
        will-change: auto;
        animation: none !important;
    }
}

/* 移动端滚动优化 */
@media (max-width: 768px) {
    html {
        -webkit-overflow-scrolling: touch;
    }

    /* 移动端减少视差效果 */
    .hud-circle,
    .character-image {
        will-change: auto;
    }

    /* 优化触摸滚动 */
    .ios-main-content {
        touch-action: auto;
    }

    /* 确保Hero区域可以自由滚动 */
    .pricing-hero {
        touch-action: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* 滚动条样式优化 - 仅在非隐藏状态下显示 */
@media (hover: hover) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--surface-bg);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--text-light);
    }
}

/* 防止滚动时的布局偏移 */
.ios-header {
    contain: layout;
    will-change: transform;
    transform: translateZ(0);
}

/* 页脚波浪动画优化 */
.footer-waves {
    will-change: transform;
    transform: translateZ(0);
}

.waves {
    will-change: transform;
    animation: wave-animation 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

@keyframes wave-animation {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, 5px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* 使用content-visibility优化长列表 */
.tech-card:nth-child(n+5),
.module-card:nth-child(n+4) {
    content-visibility: auto;
    contain-intrinsic-size: 0 300px;
}

/* 防止字体闪烁 */
body {
    font-display: swap;
}