/* ==========================================
   浏览器兼容性补丁 - 动画和过渡效果
   ========================================== */

/* 为main.css中的关键动画添加浏览器前缀 */

/* pageEnter 动画 */
@-webkit-keyframes pageEnter {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes pageEnter {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* heroFadeIn 动画 */
@-webkit-keyframes heroFadeIn {
    from {
        opacity: 0;
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* heroContentFadeIn 动画 */
@-webkit-keyframes heroContentFadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes heroContentFadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* 为.page.active添加前缀 */
.page.active {
    -webkit-animation: pageEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation: pageEnter 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 为.hero-image添加前缀 */
.hero-image {
    -webkit-animation: heroFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    animation: heroFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 为.hero-content添加前缀 */
.hero-content {
    -webkit-animation: heroContentFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
    animation: heroContentFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

/* 为所有transition添加前缀（通用规则） */
.page {
    -webkit-transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 启动动画相关 */
.startup-animation {
    -webkit-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.startup-logo-wrapper {
    -webkit-transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.startup-logo {
    -webkit-transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   视频播放兼容性修复（Edge）
   ========================================== */

/* 确保视频元素正确显示 */
video {
    -o-object-fit: contain;
    object-fit: contain;
}

/* 隐藏视频控制条 */
video::-webkit-media-controls {
    display: none !important;
}

video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* 视频加载状态 */
video:not([src]) {
    background: #000;
}

/* 确保视频在不同显示模式下正确渲染 */
.hero-image.display-mode-maximize {
    -o-object-fit: cover;
    object-fit: cover;
}

.hero-image.display-mode-fit {
    -o-object-fit: contain;
    object-fit: contain;
}