/**
 * 移动端性能优化 CSS
 * 减少重排重绘，优化动画性能
 */

/* === 1. 全局性能优化 === */

/* 使用 GPU 加速 */
.task-card,
.project-card,
.download-cta,
.slider-track,
.project-track {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* 优化触摸反馈 */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* === 2. 简化动画（减少复杂度）=== */

/* 简化 hero 区域的背景动画 */
.hero-section::before {
    animation: none !important; /* 移除复杂背景动画 */
}

/* 简化浮动元素动画 */
@keyframes float-simplified {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.floating-element {
    animation: float-simplified 3s ease-in-out infinite;
}

/* 简化脉冲动画 */
@keyframes pulse-simplified {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.pulse, .fa-circle.pulse {
    animation: pulse-simplified 2s ease-in-out infinite;
}

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

/* 使用硬件加速滚动 */
.slider-track,
.project-track,
.tasks-grid,
[class*="scroll"] {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* 减少滚动时的重绘 */
.slider-track > *,
.project-track > * {
    contain: layout style paint;
}

/* === 4. 卡片hover效果优化 === */

/* 使用 transform 代替 box-shadow 变化 */
.task-card:active,
.project-card:active {
    transform: scale(0.98) translateZ(0);
    transition: transform 0.1s ease;
}

/* 移除复杂的 hover 效果（移动端不需要）*/
@media (hover: none) and (pointer: coarse) {
    .task-card:hover,
    .project-card:hover,
    .download-cta:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
    
    .task-card:hover::before,
    .project-card:hover::before {
        opacity: 0 !important;
    }
}

/* === 5. 图片加载优化 === */

/* 图片占位符，防止布局抖动 */
img {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
}

/* 图片加载动画 - 简化版 */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* === 6. 低端设备模式 === */

/* 为低端设备禁用所有非必要动画 */
.low-perf-mode * {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1s !important;
}

.low-perf-mode .hero-section::before,
.low-perf-mode .floating-element,
.low-perf-mode [class*="gradient-border"],
.low-perf-mode [class*="wave"] {
    display: none !important;
}

/* 简化阴影效果 */
.low-perf-mode .task-card,
.low-perf-mode .project-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* === 7. 防止内存泄漏 === */

/* 限制动画元素的范围 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === 8. 字体加载优化 === */

/* 使用 font-display: swap 加快字体渲染 */
@font-face {
    font-display: swap;
}

/* 防止字体加载导致的闪烁 */
body {
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed; /* 优先速度而非质量 */
}

/* === 9. 减少重绘区域 === */

/* 为变化频繁的元素创建独立图层 */
.hero-slider,
.projects-section,
.tasks-grid,
.download-cta {
    contain: layout style;
    isolation: isolate;
}

/* === 10. 优化触摸交互 === */

/* 增大触摸目标，减少误触 */
button,
a,
.clickable {
    min-height: 44px;
    min-width: 44px;
    position: relative;
}

/* 触摸反馈 - 使用 transform 而非背景色变化 */
button:active,
a:active,
.clickable:active {
    transform: scale(0.96) translateZ(0);
    transition: transform 0.1s ease;
}

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

/* 使用 content-visibility 加速渲染（现代浏览器）*/
.tasks-grid,
.project-carousel,
.bottom-nav {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px; /* 预估高度 */
}

/* === 12. 减少布局抖动 === */

/* 为可能变化的元素预留空间 */
.announcement-banner,
.download-cta {
    min-height: fit-content;
}

/* 防止图片导致的布局偏移 */
.project-icon,
.task-card img,
.slider-item img {
    aspect-ratio: 1;
    object-fit: cover;
}