/* ============================================================
 * user_auth_hero.css — 认证页主框架（PC 端）
 * ------------------------------------------------------------
 * 适用页面：body.auth-login-password / body.auth-register / body.auth-forget
 * 内容：背景图(00a.jpg 左对齐·高度自适应) + 顶部横幅 + 左侧品牌文案 + 二维光效
 * 登录卡片 / 注册卡片 / 找回卡片完全保留 user_auth.css 原有样式。
 * 手机端(<769px)隐藏本框架，保留原认证页布局。
 * ============================================================ */

@media (min-width: 769px) {

    /* ---------- 共享作用域 ---------- */
    body.auth-login-password,
    body.auth-register,
    body.auth-forget {
        background: #f6f9fd;
    }

    /* 隐藏原顶部蓝条横幅、原左背景层，主区透明（背景改由 .auth-hero-bg 承担） */
    body.auth-login-password .top-banner,
    body.auth-register .top-banner,
    body.auth-forget .top-banner { display: none; }

    body.auth-login-password .main-content::before,
    body.auth-register .main-content::before,
    body.auth-forget .main-content::before { display: none; }

    body.auth-login-password .main-content,
    body.auth-register .main-content,
    body.auth-forget .main-content { background: transparent; }

    /* 卡片靠右（与定稿预览一致） */
    body.auth-login-password .main-content,
    body.auth-register .main-content,
    body.auth-forget .main-content { padding-right: 6.5%; }

    /* ---------- 背景图：左对齐 · 高度自适应 ---------- */
    .auth-hero-bg {
        position: fixed; left: 0; top: 0; bottom: 0;
        width: 77.4vh; min-width: 460px;
        z-index: 0; pointer-events: none;
        background: url('/static/images/00a.jpg') no-repeat left center;
        background-size: auto 100%;
    }
    /* 底部加深渐变，增加立体感 */
    .auth-hero-bg::before {
        content: ''; position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(4,30,60,.14) 0%, rgba(4,30,60,0) 26%, rgba(4,30,60,.12) 76%, rgba(4,30,60,.30) 100%);
        pointer-events: none;
    }

    /* ---------- 二维光效：光晕 + 浮动光点 ---------- */
    .auth-hero-fx { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
    .auth-hero-fx .fx-glow-a {
        position: absolute; left: -140px; bottom: -160px; width: 560px; height: 560px; border-radius: 50%;
        background: radial-gradient(circle, rgba(58,130,204,.38), rgba(58,130,204,0) 70%);
        animation: auth-fx-pulse 6s ease-in-out infinite;
    }
    .auth-hero-fx .fx-glow-b {
        position: absolute; left: 38%; top: -120px; width: 420px; height: 420px; border-radius: 50%;
        background: radial-gradient(circle, rgba(127,179,232,.28), rgba(127,179,232,0) 70%);
        animation: auth-fx-pulse 7.5s ease-in-out infinite reverse;
    }
    @keyframes auth-fx-pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
    .auth-hero-fx .fx-dot {
        position: absolute; border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
        opacity: .5;
    }
    .auth-hero-fx .fx-dot--1 { width: 10px; height: 10px; left: 22%; top: 26%; animation: auth-fx-float1 8s ease-in-out infinite; }
    .auth-hero-fx .fx-dot--2 { width: 6px; height: 6px; left: 34%; top: 58%; animation: auth-fx-float2 9s ease-in-out infinite 1s; }
    .auth-hero-fx .fx-dot--3 { width: 8px; height: 8px; left: 14%; top: 74%; animation: auth-fx-float1 10s ease-in-out infinite 2s; }
    .auth-hero-fx .fx-dot--4 { width: 5px; height: 5px; left: 46%; top: 36%; animation: auth-fx-float2 7s ease-in-out infinite .6s; }
    @keyframes auth-fx-float1 { 0%,100% { transform: translate(0,0); opacity: .35; } 25% { opacity: .7; } 50% { transform: translate(26px,-18px); opacity: .5; } 75% { opacity: .7; } }
    @keyframes auth-fx-float2 { 0%,100% { transform: translate(0,0); opacity: .3; } 50% { transform: translate(-20px,22px); opacity: .6; } }

    /* ---------- 顶部横幅（替代原 top-banner） ---------- */
    .auth-hero-brand {
        position: fixed; left: 0; top: 0; right: 0; z-index: 3;
        display: flex; align-items: center; gap: 14px;
        padding: 26px 40px;
    }
    .auth-hero-brand img {
        height: 46px; width: auto; display: block;
        filter: drop-shadow(0 3px 10px rgba(0,40,90,.35));
        animation: auth-logo-float 3.2s ease-in-out infinite;
    }
    @keyframes auth-logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
    .auth-hero-slogan {
        color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 3px;
        text-shadow: 0 2px 8px rgba(0,30,70,.6);
    }

    /* ---------- 左侧品牌文案（1281px+ 展示，避免与卡片重叠） ---------- */
    .auth-hero-brand,
    .auth-hero-claim {
        font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    }
    .auth-hero-claim {
        position: fixed; left: 0; top: 0; bottom: 0;
        width: 60vh; min-width: 380px;
        z-index: 2; display: flex; flex-direction: column; justify-content: flex-start;
        padding: 172px 44px 0; pointer-events: none; color: #fff;
    }
    .auth-hero-claim h1 {
        font-size: 34px; font-weight: 800; letter-spacing: 1px; line-height: 1.4;
        text-shadow: 0 3px 14px rgba(0,30,70,.55);
    }
    .auth-hero-claim-sub {
        font-size: 18px; margin-top: 10px; color: rgba(255,255,255,.94);
        letter-spacing: 2px; text-shadow: 0 2px 10px rgba(0,30,70,.5);
    }
    .auth-hero-claim-list { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
    .auth-hero-claim-item {
        display: flex; align-items: center; gap: 14px;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.24);
        border-radius: 12px; padding: 13px 18px;
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        box-shadow: 0 6px 18px rgba(4,30,60,.18);
    }
    .auth-hero-claim-num {
        width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, #3a82cc, #2867b0);
        font-size: 15px; font-weight: 800;
    }
    .auth-hero-claim-item b {
        display: block; font-size: 15px; font-weight: 600; letter-spacing: 1px; color: #fff;
        text-shadow: 0 1px 6px rgba(0,30,70,.35);
    }
    .auth-hero-claim-item p {
        font-size: 12.5px; color: rgba(255,255,255,.78); margin-top: 4px; line-height: 1.75; letter-spacing: .4px;
    }
}

/* ---------- 手机端：隐藏主框架，保留原认证页布局 ---------- */
@media (max-width: 768px) {
    .auth-hero-bg,
    .auth-hero-fx,
    .auth-hero-brand,
    .auth-hero-claim { display: none !important; }
}