/* =========================================================
   极垣车队 POLARVEX · 加入车队（Aurora 式左右分栏）
   ========================================================= */
body.join-body{
    display:block;
    min-height:100dvh;
    background:#000;
    letter-spacing:-.01em;
}

.join-screen{
    display:flex;
    width:100%;
    min-height:100dvh;
    background:#000;
    padding:8px;
}

/* ---------------- 左栏：视频面板 ---------------- */
.join-hero{display:none}

@media (min-width:1024px){
    .join-screen{height:100dvh;overflow:hidden;padding:16px}

    .join-hero{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-end;
        width:52%;
        height:100%;
        padding:0 48px 118px;
        border-radius:24px;
        overflow:hidden;
        background:#0a0a0a;
        box-shadow:0 25px 50px -12px rgba(0,0,0,.55);
    }
}

.join-hero video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.join-hero-inner{
    position:relative;
    z-index:10;
    display:flex;
    flex-direction:column;
    gap:30px;
    width:100%;
    max-width:322px;
}

.join-brand{display:flex;align-items:center;gap:10px}
.join-brand img{width:26px;height:26px;object-fit:contain;border-radius:6px}
.join-brand .mark{width:22px;height:17px;fill:#fff;flex:none}
.join-brand span{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.join-brand span em{
    display:block;font-family:var(--font-serif);font-style:italic;font-size:11px;
    font-weight:400;letter-spacing:.22em;color:rgba(255,255,255,.55);margin-top:3px;
}

.join-hero h1{
    font-size:36px;
    font-weight:500;
    line-height:1.16;
    letter-spacing:-.025em;
    white-space:nowrap;
    text-shadow:0 1px 3px rgba(0,0,0,.72),0 2px 30px rgba(0,0,0,.88);
}
.join-hero .hero-desc{
    margin-top:10px;
    padding:0 16px;
    font-size:14px;
    line-height:1.75;
    color:rgba(255,255,255,.8);
    text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 16px rgba(0,0,0,.72);
}

.join-steps{display:flex;flex-direction:column;gap:10px;list-style:none}
.step{
    display:flex;align-items:center;gap:14px;
    padding:11px 16px;border-radius:12px;
    background:#1a1a1a;color:#fff;font-size:14px;line-height:1.4;
}
.step .num{
    display:flex;align-items:center;justify-content:center;
    width:26px;height:26px;flex:none;border-radius:50%;
    font-size:12px;font-weight:500;
    background:rgba(255,255,255,.1);color:rgba(255,255,255,.4);
}
.step.active{background:#fff;color:#000;border:1px solid #fff}
.step.active .num{background:#000;color:#fff}

/* ---------------- 右栏：表单 ---------------- */
.join-form-col{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:44px 16px;
}
@media (min-width:640px){.join-form-col{padding:48px 48px}}
@media (min-width:1024px){.join-form-col{padding:24px 56px;overflow-y:auto}}
@media (min-width:1280px){.join-form-col{padding:24px 92px}}

.join-form-inner{
    width:100%;
    max-width:576px;
    margin:auto 0;
}
.join-form-inner > * + *{margin-top:26px}

.join-mobile-brand{display:flex;align-items:center;gap:10px}
.join-mobile-brand .mark{width:21px;height:16px;fill:#fff;flex:none}
.join-mobile-brand img{width:24px;height:24px;object-fit:contain;border-radius:6px}
.join-mobile-brand span{font-size:16px;font-weight:600;letter-spacing:-.01em}
@media (min-width:1024px){.join-mobile-brand{display:none}}

.join-head h2{font-size:30px;font-weight:500;line-height:1.22;letter-spacing:-.025em}
.join-head p{margin-top:10px;font-size:14px;color:rgba(255,255,255,.42);line-height:1.7}

.join-alt{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.alt-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    height:48px;padding:0 14px;
    background:#000;border:1px solid rgba(255,255,255,.1);border-radius:12px;
    color:#fff;font-size:13.5px;
    transition:background .3s var(--ease),border-color .3s var(--ease);
}
.alt-btn svg{flex:none;opacity:.65}
.alt-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}

.join-divider{
    display:flex;align-items:center;
    font-size:12px;font-weight:500;letter-spacing:.24em;
    color:rgba(255,255,255,.38);text-transform:uppercase;
}
.join-divider::before,.join-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}
.join-divider span{padding:0 16px;background:#000}

/* 表单字段 */
.ig{margin-bottom:18px}
.ig:last-child{margin-bottom:0}
.ig label{display:block;margin-bottom:10px;font-size:14px;font-weight:500;color:#fff}
.ig input{
    width:100%;height:44px;padding:0 16px;
    background:#1a1a1a;border:none;border-radius:12px;
    color:#fff;font-family:inherit;font-size:14px;line-height:1;
    transition:box-shadow .25s var(--ease);
}
.ig input::placeholder{color:rgba(255,255,255,.2)}
.ig input:focus{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.ig .help{margin-top:10px;font-size:12px;color:rgba(255,255,255,.35);line-height:1.6}

.join-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.join-grid2 .ig{margin-bottom:0}
@media (max-width:520px){.join-grid2{grid-template-columns:1fr}}

.game-seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.game-seg input{position:absolute;opacity:0;pointer-events:none}
.game-seg label{
    display:flex;align-items:center;justify-content:center;text-align:center;
    height:48px;padding:0 10px;
    background:#1a1a1a;border:1px solid transparent;border-radius:12px;
    color:rgba(255,255,255,.6);font-size:13px;cursor:pointer;
    transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.game-seg label:hover{background:#222}
.game-seg input:checked + label{background:#fff;color:#000;border-color:#fff;font-weight:500}
.game-seg input:focus-visible + label{box-shadow:0 0 0 2px rgba(255,255,255,.25)}
@media (max-width:560px){.game-seg{grid-template-columns:1fr}}

.join-submit{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;height:56px;
    background:#fff;border:none;border-radius:12px;
    color:#000;font-family:inherit;font-size:15px;font-weight:600;
    cursor:pointer;
    transition:background .25s var(--ease),transform .15s var(--ease);
}
.join-submit:hover{background:rgba(255,255,255,.9)}
.join-submit:active{transform:scale(.98)}

.join-foot{margin-top:8px;text-align:center;font-size:13.5px;color:rgba(255,255,255,.42)}
.join-foot a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .25s var(--ease)}
.join-foot a:hover{border-color:#fff}

/* 提示条在深色分栏中的观感 */
body.join-body .flash{margin-top:26px}

/* ---------------- 视频淡入 ----------------
   仅对视频本身做轻微压光（不是覆层遮罩），保证白色文案在亮部也可读 */
.join-hero video{
    opacity:0;
    filter:brightness(.86) contrast(1.03);
    transition:opacity 1.2s var(--ease);
}
.join-hero.is-ready video{opacity:1}

/* ---------------- 分段入场动画 ---------------- */
@media (prefers-reduced-motion:no-preference){
    @keyframes jUp{
        from{opacity:0;transform:translateY(18px)}
        to{opacity:1;transform:none}
    }

    /* 左栏：品牌 → 标题 → 三个步骤依次出现 */
    .join-hero-inner > .join-brand,
    .join-hero-inner > div,
    .join-steps > li,
    /* 右栏：各区块依次出现 */
    .join-mobile-brand,
    .join-head,
    .join-alt,
    .join-divider,
    .join-form-inner .flash,
    .join-foot,
    /* 表单字段逐一出现 */
    .join-form-inner form > *{
        opacity:0;
        animation:jUp .78s var(--ease) both;
    }

    .join-hero-inner > .join-brand{animation-delay:.16s}
    .join-hero-inner > div{animation-delay:.30s}
    .join-steps > li:nth-child(1){animation-delay:.50s}
    .join-steps > li:nth-child(2){animation-delay:.62s}
    .join-steps > li:nth-child(3){animation-delay:.74s}

    .join-mobile-brand{animation-delay:.10s}
    .join-head{animation-delay:.22s}
    .join-alt{animation-delay:.34s}
    .join-divider{animation-delay:.46s}
    .join-form-inner .flash{animation-delay:.52s}
    .join-foot{animation-delay:.88s}

    .join-form-inner form > :nth-child(1){animation-delay:.54s}
    .join-form-inner form > :nth-child(2){animation-delay:.60s}
    .join-form-inner form > :nth-child(3){animation-delay:.66s}
    .join-form-inner form > :nth-child(4){animation-delay:.72s}
    .join-form-inner form > :nth-child(5){animation-delay:.78s}
    .join-form-inner form > :nth-child(6){animation-delay:.84s}
}