/* 性能优化CSS */



/* 优化图片延迟加载 */

img[loading="lazy"] {

    opacity: 0;

    transition: opacity 0.3s ease;

}



img[loading="lazy"].loaded,

img[loading="lazy"]:not([src=""]) {

    opacity: 1;

}



/* 减少动画复杂度，优化性能 */

@media (prefers-reduced-motion: reduce), (max-width: 768px) {

    /* 对于偏好减少动画的用户或移动设备，禁用复杂动画 */

    .scent-card:hover {

        transform: none !important;

        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;

    }

    

    .scent-card:hover .card-image img {

        transform: none !important;

    }

    

    .scent-card:hover::after {

        opacity: 0.5 !important;

    }

    

    /* 禁用淡入动画 */

    .ai-results-title,

    .category-summary,

    .scent-card {

        animation: none !important;

        opacity: 1 !important;

        transform: none !important;

    }

    

    /* 简化卡片阴影效果 */

    .card-content {

        box-shadow: none !important;

    }

}



/* 使用CSS contain优化布局重排 */

.scent-grid {

    contain: layout style;

}



#ai-loading {

    contain: content;

}



#particle-container {

    contain: strict;

}



.card-image img {

    contain: paint;

}



/* 使用GPU加速的属性 */

.scent-card, 

.modal-content, 

.banner-content,

#ai-loading,

.ai-results-title {

    transform: translateZ(0);

    backface-visibility: hidden;

    will-change: transform;

}



/* 减少不必要的嵌套DOM，优化渲染性能 */

.card-content > * {

    margin-bottom: 8px;

}



/* 优化模态框性能 */

.modal {

    contain: layout size;

}



.modal-content {

    contain: content;

}



/* 减少复杂的文本渐变，使用纯色替代 */

.ai-recommender-header h3 {

    color: #3b82f6;

    background: none;

    -webkit-background-clip: initial;

    -webkit-text-fill-color: initial;

}



/* 低性能设备优化 */

.low-performance-device .scent-card, 

.low-performance-device .modal-content, 

.low-performance-device .ai-section, 

.low-performance-device .chart-wrapper {

    animation: none !important;

    transition: opacity 0.3s ease !important;

}



.low-performance-device .scent-card:hover {

    transform: none !important;

}



.low-performance-device .ai-section {

    transform: none !important;

    opacity: 1 !important;

}



.low-performance-device #particle-container {

    opacity: 0.5;

}



/* 优化闪烁动画，使用更简单的CSS */

@keyframes optimized-pulse {

    0%, 100% { opacity: 0.8; }

    50% { opacity: 1; }

}



/* 停止非活动标签页中的动画 */

.animation-paused {

    animation-play-state: paused !important;

    transition: none !important;

}



/* 模态框样式修复 */

.modal .close {

    cursor: pointer;

    position: absolute;

    top: 15px;

    right: 15px;

    font-size: 28px;

    color: var(--text-muted);

    transition: color 0.3s ease;

    z-index: 5;

}



.modal .close:hover {

    color: var(--primary-color);

}