/**
 * 移动端性能关键 CSS
 * 解决：点击延迟、动画卡顿、滚动不流畅
 */

/* 1. 消除 300ms 点击延迟 */
html {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

* {
    -webkit-tap-highlight-color: transparent;
}

/* 2. 优化滚动性能 */
html, body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.scrollable,
[style*="overflow: auto"],
[style*="overflow-y: auto"],
[style*="overflow: scroll"],
[style*="overflow-y: scroll"] {
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
}

/* 3. GPU 加速关键元素 */
.bottom-sheet-panel,
.bottom-sheet-mask,
.mini-toast,
.modal,
.popup,
.drawer,
.slide,
.carousel,
[class*="animate"],
[class*="transition"] {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 4. 优化按钮点击反馈 */
button,
a,
[onclick],
.clickable,
.btn,
[role="button"] {
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

button:active,
a:active,
[onclick]:active,
.clickable:active,
.btn:active {
    opacity: 0.7;
    transform: scale(0.98);
    transition: transform 0.1s ease, opacity 0.1s ease;
}

/* 5. 减少重绘 - 固定定位元素 */
.top-nav,
.header-bar,
.bottom-nav,
.fixed-header,
.fixed-footer,
[style*="position: fixed"] {
    will-change: transform;
    transform: translateZ(0);
}

/* 6. 图片优化 */
img {
    content-visibility: auto;
    /* 确保图片始终可见 */
    opacity: 1 !important;
}

/* 7. 慢网络模式 - 仅添加轻微模糊，不隐藏图片 */
.slow-network img:not([fetchpriority="high"]):not(.loaded) {
    filter: blur(2px);
    transition: filter 0.3s ease;
}

.slow-network img.loaded,
.slow-network img[fetchpriority="high"] {
    filter: none;
}

.slow-network .non-critical {
    display: none !important;
}

/* 8. 骨架屏占位 */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

/* 9. 减少动画在低端设备 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 低端设备模式 */
.low-perf-mode *,
.low-perf-mode *::before,
.low-perf-mode *::after {
    animation-duration: 0.1s !important;
    transition-duration: 0.1s !important;
}

.low-perf-mode .non-critical-animation {
    animation: none !important;
}

/* 10. 优化表单输入 */
input,
textarea,
select {
    font-size: 16px; /* 防止 iOS 自动缩放 */
}

/* 11. 优化弹层动画 */
.bottom-sheet-panel {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-sheet-mask {
    transition: opacity 0.2s ease;
}

/* 12. 内容可见性优化 */
.lazy-section,
.below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* 13. 字体优化 */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 14. 列表优化 */
.virtual-list,
.long-list {
    contain: strict;
}

.virtual-list > *,
.long-list > * {
    contain: layout style;
}