/*-----------------------------------------------------------------------------------
    性能优化样式 - 智慧安防科技官网
    Description: Web性能优化和现代浏览器特性支持
    Author: AI Assistant
    Version: 1.0
    Last Updated: 2024-01-15
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
    目录
    ===================
    1. 关键渲染路径优化
    2. GPU加速
    3. 内容可见性优化
    4. 字体加载优化
    5. 图片优化
    6. 滚动性能
    7. 布局稳定性
    8. 内存优化
    9. 网络优化
    10. 现代浏览器特性
-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
    1. 关键渲染路径优化
-----------------------------------------------------------------------------------*/

/* 关键内容优先显示 */
.critical-content {
    contain: layout style;
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* 非关键内容延迟渲染 */
.non-critical {
    content-visibility: auto;
    contain-intrinsic-size: 0 300px;
}

/* 首屏内容优化 */
.above-fold {
    contain: layout style paint;
    will-change: auto;
}

/* 折叠下内容 */
.below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

/*-----------------------------------------------------------------------------------
    2. GPU加速
-----------------------------------------------------------------------------------*/

/* 强制GPU加速 */
.gpu-layer {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 动画元素GPU优化 */
.animate-gpu {
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* 滚动元素GPU优化 */
.scroll-gpu {
    transform: translateZ(0);
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

/* 固定定位元素优化 */
.fixed-gpu {
    transform: translateZ(0);
    will-change: transform;
    contain: layout style paint;
}

/*-----------------------------------------------------------------------------------
    3. 内容可见性优化
-----------------------------------------------------------------------------------*/

/* 自动内容可见性 */
.auto-visibility {
    content-visibility: auto;
    contain-intrinsic-size: 0 250px;
}

/* 隐藏内容优化 */
.hidden-content {
    content-visibility: hidden;
    contain-intrinsic-size: 0 0;
}

/* 可见内容优化 */
.visible-content {
    content-visibility: visible;
    contain: layout style;
}

/* 长列表优化 */
.long-list {
    contain: layout style;
    content-visibility: auto;
    contain-intrinsic-size: 0 100px;
}

.long-list-item {
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: 0 80px;
}

/*-----------------------------------------------------------------------------------
    4. 字体加载优化
-----------------------------------------------------------------------------------*/

/* 字体显示优化 */
.font-display-swap {
    font-display: swap;
}

.font-display-fallback {
    font-display: fallback;
}

.font-display-optional {
    font-display: optional;
}

/* 字体渲染优化 */
.optimized-text {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    font-variant-ligatures: common-ligatures;
}

/* 字体加载状态 */
.font-loading {
    font-family: system-ui, -apple-system, sans-serif;
    visibility: hidden;
}

.font-loaded {
    visibility: visible;
    transition: visibility 0.1s;
}

/* 系统字体栈 */
.system-font {
    font-family: 
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        'Helvetica Neue',
        sans-serif;
}

/*-----------------------------------------------------------------------------------
    5. 图片优化
-----------------------------------------------------------------------------------*/

/* 响应式图片 */
.responsive-img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
}

/* 懒加载图片 */
.lazy-img {
    opacity: 0;
    transition: opacity 0.3s;
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px;
}

.lazy-img.loaded {
    opacity: 1;
}

/* 图片占位符 */
.img-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

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

/* WebP支持检测 */
.webp .webp-img {
    background-image: url('image.webp');
}

.no-webp .webp-img {
    background-image: url('image.jpg');
}

/* 图片容器优化 */
.img-container {
    contain: layout style;
    overflow: hidden;
}

/*-----------------------------------------------------------------------------------
    6. 滚动性能
-----------------------------------------------------------------------------------*/

/* 平滑滚动 */
.smooth-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* 滚动容器优化 */
.scroll-container {
    contain: layout style;
    will-change: scroll-position;
    transform: translateZ(0);
}

/* 虚拟滚动 */
.virtual-scroll {
    overflow: auto;
    contain: strict;
    content-visibility: auto;
}

/* 滚动捕捉 */
.scroll-snap-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

.scroll-snap-item {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* 滚动性能优化 */
.scroll-optimized {
    transform: translateZ(0);
    will-change: scroll-position;
    contain: layout style;
}

/*-----------------------------------------------------------------------------------
    7. 布局稳定性
-----------------------------------------------------------------------------------*/

/* 防止布局偏移 */
.stable-layout {
    contain: layout;
    min-height: 200px; /* 预设最小高度 */
}

/* 固定宽高比 */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

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

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

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-title {
    height: 1.5em;
    width: 60%;
    margin-bottom: 1em;
}

.skeleton-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/*-----------------------------------------------------------------------------------
    8. 内存优化
-----------------------------------------------------------------------------------*/

/* 内存高效的动画 */
.memory-efficient {
    will-change: auto;
    contain: layout style paint;
}

/* 避免内存泄漏 */
.no-memory-leak {
    contain: strict;
    isolation: isolate;
}

/* 大型列表优化 */
.large-list {
    contain: layout style;
    overflow: auto;
    height: 400px;
}

.large-list-item {
    contain: layout style paint;
    height: 50px;
}

/*-----------------------------------------------------------------------------------
    9. 网络优化
-----------------------------------------------------------------------------------*/

/* 预加载关键资源 */
.preload-critical {
    /* 通过HTML link标签实现 */
}

/* 预连接外部资源 */
.preconnect-external {
    /* 通过HTML link标签实现 */
}

/* 资源提示 */
.resource-hint {
    /* 通过HTML link标签实现 */
}

/*-----------------------------------------------------------------------------------
    10. 现代浏览器特性
-----------------------------------------------------------------------------------*/

/* CSS Grid优化 */
.grid-optimized {
    display: grid;
    contain: layout style;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

/* Flexbox优化 */
.flex-optimized {
    display: flex;
    contain: layout style;
    flex-wrap: wrap;
    gap: 1rem;
}

/* 容器查询 */
@container (min-width: 400px) {
    .container-query {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* CSS自定义属性优化 */
.css-vars-optimized {
    --local-color: var(--primary-color);
    color: var(--local-color);
}

/* 逻辑属性 */
.logical-props {
    margin-inline: 1rem;
    padding-block: 0.5rem;
    border-inline-start: 2px solid var(--primary-color);
}

/* 现代选择器 */
.modern-selectors :is(h1, h2, h3) {
    margin-block: 1rem;
}

.modern-selectors :where(p, li) {
    line-height: 1.6;
}

/* 层叠层 */
@layer base {
    .base-styles {
        font-family: system-ui, sans-serif;
    }
}

@layer components {
    .component-styles {
        padding: 1rem;
        border-radius: 0.5rem;
    }
}

@layer utilities {
    .utility-styles {
        margin: 0 !important;
    }
}

/* 子网格 */
.subgrid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.subgrid-item {
    display: grid;
    grid-template-columns: subgrid;
}

/* 滚动时间线 */
@supports (animation-timeline: scroll()) {
    .scroll-timeline {
        animation: fade-in linear;
        animation-timeline: scroll();
        animation-range: entry 0% cover 50%;
    }
}

/* 视图过渡 */
@supports (view-transition-name: none) {
    .view-transition {
        view-transition-name: slide;
    }
}

/* 锚点定位 */
@supports (anchor-name: --anchor) {
    .anchor-element {
        anchor-name: --my-anchor;
    }
    
    .positioned-element {
        position: absolute;
        left: anchor(--my-anchor right);
        top: anchor(--my-anchor bottom);
    }
}

/*-----------------------------------------------------------------------------------
    性能监控和调试
-----------------------------------------------------------------------------------*/

/* 性能调试 */
.perf-debug {
    outline: 2px solid red;
    background: rgba(255, 0, 0, 0.1);
}

.perf-debug::before {
    content: 'PERF DEBUG';
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: white;
    padding: 2px 4px;
    font-size: 10px;
    z-index: 9999;
}

/* 布局调试 */
.layout-debug * {
    outline: 1px solid rgba(255, 0, 0, 0.5);
}

/* 重绘调试 */
.repaint-debug {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 0, 0, 0.1) 10px,
        rgba(255, 0, 0, 0.1) 20px
    );
}

/*-----------------------------------------------------------------------------------
    响应式性能优化
-----------------------------------------------------------------------------------*/

/* 移动端优化 */
@media (max-width: 768px) {
    .mobile-optimized {
        contain: layout style;
        will-change: auto;
    }
    
    .mobile-hidden {
        display: none;
    }
    
    .mobile-simplified {
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .high-dpi-optimized {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* 低端设备优化 */
@media (max-width: 480px) and (max-height: 800px) {
    .low-end-optimized {
        contain: layout style paint;
        will-change: auto;
        animation: none;
        transition: none;
    }
}

/* 网络状况优化 */
@media (prefers-reduced-data: reduce) {
    .data-saver {
        background-image: none;
        animation: none;
        transition: none;
    }
}

/* 电池优化 */
@media (prefers-reduced-motion: reduce) {
    .battery-saver {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/*-----------------------------------------------------------------------------------
    实验性特性
-----------------------------------------------------------------------------------*/

/* 实验性网格特性 */
@supports (display: grid) {
    .experimental-grid {
        display: grid;
        grid-template-areas: 
            "header header"
            "sidebar main"
            "footer footer";
    }
}

/* 实验性滚动特性 */
@supports (overscroll-behavior: contain) {
    .experimental-scroll {
        overscroll-behavior: contain;
    }
}

/* 实验性颜色特性 */
@supports (color: color(display-p3 1 0 0)) {
    .experimental-color {
        color: color(display-p3 0 0.5 1);
    }
}

/* 实验性字体特性 */
@supports (font-variation-settings: 'wght' 400) {
    .experimental-font {
        font-variation-settings: 'wght' 400, 'wdth' 100;
    }
}