/**
 * F1 2026 赛季落地页样式
 * 主内容宽度：1200px
 * 响应式适配：21:9 / 16:9 / 16:10
 */

/* ==================== 全局重置 ==================== */

/* 强制移除所有可能的顶部间距 */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
}

body {
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

body.page-template-page-f1-landing,
body.f1-landing-page {
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==================== 基础布局 ==================== */

.f1-landing-wrapper {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow-x: visible; /* 允许水平溢出（发车动画） */
    overflow-y: hidden; /* 禁止垂直滚动 */
    background: #000;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==================== 背景层 ==================== */

.f1-background-container {
    position: fixed;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100vh !important;
    z-index: 2;
    margin: 0 !important;
    padding: 0 !important;
}

.f1-background-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.8s ease-in-out;
}

.f1-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3;
}

/* ==================== 主内容区 ==================== */

.f1-main-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 120px); /* 减去缩略图区域高度 */
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: visible; /* 允许发车动画溢出 */
}

/* ==================== 主标题 ==================== */

.f1-title {
    position: relative;
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out 0.2s forwards;
}

.f1-title img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

/* ==================== 车队图标网格 ==================== */

.f1-teams-grid {
    position: relative;  /* 改回相对定位，放回文档流 */
    display: flex;
    flex-direction: column;
    gap: 50px; /* 上下两排的间距 */
    max-width: 900px;
    width: 100%;
    align-items: center;
    margin: 0 auto 60px;  /* 水平居中，底部留出间距 */
    pointer-events: none; /* 允许点击穿透到背景 */
    overflow: visible; /* 允许发车动画溢出 */
}

/* 上排容器（5个图标） */
.f1-teams-row-top {
    display: flex;
    gap: 35px;  /* 恢复正常间距 */
    justify-content: center;
    overflow: visible; /* 允许发车动画溢出 */
}

/* 下排容器（6个图标） */
.f1-teams-row-bottom {
    display: flex;
    gap: 35px;  /* 恢复正常间距 */
    justify-content: center;
    overflow: visible; /* 允许发车动画溢出 */
}

/* 图标包装容器（包含发车格和图标） */
.team-icon-wrapper {
    position: relative;
    width: 110px;       /* 容器宽度按图标宽度 */
    height: 55px;       /* 容器高度按图标高度 */
    flex-shrink: 0;     /* 防止缩小 */
    z-index: 1;         /* 基础层级 */
    /* Flex 布局让图标居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 发车格背景层 */
.starting-grid-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;       /* 发车格实际宽度 */
    height: 120.5px;    /* 发车格实际高度 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;  /* 在图标下层 */
    opacity: 0.8;  /* 可选：半透明效果 */
    pointer-events: none;  /* 不阻挡点击 */
}

.team-icon {
    position: relative;  /* 改回相对定位，参与 Flexbox 布局 */
    width: 110px;
    height: 55px;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s, filter 0.3s;  /* 添加 filter 过渡 */
    filter: brightness(0.8); /* 默认80%亮度 */
    pointer-events: auto;
    z-index: 1;  /* 在发车格上层 */
    /* 在 wrapper 中居中对齐 */
    margin: auto;  /* 垂直水平居中 */
}

/* 初始动画（由 JavaScript 控制，不再使用 :nth-child 避免 DOM 重排触发） */
.team-icon.initial-animation {
    animation: slideInTeam 0.5s ease-out forwards;
}

/* 已初始化的车辆：保持可见 */
.team-icon.initialized {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

@keyframes slideInTeam {
    from {
        opacity: 0;
        transform: translateX(-100%);  /* 从左边进入 */
    }
    to {
        opacity: 1;
        transform: translateX(0);  /* 到达正常位置 */
    }
}

/* 悬停效果：100%亮度 + 放大10% */
.team-icon:hover {
    filter: brightness(1);  /* 100%亮度 */
    transform: scale(1.1);  /* 放大10% */
}

/* 未更新状态：默认50%亮度 */
.team-icon.disabled {
    cursor: not-allowed;
    filter: brightness(0.5);
}

/* 未更新车队悬停：放大10%，显示覆盖层 */
.team-icon.disabled:hover {
    transform: scale(1.1);  /* 放大10% */
}

/* 覆盖层：默认隐藏 */
.team-icon .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* 未更新车队悉停时显示覆盖层 */
.team-icon.disabled:hover .overlay {
    opacity: 1;
}

.team-icon img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* 覆盖层图片 */
.team-icon .overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



/* 发车动画 */
.team-icon.departing {
    animation: departRight 1s ease-in forwards !important;
    transition: none !important; /* 禁用 transition 避免冲突 */
    opacity: 1 !important; /* 强制保持可见 */
}

/* 准备进入状态：强制设置在屏幕左侧外，无动画 */
.team-icon.ready-to-enter {
    transform: translateX(-1000%) !important;  /* 在屏幕左侧外 */
    opacity: 1 !important;
    transition: none !important;
}

.team-icon.entering {
    animation: enterLeft 1s ease-out forwards !important;
    transition: none !important; /* 禁用 transition 避免冲突 */
    opacity: 1 !important; /* 强制保持可见 */
}

/* 进入动画完成后的最终状态（仅在没有 entering 或 ready-to-enter 类时生效） */
.team-icon.has-departed:not(.entering):not(.ready-to-enter) {
    opacity: 1 !important;
    transform: translateX(0) !important;  /* 正常位置 */
}

@keyframes departRight {
    0% {
        transform: translateX(0);  /* 正常位置 */
        opacity: 1;
    }
    100% {
        transform: translateX(3000px);  /* 向右移出 3000px，确保完全离开屏幕 */
        opacity: 1;
    }
}

@keyframes enterLeft {
    0% {
        transform: translateX(-3000px);  /* 从左边很远处进入 */
        opacity: 1;
    }
    100% {
        transform: translateX(0);  /* 正常位置 */
        opacity: 1;
    }
}

/* ==================== 游戏按钮 ==================== */

.f1-games-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 60px 0 40px;
    flex-wrap: wrap;
}

.game-button {
    position: relative;
    opacity: 0;
    transform: translateY(200%); /* 增加初始位置，从更下方开始 */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 动画延迟 */
.game-button:nth-child(1) { animation: slideUpButton 0.8s ease-out 0.7s forwards; }
.game-button:nth-child(2) { animation: slideUpButton 0.8s ease-out 0.8s forwards; }
.game-button:nth-child(3) { animation: slideUpButton 0.8s ease-out 0.9s forwards; }
.game-button:nth-child(4) { animation: slideUpButton 0.8s ease-out 1s forwards; }

@keyframes slideUpButton {
    from {
        opacity: 0;
        transform: translateY(200%); /* 从更下方上移 */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.game-button img {
    width: 131px;
    height: 216px;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 悉停效果：所有按钮上移 */
.game-button:hover img {
    transform: translateY(-20px);
}

/* 未启用状态：透明度降低 */
.game-button.disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

/* 未启用按钮也可以上移 */
.game-button.disabled:hover img {
    transform: translateY(-20px);
}

/* ==================== 缩略图 ==================== */

.f1-thumbnails {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 100;
}

.thumbnail {
    width: 100px;
    height: 60px;
    background-size: cover;
    background-position: center;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s ease;
    filter: brightness(0.8);
}

.thumbnail:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.8);
}

.thumbnail.active {
    opacity: 1;
    border-color: #ff0000;
    border-width: 4px;
    filter: brightness(1);
}

/* ==================== 响应式适配 ==================== */

/* 21:9 宽屏 (3440x1440) */
@media (min-width: 2560px) {
    .f1-main-content {
        max-width: 1400px;
    }
    
    .f1-teams-grid {
        max-width: 880px;
        gap: 50px;  /* 保持与基础值一致 */
    }
    
    .game-button img {
        width: 150px;
        height: 247px; /* 保持比例 */
    }
}

/* 标准宽屏 (1920x1080) */
@media (max-width: 1920px) {
    .f1-main-content {
        max-width: 1200px;
    }
}

/* 16:10 / 小宽屏 */
@media (max-width: 1600px) {
    .f1-teams-grid {
        max-width: 700px;
        gap: 50px;  /* 保持与基础值一致 */
    }
    
    .game-button img {
        width: 118px;
        height: 194px; /* 保持比例 */
    }
    
    .thumbnail {
        width: 80px;
        height: 50px;
    }
}

/* 笔记本 / 平板横屏 */
@media (max-width: 1366px) {
    .f1-main-content {
        padding: 30px 15px 70px;
    }
    
    .f1-teams-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 500px;
    }
    
    .game-button img {
        width: 105px;
        height: 173px; /* 保持比例 */
    }
}

/* 平板竖屏 / 小屏幕 */
@media (max-width: 1024px) {
    .f1-background-container {
        top: 50px;
    }
    
    .f1-landing-wrapper {
        min-height: calc(100vh - 50px);
    }
    
    .f1-teams-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;  /* 小屏幕略微减少 */
    }
    
    .f1-games-buttons {
        gap: 20px;
    }
    
    .game-button img {
        width: 92px;
        height: 152px; /* 保持比例 */
    }
}

/* 手机横屏 */
@media (max-width: 768px) {
    .f1-main-content {
        padding: 20px 10px 60px;
    }
    
    .f1-title {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    .f1-teams-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;  /* 手机横屏适当减少 */
        margin: 20px auto;
    }
    
    .f1-games-buttons {
        margin: 30px 0 20px;
        gap: 15px;
    }
    
    .game-button img {
        width: 79px;
        height: 130px; /* 保持比例 */
    }
    
    .f1-thumbnails {
        bottom: 15px;
        gap: 8px;
    }
    
    .thumbnail {
        width: 60px;
        height: 40px;
    }
}

/* 手机竖屏 */
@media (max-width: 480px) {
    .f1-teams-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;  /* 手机竖屏进一步减小 */
    }
    
    .f1-games-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .game-button img {
        width: 131px;
        height: 216px; /* 保持原始尺寸 */
    }
    
    .f1-thumbnails {
        flex-wrap: wrap;
        max-width: 90%;
        justify-content: center;
    }
    
    .thumbnail {
        width: 50px;
        height: 35px;
    }
}