/* 防止Logo闪烁的补充样式 */

/* Logo容器背景优化 */
.logo {
    background: transparent !important;
    /* 确保logo容器没有背景 */
    background-color: transparent !important;
    background-image: none !important;
    /* 防止闪烁 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Logo图片防闪烁优化 */
.logo img {
    /* 硬件加速 */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;

    /* 渲染优化 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;

    /* 强制透明背景 */
    background-color: transparent !important;
    background-image: none !important;
    mix-blend-mode: normal !important;

    /* 防止闪烁 */
    -webkit-animation: logoFadeIn 0.1s ease-in;
    animation: logoFadeIn 0.1s ease-in;

    /* 预加载优化 */
    content-visibility: auto;

    /* 确保PNG透明度正确显示 */
    opacity: 1;
    filter: none;
}

@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 页面加载时预加载Logo */
@media screen {
    .logo img {
        will-change: transform;
    }
}

/* 移动端Logo防闪烁 */
@media (max-width: 767px) {
    .logo img {
        /* 移动端额外优化 */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition: opacity 0.2s ease-in;
        transition: opacity 0.2s ease-in;
    }
}

/* 解决Safari中的闪烁问题 */
@supports (-webkit-backface-visibility: hidden) {
    .logo img {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* 解决Firefox中的闪烁问题 */
@supports (backface-visibility: hidden) {
    .logo img {
        backface-visibility: hidden;
    }
}