/**
 * 自定义样式文件
 * 包含性能优化、浏览器兼容性和移动端适配
 * 遵循谷歌开源规范
 */

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

/**
 * 全屏滑块性能优化
 * 使用GPU加速减少重绘
 */
.vlt-fullpage-slider {
    will-change: transform;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

/**
 * 页面区块性能优化
 * 启用硬件加速
 */
.vlt-section {
    will-change: transform;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

/**
 * 动画元素优化
 * 减少动画元素的重绘
 */
.vlt-animated-block {
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

/**
 * 星空画布性能优化
 * 控制GPU使用
 */
.star-canvas {
    will-change: auto;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

/**
 * 平滑滚动优化
 * 提升滚动体验
 */
.pp-scrollable {
    -webkit-scroll-behavior: smooth;
    -moz-scroll-behavior: smooth;
    -ms-scroll-behavior: smooth;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/**
 * 页面切换动画优化
 * 减少页面切换时的闪烁
 */
body.animsition {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

/**
 * 图片渲染优化
 * 优化图片加载和显示
 */
img {
    -webkit-image-rendering: -webkit-optimize-contrast;
    -moz-image-rendering: -moz-crisp-edges;
    -ms-image-rendering: -ms-interpolation-mode: bicubic;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

/**
 * 导航栏性能优化
 * 减少重排重绘
 */
.vlt-navbar {
    will-change: transform;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ==========================================================================
   浏览器兼容性优化
   ========================================================================== */

/**
 * 微信浏览器兼容性优化
 * 解决微信浏览器中的显示问题
 */
.wechat-browser body {
    opacity: 1 !important;
    visibility: visible !important;
}

.wechat-browser .animsition-loading-2 {
    display: none !important;
}

/**
 * 防止微信浏览器中的页面闪烁
 * 确保页面正常显示
 */
body:not(.animsition) {
    opacity: 1;
    visibility: visible;
}

/**
 * iOS Safari 兼容性优化
 * 添加iOS Safari特殊样式
 */
.ios-safari body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/**
 * IE11 兼容性优化
 * 添加IE11特殊样式
 */
.ie11 .vlt-animated-block {
    /* IE11不支持will-change，使用transform触发硬件加速 */
    -ms-transform: translateZ(0);
}

.ie11 .star-canvas {
    /* IE11 Canvas优化 */
    -ms-touch-action: none;
}

/**
 * Firefox 兼容性优化
 */
@-moz-document url-prefix() {
    .vlt-fullpage-slider {
        /* Firefox特殊优化 */
        -moz-transform: translateZ(0);
    }
}

/**
 * Edge 兼容性优化
 */
@supports (-ms-ime-align: auto) {
    .vlt-animated-block {
        /* Edge特殊优化 */
        -ms-transform: translateZ(0);
    }
}

/**
 * 微信浏览器中的链接优化
 * 优化触摸体验
 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

/**
 * 通用触摸优化
 * 适用于所有触摸设备
 */
a, button, .clickable {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* 防止双击缩放 */
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

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

/**
 * 移动端性能优化
 * 针对小屏幕设备的特殊优化
 */
@media (max-width: 768px) {
    /**
     * 隐藏星空动画以提升移动端性能
     */
    .star-canvas {
        display: none;
    }
    
    /**
     * 缩短移动端动画时间
     * 提升响应速度
     */
    .vlt-animated-block {
        -webkit-animation-duration: 0.3s !important;
        -moz-animation-duration: 0.3s !important;
        -ms-animation-duration: 0.3s !important;
        -o-animation-duration: 0.3s !important;
        animation-duration: 0.3s !important;
    }
    
    /**
     * 微信浏览器移动端特殊优化
     * 启用平滑滚动
     */
    body {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        /* 防止iOS Safari地址栏影响 */
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    /**
     * 防止微信浏览器的橡皮筋效果
     * 避免页面过度滚动
     */
    html, body {
        height: 100%;
        height: -webkit-fill-available;
        overflow-x: hidden;
        /* 防止水平滚动 */
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    
    /**
     * 移动端输入框优化
     * 防止页面缩放
     */
    input, textarea, select {
        font-size: 16px; /* 防止iOS缩放 */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    /**
     * 移动端按钮优化
     */
    button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
    }
}