/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #121212;
    min-height: 100vh;
    overflow-x: hidden;
}

/* 定义淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 新增：淡入动画类 */
.fade-in {
    opacity: 1;
    animation: fadeIn 1.5s ease forwards;
}

/* 图标容器样式 */
.icon-container {
    position: fixed;
    bottom: 10%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    transform: translateY(50%);
    padding: 0 60px; /* 与边缘保持最小间距 */
    z-index: 10; /* 添加这一行，确保图标在视频上方 */
    opacity: 0; /* 初始透明度为0 */
    visibility: hidden; /* 初始隐藏 */
}

.icon-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 6.25rem); /* 默认间距100px (6.25rem @ 16px) */
    width: 100%;
    max-width: 500px; /* 限制最大宽度 */
}

/* 图标样式 */
.icon-item {
    width: clamp(3.3rem, 8vw, 4rem); /* 图标大小自适应 */
    height: clamp(3.3rem, 8vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 1.2s ease; /* 单独设置transform过渡 */
}

.icon-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    .icon-wrapper {
        gap: clamp(1rem, 4vw, 1.5rem); /* 小屏幕减小间距 */
    }
    .icon-item {
        width: clamp(2rem, 7vw, 2.5rem); /* 更小的图标 */
        height: clamp(2rem, 7vw, 2.5rem);
    }
}

/* 动画容器样式 */
#animation-container {
    position: absolute;
    pointer-events: none; /* 确保动画不会影响按钮的点击事件 */
    z-index: 100; /* 确保图标动画在最上层 */
}