/* ============================================
   赛博朋克电竞风 - 横幅区域样式
   
   设计理念：
   全屏视频/图片横幅 + 底部渐变过渡 + 光线扫过动画
   
   本文件包含：
   1. 横幅主容器
   2. 底部渐变过渡（::after）
   3. 扫光动画（::before）
   4. 视频/图片样式
   ============================================ */


/* =====================================================================
   第1部分：横幅主容器
   
   最大宽度1974px居中，margin-top等于导航栏高度避免遮挡。
   overflow:hidden 裁剪超出部分，保持整洁边缘。
   z-index管理：内容层<底部渐变(2)<扫光(3)
   ===================================================================== */
.游戏宣传横幅 {
    width: 100%; max-width: 1974px; margin: 0 auto;
    position: relative; margin-top: var(--nav-height); overflow: hidden;
}


/* =====================================================================
   第2部分：底部渐变过渡（::after伪元素）
   
   在横幅底部叠加150px高的渐变遮罩，
   从页面主背景色渐变到透明，使横幅与下方内容
   自然过渡，不会出现生硬的截断线。
   pointer-events:none 不影响鼠标交互。
   ===================================================================== */
.游戏宣传横幅::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 150px;
    background: linear-gradient(to top, var(--bg-primary), transparent);  /* 底部渐变：主背景色→透明 */
    pointer-events: none; z-index: 2;
}


/* =====================================================================
   第3部分：扫光动画（::before伪元素）
   
   一道半透明光带从左到右扫过横幅，
   宽度50%，使用scanLine关键帧动画（6秒循环）。
   背景为透明→淡蓝→淡紫→透明的渐变。
   z-index:3 确保在底部渐变之上。
   ===================================================================== */
.游戏宣传横幅::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, var(--scan-color-a), var(--scan-color-b), transparent);  /* 扫光渐变 */
    z-index: 3; animation: scanLine 6s ease-in-out infinite; pointer-events: none;
}


/* =====================================================================
   第4部分：视频/图片样式
   
   横幅内的video或img标签：宽度100%自适应，
   height:auto保持原始比例，object-fit:cover铺满容器。
   display:block消除img底部空隙。
   ===================================================================== */
.横幅视频 { width: 100%; height: auto; object-fit: cover; display: block; }