/* ================= 全局变量设置 ================= */
:root {
    /* 🌟 字体设置：推荐使用开源免费的「霞鹜文楷」，充满温馨与魔法少女感 */
    /* 如果想用回现代无衬线，可以把下一行注释掉，并取消再下一行的注释 */
    --main-font: 'LXGW WenKai', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* --main-font: 'Noto Sans SC', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; */
    
    /* 色彩系统 (淡粉白色系) */
    /* 减弱了隔层纱的浓度，从 0.88 降至 0.70，让背景更通透 */
    --bg-overlay-color: rgba(255, 250, 252, 0.70); 
    --card-bg: rgba(255, 255, 255, 0.50);          /* 卡片背景色也更透明一点 */
    --card-border-hover: rgba(255, 105, 180, 0.8);  /* 卡片悬停边框颜色 (深粉) */
    --text-main: #4a4a4a;                           /* 主要文字颜色 (稍深一点，保证对比度) */
    --text-hover: #ff69b4;                          /* 悬停时文字/图标颜色 (热粉色) */
    --live-dot-color: #ff3b30;                      /* LIVE红点颜色 */
    
    /* 尺寸与间距 */
    --grid-gap: 0px;                                /* 🌟 核心修改：间距设为0，实现完全挨在一起 */
    --grid-max-width: 1200px;                       /* 🌟 核心修改：网格更宽，显得更大气 */
    --card-radius: 12px;                            /* 卡片圆角大小 (稍微加大一点，更柔和) */
}

/* ================= 基础重置 ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--main-font);
    color: var(--text-main);
    background-color: #fff; 
    overflow-x: hidden; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ================= 背景跑马灯动画 ================= */
.bg-marquee {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; 
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
}

.marquee-row {
    width: 100%;
    /* 🌟 核心修改：增加高度，避免图片上下被裁剪。35vh 表示屏幕高度的35% */
    height: 35vh; 
    min-height: 250px; /* 保证在小屏幕上也有足够高度 */
    overflow: hidden;
    position: relative;
}

.marquee-track {
    display: flex;
    width: 200%; 
    height: 100%;
}

.marquee-item {
    width: 50%; 
    height: 100%;
    /*  核心修改：使用 contain 确保图片完整显示，不被裁剪 */
    /* 🌟 修改为 auto 100%：高度强制填满行高（保证四行高度一致），宽度保持原比例自然延伸 */
    background-size: auto 100%;
    background-repeat: no-repeat;
    /* 🌟 修改为 center top：让图片顶部对齐，确保角色的头部完整显示，不会被裁切 */
    background-position: center top; 
}

/* 动画定义 */
@keyframes scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.row-right .marquee-track {
    animation: scroll-right 60s linear infinite;
}

.row-left .marquee-track {
    animation: scroll-left 60s linear infinite;
}

/* 隔层纱遮罩 */
.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-overlay-color);
    z-index: -1; 
    /* 🌟 核心修改：减弱模糊效果，让背景更清晰可见 */
    backdrop-filter: blur(1px); 
}

/* ================= 主体内容布局 ================= */
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    z-index: 1;
}

/* --- 首屏 Hero Section --- */
.hero {
    height: 100vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hero-profile {
    display: flex;
    align-items: center;
    gap: 40px; /* 头像和文字的间距加大 */
}

.hero-avatar {
    /* 🌟 核心修改：头像放大 */
    width: 180px;  
    height: 180px;
    border-radius: 50%; 
    object-fit: cover;
    border: 5px solid rgba(255, 255, 255, 0.95); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hero-name {
    /* 🌟 核心修改：名字放大 */
    font-size: 3.5rem; 
    font-weight: 700;
    color: #333;
    letter-spacing: 2px;
}

.hero-slogan {
    /* 🌟 核心修改：Slogan 放大并放宽宽度 */
    font-size: 1.4rem; 
    color: #666;
    font-weight: 500;
    max-width: 600px; 
    line-height: 1.6;
}

/* --- 链接网格 Link Grid --- */
.links-grid {
    width: 100%;
    max-width: var(--grid-max-width); 
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: var(--grid-gap); /* 这里是 0px，实现无缝拼接 */
    
    /* 🌟 修改：将上下 padding 改为对称的 80px，让内部网格在面板中垂直居中 */
    padding: 80px 0; 
    
    /*  新增：给整个板块加一层淡淡的粉白背景和模糊效果 */
    /* 毛玻璃面板效果 */
    background-color: rgba(255, 245, 250, 0.30); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); 
    border-radius: 24px; 
    border: 1px solid rgba(255, 255, 255, 0.6); 
    box-shadow: 0 10px 40px rgba(255, 105, 180, 0.08); 
    
    /* 🌟 修改：调整上下 margin，让面板在 hero 和 footer 之间视觉更平衡 */
    margin: 80px 0 100px 0; 
}

/* 卡片通用样式 */
.card {
    /* 🌟 修改：将背景色改为透明，消除默认的白色底色 */
    background-color: transparent; 
    /* 🌟 核心修改：始终保留 1px 边框，但初始为透明。这样 hover 变色时布局不会跳动 */
    border: 1px solid transparent; 
    border-radius: var(--card-radius);
    text-decoration: none;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 🌟 核心修改：增加内边距和最小高度，让卡片更大气 */
    padding: 40px 20px; 
    min-height: 160px; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    position: relative;
}

/* 卡片悬停效果 (微交互) */
.card:hover {
    transform: translateY(-8px); /* 弹起幅度稍微加大 */
    /* 🌟 核心修改：只改变边框颜色，乍一看没有分割线，鼠标放上去才显现 */
    border-color: var(--card-border-hover); 
    background-color: rgba(255, 255, 255, 0.85); /* 悬停时背景稍微变实一点 */
    box-shadow: 0 15px 35px rgba(255, 105, 180, 0.15); 
    color: var(--text-hover); 
}

/* 带图标的卡片内部布局 */
.card-icon {
    margin-bottom: 16px;
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-icon i {
    /* 🌟 核心修改：FontAwesome 图标放大 */
    font-size: 48px; 
}

.card-text {
    font-size: 1.1rem;
    font-weight: 600;
}

/* 纯文字卡片特殊样式 */
.text-only-card .card-text-large {
    /* 🌟 核心修改：纯文字放大，更显眼 */
    font-size: 1.5rem; 
    font-weight: 700;
    letter-spacing: 2px;
}

/* 纯文字卡片里的第二行小注释（比如「更多内容筹备中…」） */
.card-subtext {
    margin-top: 8px;      /* 和上面那行大字留一点空隙，别贴太紧 */
    font-size: 0.85rem;   /* 比正常文字小，弱化存在感 */
    font-weight: 400;     /* 用常规字重，和上面 700 的粗字形成对比 */
    letter-spacing: 1px;  /* 字间距比大字收一点，更精致 */
    line-height: 1.4;     /* 万一小屏换行，两行之间不会挤 */
    text-align: center;   /* 换行时居中 */
    opacity: 0.55;        /* 用透明度变淡 —— 妙处见下方说明 */
}

/* LIVE 红点样式 */
.live-dot {
    position: absolute;
    top: -2px;
    right: -6px;
    width: 12px;
    height: 12px;
    background-color: var(--live-dot-color);
    border-radius: 50%;
    border: 2px solid #fff; 
    animation: pulse 2s infinite; 
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* ================= 响应式设计 ================= */

/* 平板或窄屏电脑：一行2个 */
@media (max-width: 1024px) {
    .links-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 平板上如果完全无缝可能有点挤，可以稍微给一点 gap */
        gap: 2px; 
    }
    .hero-profile {
        flex-direction: column; 
        text-align: center;
        gap: 20px;
    }
    .hero-slogan {
        max-width: 100%;
        padding: 0 20px;
    }
}

/* 手机：一行1个 */
@media (max-width: 600px) {
    .links-grid {
        grid-template-columns: 1fr;
        gap: 12px; /* 手机端必须留有间距，否则像一个大长条 */
    }
    .hero-name {
        font-size: 2.5rem;
    }
    .hero-avatar {
        width: 150px;
        height: 150px;
    }
    .hero-slogan {
        font-size: 1.2rem;
    }
    .card {
        min-height: 120px; /* 手机端卡片稍微矮一点 */
        padding: 30px 20px;
    }
    .card-icon i {
        font-size: 36px;
    }
    .text-only-card .card-text-large {
        font-size: 1.3rem;
    }
}

/* ================= 页脚 ================= */
.footer {
    text-align: center;
    padding: 40px 20px;
    font-size: 0.9rem;
    color: #888;
    background-color: rgba(255, 255, 255, 0.4); 
    z-index: 1;
}

.footer p {
    margin: 5px 0;
}