/* 统一动画系统样式 */

/* 页面初始状态 */
body {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* APP盒子基础样式 - 增强GPU加速 */
.app-box {
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    perspective: 1000px;
    transform: translateZ(0); /* 强制GPU加速 */
    transform-style: preserve-3d;
}

/* 平衡的悬停效果 */
.app-box:hover {
    transform: translateY(-5px) scale(1.02) translateZ(0) !important;
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
    filter: brightness(1.03) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 动画进行中的样式优化 */
.app-box[data-animated="false"] {
    contain: layout style paint;
    isolation: isolate;
}

/* 确保动画流畅 */
html {
    scroll-behavior: auto; /* 避免与JS滚动冲突 */
}

/* 优化渲染性能 */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 防止布局偏移 */
.app-box[data-animated="false"] {
    contain: layout style paint;
}

/* 分类线动画优化 */
.fl-line {
    transition: all 0.6s ease;
}

.fl-line.visible {
    opacity: 1;
    transform: translateX(0);
}

/* 加载动画容器优化 */
.loader-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 确保动画不被其他样式覆盖 */
.app-box[data-animated="true"] {
    opacity: 1 !important;
    transform: translateY(0) scale(1) translateZ(0) !important;
    visibility: visible !important;
    filter: blur(0px) !important;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .app-box:hover {
        transform: translateY(-3px) scale(1.01) translateZ(0) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }
}

/* 高性能动画设置 */
.app-box {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
}

/* 防止动画期间的闪烁 */
.app-box[data-animated="false"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}