/* 
 * 自定义样式文件 - 用于添加背景图和其他自定义样式
 * Custom Styles - For adding background images and custom modifications
 * 
 * 使用说明：
 * 1. 将背景图片放入 /wwwroot/tech_ui/imgs/ 文件夹
 * 2. 取消下面相应代码的注释（删除 /* 和 */）
 * 3. 修改图片路径为您的图片文件名
 * 4. 保存文件并刷新页面查看效果
 */

/* ============================================
   方式 1: 使用单张背景图（最简单）
   ============================================ */
/*
.hero-background {
    background-image: url('/tech_ui/imgs/your-background.jpg');
}
*/

/* ============================================
   方式 2: 背景图 + 深色叠加（推荐）
   更好地突出前景内容
   ============================================ */
/*
.hero-background {
    background-image: 
        linear-gradient(135deg, rgba(10, 14, 39, 0.7) 0%, rgba(5, 7, 17, 0.8) 100%),
        url('/tech_ui/imgs/your-background.jpg');
}
*/

/* ============================================
   方式 3: 纯CSS渐变（无需图片）
   适合简洁风格
   ============================================ */
/*
.hero-background {
    background: linear-gradient(135deg, 
        #0a0e27 0%, 
        #1a1f3a 25%, 
        #2a2f4a 50%, 
        #1a1f3a 75%, 
        #0a0e27 100%
    );
}
*/

/* ============================================
   方式 4: 动画渐变背景
   科技感十足的动态效果
   ============================================ */
/*
.hero-background {
    background: linear-gradient(
        -45deg, 
        #0a0e27, 
        #1a1f3a, 
        #2a2f4a, 
        #1a2540
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
*/

/* ============================================
   叠加层透明度调整（可选）
   如果觉得背景太亮或太暗，可以调整这里
   ============================================ */

/* 加深叠加层（背景图太亮时使用） */
/*
.hero-overlay {
    background: linear-gradient(
        135deg, 
        rgba(10, 14, 39, 0.85) 0%, 
        rgba(5, 7, 17, 0.95) 100%
    ) !important;
}
*/

/* 减淡叠加层（背景图太暗时使用） */
/*
.hero-overlay {
    background: linear-gradient(
        135deg, 
        rgba(10, 14, 39, 0.3) 0%, 
        rgba(5, 7, 17, 0.4) 100%
    ) !important;
}
*/

/* 完全移除叠加层 */
/*
.hero-overlay {
    display: none;
}
*/

/* ============================================
   更多示例请查看：
   /wwwroot/tech_ui/css/background-examples.css
   ============================================ */