/* ============================================
   赛博朋克电竞风 - 快捷卡片样式
   
   设计理念：
   玻璃态 + 霓虹边框 + 悬浮发光
   卡片悬浮时上移8px + 蓝光投影，营造浮起感。
   
   本文件包含：
   1. 卡片行容器（.网页快捷卡片）
   2. 单个快捷卡片（.快捷卡片）
   3. 卡片顶部流光条（::before）
   4. 卡片图片区（.快捷图片）
   5. 卡片名称与说明文字
   6. 登录按钮
   7. 响应式适配（768px/480px）
   ============================================ */


/* =====================================================================
   第1部分：卡片行容器
   
   Flex布局居中排列，gap:24px卡片间距。
   margin:-180px 使卡片上移覆盖横幅底部，
   配合z-index:5确保在横幅渐变层之上。
   max-width:100% + padding:0 20px 防止小屏溢出。
   flex-wrap:wrap 允许卡片换行。
   ===================================================================== */
.网页快捷卡片 {
    display: flex; justify-content: center; gap: 24px;
    margin: -180px auto 0; width: 1200px; max-width: 100%;
    position: relative; z-index: 5; box-sizing: border-box;
    padding: 0 20px; flex-wrap: wrap;
}


/* =====================================================================
   第2部分：单个快捷卡片
   
   暗色玻璃态卡片，16px圆角，霓虹蓝半透明边框。
   固定宽285px/高296px，flex弹性适配。
   纵向flex布局：图片区(flex-shrink:0) + 名称 + 说明 + 按钮。
   overflow:hidden 裁剪悬浮时顶部流光条溢出。
   cursor:pointer 整卡可点击。
   transition使用cubic-bezier弹性曲线。
   ===================================================================== */
.快捷卡片 {
    background: var(--bg-card); border-radius: 16px;          /* 暗色背景+大圆角 */
    border: 1px solid var(--border-dim);                       /* 霓虹蓝半透明边框 */
    box-shadow: var(--card-shadow);                             /* 默认卡片阴影 */
    width: 285px; min-width: 240px; flex: 1 1 240px; max-width: 285px;
    height: 296px; text-align: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column; flex-shrink: 0;
    cursor: pointer; text-decoration: none;
    position: relative; overflow: hidden;
}


/* =====================================================================
   第3部分：卡片顶部流光条（::before伪元素）
   
   卡片顶部2px高的蓝紫渐变条，默认opacity:0隐藏。
   背景尺寸200%配合borderFlow动画实现流光效果。
   悬浮时opacity:1显示，3秒循环。
   ===================================================================== */
.快捷卡片::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 2px; background: var(--gradient-main);              /* 主蓝紫渐变 */
    background-size: 200% 100%; animation: borderFlow 3s linear infinite;
    opacity: 0; transition: opacity 0.4s ease;
}

.快捷卡片:hover::before { opacity: 1; }

/* 强制卡片内所有元素无下划线 */
.快捷卡片, .快捷卡片 * { text-decoration: none !important; }


/* =====================================================================
   卡片悬浮效果
   
   - 上移8px（translateY(-8px)）
   - 边框变亮（border-dim→border-glow）
   - 添加霓虹蓝发光+深层阴影
   - 背景略微变亮
   ===================================================================== */
.快捷卡片:hover {
    transform: translateY(-8px); border-color: var(--border-glow);
    box-shadow: var(--glow-blue), var(--hover-shadow);
    background: var(--bg-card-hover);
}


/* =====================================================================
   第4部分：卡片图片区
   
   极淡蓝背景，12px圆角，固定高度180px。
   内部img绝对定位居中，最大90%宽高，
   object-fit:contain 保持图片原始比例不裁剪。
   悬浮时图片微放大8%。
   ===================================================================== */
.快捷图片 {
    background: var(--bg-subtle); margin: 12px; border-radius: 12px;   /* 极淡蓝背景+圆角 */
    overflow: hidden; width: calc(100% - 24px); height: 180px;
    flex-shrink: 0; position: relative;
    border: 1px solid var(--border-subtle);                             /* 极淡边框 */
}

.快捷图片 img {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);           /* 绝对居中 */
    width: auto; height: auto; max-width: 90%; max-height: 90%;
    object-fit: contain; transition: transform 0.4s ease; cursor: pointer;
}

.快捷图片 img:hover { transform: translate(-50%, -50%) scale(1.08); }  /* 悬浮微放大8% */


/* =====================================================================
   第5部分：卡片名称与说明文字
   
   名称：14px加粗，主文字色，1px字间距
   说明：12px，弱化文字色
   ===================================================================== */
.快捷名称 { font-size: 14px; font-weight: 700; margin: 6px 0 2px; color: var(--text-primary); letter-spacing: 1px; }
.快捷说明 { font-size: 12px; color: var(--text-muted); margin: 2px 0; }


/* =====================================================================
   第6部分：登录按钮
   
   蓝紫渐变背景 + 200%宽度配合borderFlow流光动画。
   极深黑文字色（在亮色渐变背景上高对比度）。
   20px胶囊圆角，200×38px尺寸，居中显示。
   悬浮时添加霓虹发光 + 微放大3%。
   ===================================================================== */
.登录按钮 {
    background: var(--gradient-main); background-size: 200% 100%;    /* 主蓝紫渐变+流光 */
    animation: borderFlow 3s linear infinite;
    color: var(--btn-primary-text); border: none; padding: 0; border-radius: 20px;  /* 极深黑文字+胶囊圆角 */
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: all 0.3s ease; width: 200px; height: 38px;
    margin: 6px auto 0; line-height: 38px; display: block;
    text-align: center; letter-spacing: 2px;
}

.登录按钮:hover {
    box-shadow: var(--btn-glow);    /* 悬浮霓虹发光 */
    transform: scale(1.03);          /* 悬浮微放大3% */
}


/* =====================================================================
   第7部分：响应式适配
   
   768px以下：卡片两列，margin上移减少到-100px
   480px以下：卡片单列铺满
   ===================================================================== */
@media (max-width: 768px) {
    .网页快捷卡片 { margin: -100px auto 0; gap: 16px; }
    .快捷卡片 { flex: 1 1 calc(50% - 12px); max-width: calc(50% - 12px); height: auto; min-height: 260px; }
}
@media (max-width: 480px) {
    .快捷卡片 { flex: 1 1 100%; max-width: 100%; }
}