/* ============================================================
 * 红豆商城 · 入口导航页 —— 与商城同一套设计令牌
 * 「樱雪琉璃 · Glass Sakura」 v35
 *
 * 背景为纯 CSS 三层柔光（樱粉 / 雾紫 / 冰青），不依赖任何图片，
 * 零加载成本且不会因拉伸失真。品牌区为吉祥物 + 标题 + 保障标签，
 * 入口为两列毛玻璃卡片网格。
 * ============================================================ */
:root {
    --paper:      #FBF9FE;
    --surface:    rgba(255, 255, 255, .72);
    --surface-2:  rgba(255, 255, 255, .55);
    --ink:        #2B2438;
    --ink-2:      #5B5170;
    --ink-3:      #8B82A3;
    --line:       rgba(255, 255, 255, .85);
    --line-2:     rgba(167, 139, 250, .18);
    --accent:     #FF6FA5;
    --accent-2:   #A78BFA;
    --accent-3:   #67E8F9;
    --accent-ink: #E0407F;
    --accent-soft:rgba(255, 111, 165, .12);
    --grad-cta:   linear-gradient(100deg, #FF6FA5 0%, #A78BFA 100%);
    --halo-pink:  rgba(255, 143, 178, .28);
    --halo-violet:rgba(167, 139, 250, .28);
    --halo-cyan:  rgba(103, 232, 249, .22);
    --glass-bg:   rgba(255, 255, 255, .68);
    --glass-filter: saturate(140%) blur(20px);
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 26px;
    --sh-1: 0 1px 2px rgba(120, 100, 170, .06), 0 2px 6px rgba(120, 100, 170, .05);
    --sh-2: 0 6px 22px rgba(120, 100, 170, .10), 0 1px 3px rgba(120, 100, 170, .06);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur: .18s;
    --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
                 "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: 15px; line-height: 1.55;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 18% -6%,  var(--halo-pink)   0, transparent 55%),
        radial-gradient(circle at 88% 6%,   var(--halo-violet) 0, transparent 55%),
        radial-gradient(circle at 50% 104%, var(--halo-cyan)   0, transparent 60%),
        radial-gradient(rgba(120, 100, 170, .045) 1px, transparent 1px);
    background-size: auto, auto, auto, 22px 22px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-position: center, center, center, center;
    background-attachment: fixed, fixed, fixed, scroll;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

.container {
    position: relative; z-index: 1;
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(28px, 5vh, 48px) 20px 28px;
    display: flex; flex-direction: column; align-items: center;
}

/* ===== 品牌区 ===== */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; }

.hero-mascot {
    position: relative;
    width: 116px; height: 116px;
    margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center;
    /* 身后的朱砂色圆盘，让吉祥物从纸面里"跳"出来 */
}
.hero-mascot::before {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%,
        var(--accent-soft) 0%, #F6E3DF 58%, rgba(246, 227, 223, 0) 74%);
}
.hero-mascot::after {
    content: "";
    position: absolute; left: 50%; bottom: 2px;
    width: 86px; height: 12px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(22, 24, 29, .07);
    filter: blur(2px);
}
.avatar {
    position: relative; z-index: 1;
    width: 102px; height: 102px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(168, 42, 34, .16));
    animation: floaty 3.6s ease-in-out infinite;
}
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.site-title {
    font-size: 25px; font-weight: 700; letter-spacing: -.015em; color: var(--ink);
}
.site-subtitle {
    margin-top: 5px; font-size: 13.5px; color: var(--ink-3);
}

/* ===== 保障标签 ===== */
.trust-row {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    margin-top: 12px; margin-bottom: 20px;
}
.trust-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    font-size: 12.5px; font-weight: 500; color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--sh-1);
}
.trust-chip svg { width: 13px; height: 13px; color: var(--accent); }

/* ===== 活动横幅 ===== */
.promo-banner {
    --promo-color: #D98A0B;
    width: 100%;
    display: flex; align-items: center; gap: 11px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--promo-color) 9%, #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--promo-color) 30%, #E6E2DC);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-1);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.promo-banner:hover {
    border-color: var(--promo-color);
    box-shadow: var(--sh-2);
    transform: translateY(-1px);
}
.promo-banner .link-icon {
    box-shadow: 0 7px 16px color-mix(in srgb, var(--promo-color) 26%, transparent);
}
.promo-title {
    font-size: 15.5px; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.promo-banner .link-arrow {
    position: static; flex-shrink: 0; margin-left: auto;
    width: 17px; height: 17px;
    color: color-mix(in srgb, var(--promo-color) 70%, #858B95);
}

/* ===== 入口卡片网格（v48：琉璃导航卡 · 重设计） =====
 * 用 flex-wrap 而不是固定列数：5 张卡在任意宽度都不会出现
 * 「最后一行落单 + 右侧空洞」—— 每行末尾的卡自动平分整行宽度。 */
.links-grid {
    width: 100%;
    display: flex; flex-wrap: wrap; gap: 14px;
}
.link-card {
    --card-color: var(--accent);
    flex: 1 1 calc(20% - 12px);          /* ≥1061px：正好 5 张一行 */
    position: relative;
    min-width: 0;
    display: flex; flex-direction: column; gap: 11px;
    padding: 16px 16px 15px;
    /* 顶部一层卡片主题色的柔光（替代旧版的「色带 + 角标光斑」） */
    background:
        linear-gradient(158deg, color-mix(in srgb, var(--card-color) 11%, transparent) 0%, transparent 58%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-1, 0 3px 14px rgba(68, 47, 116, .08)), inset 0 1px 0 rgba(255, 255, 255, .5);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
    opacity: 0; animation: cardIn .45s var(--ease) forwards;
}
/* v46：入场动画改用独立 translate 属性（不是 transform），
 * 否则 animation forwards 会锁死 transform，按压反馈 scale 失效 */
@keyframes cardIn { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

.link-card:hover {
    border-color: color-mix(in srgb, var(--card-color) 46%, transparent);
    box-shadow: var(--sh-2, 0 12px 34px rgba(68, 47, 116, .13)),
                0 12px 26px color-mix(in srgb, var(--card-color) 16%, transparent);
    transform: translateY(-2px);
}

/* 头部一行：图标在左、箭头在右 —— 与下方文案形成清晰的两段式层级 */
.link-head {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
/* 图标本体就是「渐变方块 + 白色图形」的 48px 应用图标；
 * 这层只负责尺寸 + 主题色投影（旧版外面还套一层浅色方框，像双下巴） */
.link-icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--card-color) 30%, transparent);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.link-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-card:hover .link-icon {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--card-color) 38%, transparent);
}
.link-arrow {
    width: 16px; height: 16px; flex-shrink: 0;
    color: color-mix(in srgb, var(--card-color) 42%, var(--ink-3));
    transition: transform .2s var(--ease), color .2s var(--ease);
}
.link-card:hover .link-arrow { transform: translateX(3px); color: var(--card-color); }

.link-info { flex: 1; min-width: 0; width: 100%; }
.link-title {
    font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-desc {
    margin-top: 3px;
    font-size: 12px; color: var(--ink-3); line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 中屏：3 张一行（5 张 = 3 + 2，末行两张平分，不留洞） */
@media (max-width: 1060px) {
    .link-card { flex-basis: calc(33.3% - 10px); }
}
/* 窄屏：2 张一行（5 张 = 2 + 2 + 1，最后一张自动铺满整行） */
@media (max-width: 900px) {
    .link-card { flex-basis: calc(50% - 7px); }
    /* 落单的「最后一张」横过来排：整行宽卡不显得空 */
    .link-card:last-child {
        flex-direction: row; align-items: center; gap: 12px;
        padding: 12px 14px;
    }
    .link-card:last-child .link-head { display: contents; }
    .link-card:last-child .link-icon { order: 1; }
    .link-card:last-child .link-info { order: 2; flex: 1; min-width: 0; width: auto; }
    .link-card:last-child .link-arrow { order: 3; margin-left: auto; }
}

/* ===== 页脚 ===== */
.footer {
    margin-top: 20px; font-size: 12px; color: var(--ink-3); text-align: center;
    line-height: 1.8;
}

/* ===== 手机端：整体压缩到一屏显示，不滚动 ===== */
@media (max-width: 480px) {
    .container { padding: 16px 14px 12px; }

    /* 品牌区压缩 */
    .hero-mascot { width: 82px; height: 82px; margin-bottom: 10px; }
    .hero-mascot::before { inset: -4px; }
    .avatar { width: 72px; height: 72px; animation: none; }
    .site-title { font-size: 21px; }
    .site-subtitle { margin-top: 4px; font-size: 12.5px; }
    .trust-row { gap: 6px; margin-top: 10px; margin-bottom: 16px; }
    .trust-chip { padding: 4px 9px; font-size: 11.5px; }
    .trust-chip svg { width: 11px; height: 11px; }

    /* 入口卡片：紧凑 */
    .links-grid { gap: 9px; }
    .link-card { gap: 9px; padding: 12px 12px 11px; border-radius: var(--r-lg); }
    .link-icon { width: 42px; height: 42px; border-radius: 12px; }
    .link-title { font-size: 14px; }
    .link-desc { font-size: 11px; margin-top: 2px; }
    .link-card:last-child { padding: 11px 13px; }

    .footer { margin-top: 14px; font-size: 11px; line-height: 1.6; }
}

/* 兼容不支持 color-mix 的旧浏览器：卡片/横幅退化为纯色底 */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .link-card { background: var(--surface); }
    .promo-banner { background: var(--surface); border-color: var(--line); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .link-card { opacity: 1; }
    .avatar { animation: none; }
}