/* 无限精力部分 - 网络星座布局 */
.energy {
    background: linear-gradient(180deg, #0a1730 0%, #0d2144 55%, #0a1a38 100%);
    padding: 90px 0 110px;
    position: relative;
    overflow: hidden;
}

.energy .container { position: relative; z-index: 2; }
.energy .section-title { position: relative; z-index: 3; font-size: 50px; }
@media (min-width: 1101px) {
    .energy .section-title { white-space: nowrap; }
}

/* 舞台容器 - 连接线网络作为居中背景 */
.energy-layout {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 860px;
    margin: 50px auto 0;
    background: url('../img/5.匹配/5_02.webp') center / 100% 86% no-repeat;
}

/* 卡片层 - 铺满舞台，作为绝对定位基准 */
.energy-cards {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* 中心 AI 面试官 */
.center-video {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    aspect-ratio: 16 / 10.5;
    border-radius: 18px;
    overflow: hidden;
    border: 3px solid rgba(120, 170, 255, 0.9);
    box-shadow:
        0 0 50px rgba(74, 125, 255, 0.75),
        0 0 110px rgba(74, 125, 255, 0.4),
        0 20px 60px rgba(0, 0, 0, 0.55);
    background: #000;
    z-index: 5;
}
.main-gif { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 候选人卡片 - 绝对定位错落分布 */
.candidate-card {
    position: absolute;
    width: 132px;
    aspect-ratio: 720 / 1178;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    z-index: 4;
    background: url('../img/5.匹配/8.webp') center / 100% 100% no-repeat;
    filter: drop-shadow(0 0 10px rgba(74, 125, 255, 0.45));
    animation: cardFloat 6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
    transition: filter 0.3s ease;
}
.candidate-card:hover {
    filter: drop-shadow(0 0 22px rgba(120, 180, 255, 0.95));
}
@keyframes cardFloat {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 10px)); }
}
.candidate-card:hover { z-index: 20; }

/* 视频放进上部圆角框；裁掉视频自带白边 */
.card-frame {
    position: absolute;
    top: 4.8%;
    left: 7%;
    right: 7%;
    height: 75.5%;
    overflow: hidden;
    border-radius: 14px;
}
.card-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 视频已在源文件裁掉白边（cropped/），仅需轻微放大消除 1-4px 残边 */
    transform: scale(1.02);
    z-index: 1;
}

/* 岗位文字放进下部蓝色横幅内 */
.card-label {
    position: absolute;
    bottom: 3%;
    left: 12%;
    right: 12%;
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 9px;
    line-height: 1.1;
    color: #ffffff;
    font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(30, 90, 200, 0.8);
}

/* ===== 卡片坐标：左侧 8 张（中间正下方留空） ===== */
.candidate-card:nth-of-type(1) { --x: 6%;  --y: 22%; --d: 0s; }
.candidate-card:nth-of-type(2) { --x: 6%;  --y: 52%; --d: .6s; }
.candidate-card:nth-of-type(3) { --x: 6%;  --y: 82%; --d: 1.2s; }
.candidate-card:nth-of-type(4) { --x: 22%; --y: 30%; --d: .3s; }
.candidate-card:nth-of-type(5) { --x: 22%; --y: 60%; --d: .9s; }
.candidate-card:nth-of-type(6) { --x: 22%; --y: 84%; --d: 1.5s; }
.candidate-card:nth-of-type(7) { --x: 34%; --y: 20%; --d: .45s; }
.candidate-card:nth-of-type(8) { --x: 34%; --y: 80%; --d: 1.7s; }
/* ===== 右侧 7 张 ===== */
.candidate-card:nth-of-type(9)  { --x: 66%; --y: 20%; --d: .2s; }
.candidate-card:nth-of-type(10) { --x: 66%; --y: 80%; --d: 1.4s; }
.candidate-card:nth-of-type(11) { --x: 78%; --y: 32%; --d: .5s; }
.candidate-card:nth-of-type(12) { --x: 78%; --y: 62%; --d: 1.1s; }
.candidate-card:nth-of-type(13) { --x: 94%; --y: 22%; --d: .35s; }
.candidate-card:nth-of-type(14) { --x: 94%; --y: 52%; --d: .95s; }
.candidate-card:nth-of-type(15) { --x: 94%; --y: 82%; --d: 1.6s; }

/* ===== 响应式 ===== */
@media (max-width: 1100px) {
    .energy-layout { height: auto; display: flex; flex-wrap: wrap;
        justify-content: center; gap: 24px; background: none; }
    .energy-cards { position: static; display: contents; }
    .center-video { position: relative; left: auto; top: auto;
        transform: none; width: 100%; max-width: 560px; order: -1; }
    .candidate-card { position: relative; left: auto; top: auto;
        transform: none; width: 140px; animation: none; }
    .candidate-card:hover { transform: scale(1.06); }
}
@media (max-width: 480px) {
    .candidate-card { width: 44%; }
}