/* ============================================================
   main.css - 主要布局和组件样式
   新增部分：
   1. body背景渐变 + 纹理覆盖层
   2. 漂浮装饰元素（emoji）+ 动画
   3. 背景光斑（柔和的大圆形光晕）
   4. 卡片半透明背景（让背景微微透出）
   ============================================================ */

/* ==================== 0. body背景增强 ==================== */
/*
   给body添加柔和的垂直渐变
   从顶部暖粉色渐变到底部淡紫色
   这比纯色背景更丰富，但不喧宾夺主
   同时设置 overflow-x: hidden 防止漂浮元素超出屏幕时出现横向滚动条
*/
body {
    background: linear-gradient(
        180deg,
        var(--bg-gradient-start) 0%,
        var(--bg-gradient-end) 100%
    );
    background-attachment: fixed;   /* 背景固定，不随滚动移动 */
    overflow-x: hidden;             /* 隐藏横向溢出，防止装饰元素导致滚动条 */
    position: relative;             /* 为绝对定位的子元素提供定位参考 */
}

/* ==================== 0.1 背景纹理覆盖层 ==================== */
/*
   使用CSS的径向渐变模拟类似和纸的细微纹理
   这个层覆盖在整个body之上，但使用极低的透明度
   它给纯渐变背景增加了微妙的"质感"
   pointer-events: none 确保它不会阻挡任何鼠标交互
*/
.bg-texture {
    position: fixed;                /* 固定在视口中 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;                    /* 放在最底层（在其他背景装饰之上，但在内容之下） */
    pointer-events: none;          /* 不响应鼠标事件，点击可穿透 */
    /*
       使用重复的径向渐变来模拟纤维纹理
       background-size 控制每个"纹理单元"的大小
       这里的颜色非常淡，几乎不可见，但确实增加了质感
    */
    background-image: radial-gradient(
        circle at 25% 25%,
        rgba(180, 160, 160, 0.06) 1px,
        transparent 1px
    );
    background-size: 32px 32px;    /* 纹理单元大小 */
    opacity: 0.7;
}

/* ==================== 0.2 背景光斑 ==================== */
/*
   柔和的大圆形光晕，模拟自然光散射或镜头光晕
   使用 position: fixed 固定在视口中
   每个光斑有不同的位置、大小、颜色和动画
   让背景看起来更有层次感和梦幻感
*/
.bg-orb {
    position: fixed;
    border-radius: 50%;            /* 正圆 */
    filter: blur(80px);            /* 大量模糊，让边缘非常柔和 */
    pointer-events: none;
    z-index: 0;
    /* 光斑呼吸动画：缓慢地改变大小和透明度 */
    animation: orbBreathe 8s ease-in-out infinite;
}

/* 光斑1：偏粉色，位于右上角 */
.orb-1 {
    width: 300px;
    height: 300px;
    background: var(--orb-pink);
    top: -80px;
    right: -60px;
    animation-delay: 0s;
}

/* 光斑2：偏淡紫色，位于左下角 */
.orb-2 {
    width: 260px;
    height: 260px;
    background: var(--orb-lavender);
    bottom: -70px;
    left: -50px;
    animation-delay: 3s;           /* 延迟3秒开始，错开动画节奏 */
    animation-duration: 10s;       /* 动画持续10秒，与光斑1不同 */
}

/* 光斑3：偏暖桃色，位于中右侧 */
.orb-3 {
    width: 220px;
    height: 220px;
    background: var(--orb-peach);
    top: 40%;
    right: -40px;
    animation-delay: 5s;
    animation-duration: 7s;
}

/*
   光斑呼吸动画
   在不同的时间点改变缩放和透明度
   让光斑有"呼吸"的感觉
*/
@keyframes orbBreathe {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    25% {
        transform: scale(1.2);
        opacity: 0.9;
    }
    50% {
        transform: scale(0.85);
        opacity: 0.5;
    }
    75% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

/* ==================== 0.3 漂浮装饰元素 ==================== */
/*
   所有漂浮元素的容器
   position: fixed 覆盖整个视口
   内部的 float-item 使用绝对定位
*/
.floating-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;          /* 不阻挡交互 */
    z-index: 1;                    /* 在光斑之上，但在内容之下 */
    overflow: hidden;              /* 超出屏幕的部分隐藏 */
}

/*
   每个漂浮元素的通用样式
   使用绝对定位，初始位置各不相同
*/
.float-item {
    position: absolute;
    display: block;
    font-size: 1.6rem;             /* 默认大小 */
    opacity: 0.55;                 /* 半透明，更柔和 */
    /*
       每个漂浮元素使用统一的漂浮动画
       但通过不同的 animation-delay 和 duration 来制造差异
       floatDrift 动画让元素在垂直方向漂浮，同时有水平摆动
    */
    animation: floatDrift 12s ease-in-out infinite;
    /*
       will-change 提示浏览器这个元素的 transform 会变化
       有助于优化渲染性能（让动画更流畅）
    */
    will-change: transform;
}

/*
   为每个漂浮元素设置独立的：
   - 起始位置（top, left, right, bottom）
   - 动画持续时间（animation-duration）
   - 动画延迟（animation-delay）
   - 字体大小
   - 透明度
   这样它们就不会同步运动，看起来更自然
*/

/* 漂浮元素1：大樱花，左上方 */
.float-1 {
    top: 10%;
    left: 5%;
    font-size: 2.2rem;
    opacity: 0.5;
    animation-duration: 14s;
    animation-delay: 0s;
}

/* 漂浮元素2：闪光，右上方 */
.float-2 {
    top: 15%;
    right: 10%;
    font-size: 1.4rem;
    opacity: 0.6;
    animation-duration: 10s;
    animation-delay: 1.5s;
}

/* 漂浮元素3：白色花，左中部 */
.float-3 {
    top: 45%;
    left: 3%;
    font-size: 1.8rem;
    opacity: 0.45;
    animation-duration: 13s;
    animation-delay: 3s;
}

/* 漂浮元素4：叶子，右中部 */
.float-4 {
    top: 40%;
    right: 6%;
    font-size: 1.6rem;
    opacity: 0.5;
    animation-duration: 11s;
    animation-delay: 5s;
}

/* 漂浮元素5：小樱花，中下部偏左 */
.float-5 {
    bottom: 20%;
    left: 12%;
    font-size: 1.5rem;
    opacity: 0.5;
    animation-duration: 15s;
    animation-delay: 2s;
}

/* 漂浮元素6：星形符号，右下部 */
.float-6 {
    bottom: 25%;
    right: 8%;
    font-size: 1.3rem;
    opacity: 0.55;
    animation-duration: 9s;
    animation-delay: 4s;
}

/* 漂浮元素7：气泡，左上方偏中 */
.float-7 {
    top: 30%;
    left: 18%;
    font-size: 1.1rem;
    opacity: 0.4;
    animation-duration: 8s;
    animation-delay: 6s;
}

/* 漂浮元素8：旋转星光，右侧 */
.float-8 {
    top: 55%;
    right: 15%;
    font-size: 1.5rem;
    opacity: 0.5;
    animation-duration: 12s;
    animation-delay: 7s;
}

/*
   漂浮动画核心
   元素在垂直方向上做往复运动（上下浮动）
   同时配合小幅度的水平摆动和旋转
   使用 ease-in-out 让运动开始和结束时更平滑
*/
@keyframes floatDrift {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.5;
    }
    20% {
        transform: translateY(-25px) translateX(12px) rotate(8deg);
        opacity: 0.65;
    }
    40% {
        transform: translateY(-8px) translateX(-8px) rotate(-5deg);
        opacity: 0.45;
    }
    60% {
        transform: translateY(-30px) translateX(15px) rotate(10deg);
        opacity: 0.6;
    }
    80% {
        transform: translateY(-5px) translateX(-12px) rotate(-8deg);
        opacity: 0.5;
    }
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.5;
    }
}

/* ==================== 1. 顶部装饰条 ==================== */
.top-ribbon {
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--accent-light) 0%,
        var(--accent) 40%,
        var(--accent-light) 100%
    );
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

/* ==================== 2. 主容器 ==================== */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
    padding-top: calc(3rem + 4px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 10;                   /* 确保内容在背景装饰之上 */
}

/* ==================== 3. 主卡片 ==================== */
/*
   卡片背景使用半透明白色
   这样背景的渐变和光斑可以微微透过来
   既保持了卡片的清晰度，又和背景融为一体
*/
.main-card {
    background: rgba(255, 255, 255, 0.88);   /* 半透明白色 */
    /*
       backdrop-filter 是一个CSS滤镜
       它会对卡片"背后"的内容应用模糊效果
       这让卡片有一种毛玻璃的质感
       注意：这个属性在某些旧浏览器上不支持
       但不影响整体布局，只是少了模糊效果
    */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);     /* Safari兼容写法 */
    border-radius: var(--radius-lg);
    padding: var(--card-padding);
    box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 var(--accent-light);
    text-align: center;
    opacity: 0;
    transform: translateY(16px);
    animation: cardFadeIn 0.7s ease forwards;
    width: 100%;
    /* 添加一个微妙的边框，增强卡片的存在感 */
    border: 1px solid rgba(255, 255, 255, 0.6);
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== 4. 头像区域 ==================== */
.avatar-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 1.2rem;
}

.avatar {
    width: 90px;
    height: 90px;
    border-radius: var(--radius-full);
    background: linear-gradient(
        135deg,
        var(--accent-light) 0%,
        #fce4ec 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(180, 150, 150, 0.2);
    position: relative;
    z-index: 2;
    transition: transform var(--transition-fast);
}

.avatar:hover {
    transform: scale(1.06);
}

.avatar-emoji {
    font-size: 2.6rem;
    line-height: 1;
    animation: gentleFloat 3s ease-in-out infinite;
}

.avatar-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: var(--radius-full);
    background: var(--accent-glow);
    z-index: 1;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes glowPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.18);
        opacity: 0.9;
    }
}

/* ==================== 5. 欢迎语 ==================== */
.greeting {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: 0.03em;
}

/* ==================== 6. 介绍文字 ==================== */
.intro {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.8rem;
}

.emoji-deco {
    font-size: 1.1em;
}

/* ==================== 7. 时钟区域 ==================== */
.clock-section {
    background: var(--accent-light);
    border-radius: var(--radius-md);
    padding: 1.2rem 1rem;
    margin-bottom: 1.8rem;
    border: 1px solid rgba(212, 160, 167, 0.2);
    transition: box-shadow var(--transition-normal);
}

.clock-section:hover {
    box-shadow: 0 0 20px rgba(212, 160, 167, 0.2);
}

.clock-date {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.3rem;
}

.clock-time {
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--accent-dark);
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    font-family: "SF Mono", "Consolas", "Menlo", monospace,
                 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.clock-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--accent),
        transparent
    );
    margin: 0.6rem auto;
}

.clock-motto {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    letter-spacing: 0.04em;
    transition: opacity 0.5s ease;
}

/* ==================== 8. 链接按钮组 ==================== */
.link-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    background: var(--bg-card);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
    cursor: pointer;
    user-select: none;
}

.link-btn:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.link-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.link-icon {
    font-size: 1.1em;
    line-height: 1;
}

/* ==================== 9. 状态标签 ==================== */
.status-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.tag {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--accent-light);
    border-radius: 999px;
    border: 1px solid rgba(212, 160, 167, 0.25);
    transition: background var(--transition-fast);
}

.tag:hover {
    background: #fce4ec;
}

/* ==================== 10. 页脚 ==================== */
.footer {
    text-align: center;
    margin-top: 1.8rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.footer-kaomoji {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* ==================== 11. 响应式设计 ==================== */
/*
   在小屏幕上调整装饰元素的显示
   减少一些漂浮元素，避免过于拥挤
   同时缩小光斑尺寸
*/
@media (max-width: 480px) {
    .main-card {
        padding: var(--card-padding-mobile);
    }

    .greeting {
        font-size: 1.3rem;
    }

    .clock-time {
        font-size: 2.2rem;
    }

    .clock-date {
        font-size: 0.9rem;
    }

    .link-btn {
        flex: 1 1 calc(50% - 0.7rem);
        justify-content: center;
        min-width: 120px;
    }

    .avatar {
        width: 72px;
        height: 72px;
    }
    .avatar-emoji {
        font-size: 2rem;
    }
    .avatar-glow {
        width: 88px;
        height: 88px;
    }

    /* 移动端缩小光斑 */
    .orb-1 {
        width: 180px;
        height: 180px;
        top: -40px;
        right: -30px;
    }
    .orb-2 {
        width: 160px;
        height: 160px;
        bottom: -40px;
        left: -30px;
    }
    .orb-3 {
        width: 140px;
        height: 140px;
    }

    /* 移动端减少部分漂浮元素的尺寸 */
    .float-1 { font-size: 1.6rem; }
    .float-3 { font-size: 1.4rem; }
    .float-4 { font-size: 1.2rem; }

    /* 隐藏一些较小的漂浮元素，避免屏幕过于拥挤 */
    .float-6,
    .float-8 {
        opacity: 0.25;
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .link-btn {
        flex: 1 1 100%;
    }

    .clock-time {
        font-size: 1.8rem;
    }

    .container {
        padding: 2rem 0.8rem 1.5rem;
        padding-top: calc(2rem + 4px);
    }

    /* 超小屏幕进一步减少装饰 */
    .float-4,
    .float-7 {
        display: none;             /* 完全隐藏某些装饰 */
    }
    .orb-3 {
        display: none;
    }
}