/**
 * 通用Banner背景样式
 * 使用方式：
 * 1. 引入此CSS文件
 * 2. 在banner容器上添加 class="banner-bg" 
 * 3. 添加主题类名定义颜色，如 class="banner-bg theme-blue"
 * 
 * 可用主题：
 * - theme-blue (默认蓝色)
 * - theme-blue-light (浅蓝色)
 * - theme-red (红色-高优先)
 * - theme-orange (橙色-优先)
 * - theme-pink (粉色-关系)
 * - theme-green (绿色)
 * - theme-purple (紫色)
 */

/* ===== 主题颜色变量定义 ===== */
:root {
    /* 蓝色主题 (默认) */
    --banner-color-start: #1e6fff;
    --banner-color-mid: #3d8bff;
    --banner-color-end: #5ba3ff;
    
    /* 纹理透明度 */
    --texture-opacity: 0.08;
}

/* ===== 基础Banner样式 ===== */
.banner-bg {
    position: relative;
    background: 
        /* 1. 底部边缘高光 */
        linear-gradient(0deg, rgba(255,255,255,0.15) 0%, transparent 25%),
        /* 2. 右下角光晕 */
        radial-gradient(ellipse 60% 45% at 85% 95%, rgba(255,255,255,0.25) 0%, transparent 55%),
        /* 3. 左侧柔和光晕 */
        radial-gradient(ellipse 50% 80% at 5% 40%, rgba(255,255,255,0.12) 0%, transparent 50%),
        /* 4. 顶部深色加深 */
        linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 40%),
        /* 5. 左上角深色区域 */
        radial-gradient(ellipse 80% 70% at -10% -5%, rgba(0,0,0,0.25) 0%, transparent 45%),
        /* 6. 斜向丝绸光带 */
        linear-gradient(315deg, 
            transparent 0%,
            rgba(255,255,255,0.04) 20%,
            rgba(255,255,255,0.12) 45%,
            rgba(255,255,255,0.12) 55%,
            rgba(255,255,255,0.04) 80%,
            transparent 100%
        ),
        /* 7. 主渐变 - 多色过渡（翻转） */
        linear-gradient(330deg, 
            var(--banner-color-start) 0%,
            var(--banner-color-start) 15%,
            var(--banner-color-mid) 40%, 
            var(--banner-color-mid) 60%,
            var(--banner-color-end) 85%,
            var(--banner-color-end) 100%
        );
    overflow: hidden;
}

/* ===== 纹理层 - 几何线条 ===== */
.banner-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: var(--texture-opacity);
    background-image: 
        /* 斜线网格 */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 20px,
            rgba(255,255,255,0.5) 20px,
            rgba(255,255,255,0.5) 21px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 20px,
            rgba(255,255,255,0.3) 20px,
            rgba(255,255,255,0.3) 21px
        );
    pointer-events: none;
    z-index: 1;
}

/* ===== 纹理层 - 右上角柔和光晕 ===== */
.banner-bg::after {
    content: '';
    position: absolute;
    top: -110px;
    right: -130px;
    width: 300px;
    height: 280px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}

/* 确保内容在纹理之上 */
.banner-bg > * {
    position: relative;
    z-index: 2;
}

/* ===== 主题颜色预设 ===== */

/* 蓝色主题 (默认) - 深蓝色 */
.banner-bg.theme-blue,
.banner-bg {
    --banner-color-start: #002d80;
    --banner-color-mid: #0052d9;
    --banner-color-end: #2b7de9;
}

/* 浅蓝色主题 */
.banner-bg.theme-blue-light {
    --banner-color-start: #1a6dd9;
    --banner-color-mid: #4087e9;
    --banner-color-end: #6ba8f8;
}

/* 红色主题 - 高优先召回 */
.banner-bg.theme-red {
    --banner-color-start: #991b1b;
    --banner-color-mid: #dc2626;
    --banner-color-end: #ef4444;
}

/* 橙色主题 - 优先召回 */
.banner-bg.theme-orange {
    --banner-color-start: #9a3412;
    --banner-color-mid: #ea580c;
    --banner-color-end: #f97316;
}

/* 粉色主题 - 关系构建 */
.banner-bg.theme-pink {
    --banner-color-start: #9d174d;
    --banner-color-mid: #db2777;
    --banner-color-end: #ec4899;
}

/* 绿色主题 */
.banner-bg.theme-green {
    --banner-color-start: #00796b;
    --banner-color-mid: #00a870;
    --banner-color-end: #4cd964;
}

/* 紫色主题 */
.banner-bg.theme-purple {
    --banner-color-start: #7b1fa2;
    --banner-color-mid: #9c27b0;
    --banner-color-end: #ba68c8;
}

/* 青绿色主题 - 客户回访 */
.banner-bg.theme-teal {
    --banner-color-start: #0f766e;
    --banner-color-mid: #14b8a6;
    --banner-color-end: #2dd4bf;
}

/* 黑金主题 - 客户详情 */
.banner-bg.theme-dark-gold {
    --banner-color-start: #1a1a1a;
    --banner-color-mid: #2a2520;
    --banner-color-end: #1f1c18;
    --texture-opacity: 0.06;
}
.banner-bg.theme-dark-gold::after {
    bottom: 0px;
    right: 0px;
    width: 500px;
    height: 500px;
    background: 
        radial-gradient(ellipse at 60% 70%, rgba(255, 196, 0, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, transparent 0%, rgba(255, 187, 0, 0.15) 30%, rgba(255, 183, 0, 0.2) 60%, transparent 100%);
}

/* 珊瑚粉主题 - 助教详情 */
.banner-bg.theme-coral {
    --banner-color-start: #be4a62;
    --banner-color-mid: #d4617a;
    --banner-color-end: #e8899a;
}

/* ===== 纹理变体 ===== */


/* 艺术波浪纹理 */
.banner-bg.texture-artistic::before {
    background-image: 
        /* 全局柔和渐变 */
        linear-gradient(120deg, 
            rgba(255,255,255,0.15) 0%, 
            transparent 40%,
            rgba(255,255,255,0.05) 70%, 
            rgba(255,255,255,0.12) 100%
        ),
        /* 多层流动曲线 */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M-20 80 Q30 40 80 80 T180 80 T280 80' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.5'/%3E%3Cpath d='M-20 120 Q40 160 100 120 T220 120' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3Cpath d='M-20 160 Q50 130 110 160 T240 160' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 100% 100%, 200px 150px;
    opacity: 1;
}

/* 丝绸流线纹理 */
.banner-bg.texture-silk::before {
    background-image: 
        /* 丝绸光泽渐变 */
        linear-gradient(135deg, 
            rgba(255,255,255,0.18) 0%, 
            transparent 25%,
            rgba(255,255,255,0.06) 50%,
            transparent 75%, 
            rgba(255,255,255,0.1) 100%
        ),
        /* 优雅的贝塞尔曲线 */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cpath d='M0 100 C50 50, 100 150, 150 100 S250 50, 300 100' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='2'/%3E%3Cpath d='M0 140 C60 90, 120 190, 180 140 S280 90, 340 140' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.5'/%3E%3Cpath d='M0 60 C40 30, 90 90, 140 60 S220 30, 280 60' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 100% 100%, 280px 180px;
    opacity: 1;
}

/* Windows 11 Bloom 风格 - 流动丝带效果 */
.banner-bg.texture-aurora::before {
    background-image: 
        /* 流动丝带 SVG */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='ribbon1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='rgba(255,255,255,0.4)'/%3E%3Cstop offset='50%25' stop-color='rgba(255,255,255,0.15)'/%3E%3Cstop offset='100%25' stop-color='rgba(255,255,255,0.3)'/%3E%3C/linearGradient%3E%3ClinearGradient id='ribbon2' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='rgba(0,0,0,0.15)'/%3E%3Cstop offset='50%25' stop-color='rgba(255,255,255,0.2)'/%3E%3Cstop offset='100%25' stop-color='rgba(0,0,0,0.1)'/%3E%3C/linearGradient%3E%3ClinearGradient id='ribbon3' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='rgba(255,255,255,0)'/%3E%3Cstop offset='30%25' stop-color='rgba(255,255,255,0.35)'/%3E%3Cstop offset='70%25' stop-color='rgba(255,255,255,0.35)'/%3E%3Cstop offset='100%25' stop-color='rgba(255,255,255,0)'/%3E%3C/linearGradient%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3C!-- 底层丝带 --%3E%3Cpath d='M-50 180 Q80 100 180 140 T350 100 T500 140' fill='none' stroke='url(%23ribbon2)' stroke-width='60' stroke-linecap='round' filter='url(%23blur)'/%3E%3C!-- 中层丝带 --%3E%3Cpath d='M-30 50 Q100 120 200 70 T380 110 T520 60' fill='none' stroke='url(%23ribbon1)' stroke-width='45' stroke-linecap='round'/%3E%3C!-- 顶层高光丝带 --%3E%3Cpath d='M0 120 Q120 60 220 100 T420 70' fill='none' stroke='url(%23ribbon3)' stroke-width='25' stroke-linecap='round'/%3E%3C!-- 光影细节 --%3E%3Cpath d='M50 90 Q150 150 280 90 T450 120' fill='none' stroke='rgba(255,255,255,0.25)' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 480px 160px;
    background-position: center 40px;
    background-repeat: no-repeat;
    opacity: 0.5;
}

/* 流线纹理 */
.banner-bg.texture-flow::before {
    background-image: 
        repeating-linear-gradient(
            120deg,
            transparent,
            transparent 40px,
            rgba(255,255,255,0.08) 40px,
            rgba(255,255,255,0.08) 80px
        );
    opacity: 1;
}

/* 简约纹理 - 只有光晕无线条 */
.banner-bg.texture-minimal::before {
    background: none;
}

/* ===== 动画效果（可选） ===== */
.banner-bg.animated::before {
    animation: texture-shift 20s linear infinite;
}

@keyframes texture-shift {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 40px 40px, -40px -40px;
    }
}