/**
 * 主页动画画布与卡片样式
 */

/* 填满整个页面区域，溢出裁剪（飞入动画中卡片从屏幕外滑入） */
#main-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 主页卡片：绝对定位于画布内，尺寸和位置由 JS 计算并写入 style */
.main-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;         /* 由 JS 动画控制 */
    cursor: default;
    user-select: none;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.main-card:hover {
    cursor: pointer;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35) !important;
}

/* 占位标签：未填充内容时显示浅色提示文字 */
.mc-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    pointer-events: none;
    position: absolute;
    bottom: 8px;
    right: 10px;
}

/* 内容容器：未来各 widget 的挂载点 */
.mc-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 欢迎卡片 */

/* 欢迎卡片：左头像右信息，水平排列，撑满内容区 */
.welcome-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

/* 圆形头像图片 */
.welcome-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

/* 无头像时显示首字的占位圆 */
.welcome-avatar-placeholder {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
}

/* 右侧信息列：撑满剩余宽度，纵向排列，左对齐 */
.welcome-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* 显示名称 */
.welcome-name {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

/* 一句话身份标签 */
.welcome-tagline {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
}

/* 个人简介 */
.welcome-bio {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 100%;
    text-align: left;
}

/* 技能/兴趣标签行 */
.welcome-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 单个标签：圆角胶囊，毛玻璃底 */
.welcome-badge {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* 天气卡片 */

/* 天气卡片 */
.weather-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

/* 第一行 */
.weather-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* SVG 图标尺寸 */
.weather-svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    overflow: visible;
}

/* 温度大字 */
.weather-temp {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

/* 天气描述文字 */
.weather-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
    text-align: left;
}

/* 湿度与风速 */
.weather-extra {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
}

/* 链接卡片图标图片 */
.link-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* 邮箱卡片：左右各一个邮箱，横排撑满 */
.email-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* 单个邮箱区域：居中图标，点击整块区域 */
.email-item {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}

.email-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 两个邮箱之间的分隔线 */
.email-divider {
    width: 1px;
    height: 60%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* 加载中 / 错误提示 */
.weather-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    width: 100%;
}

/* 天气图标动画通用：fill-box 使 CSS transform 按元素自身包围盒计算 */
.weather-svg * {
    transform-box: fill-box;
}
.weather-svg .sun-core,
.weather-svg .cloud-group {
    transform-origin: center;
}

/* ===== 晴天 ===== */

/* 太阳核心：弹性缩放淡入 → 呼吸式脉动 */
.weather--clear .sun-core {
    animation: sun-core-enter 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               sun-core-breath 3s 0.7s ease-in-out infinite;
    opacity: 0;
}
/* 光线：从远离中心处收回 + 淡入，每条错开 0.05s */
.weather--clear .sun-ray {
    animation: sun-ray-enter 0.4s var(--sr-delay, 0s) ease-out forwards;
    opacity: 0;
}
.weather--clear .sun-ray:nth-child(1) { --sr-delay: 0s; }
.weather--clear .sun-ray:nth-child(2) { --sr-delay: 0.05s; }
.weather--clear .sun-ray:nth-child(3) { --sr-delay: 0.1s; }
.weather--clear .sun-ray:nth-child(4) { --sr-delay: 0.15s; }
.weather--clear .sun-ray:nth-child(5) { --sr-delay: 0.2s; }
.weather--clear .sun-ray:nth-child(6) { --sr-delay: 0.25s; }
.weather--clear .sun-ray:nth-child(7) { --sr-delay: 0.3s; }
.weather--clear .sun-ray:nth-child(8) { --sr-delay: 0.35s; }
/* 光线组：缓慢旋转，原点 (12,12) 即太阳圆心
   transform-box: view-box 使像素值相对于 SVG viewBox，避免 fill-box 被包围盒偏移 */
.weather--clear .sun-rays {
    transform-box: view-box;
    transform-origin: 12px 12px;
    animation: sun-rays-spin 30s 0.7s linear infinite;
}

@keyframes sun-core-enter {
    0% { opacity: 0; transform: scale(0.7); }
    70% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes sun-core-breath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
@keyframes sun-ray-enter {
    0% { opacity: 0; transform: scale(1.4); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes sun-rays-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== 晴间多云 ===== */

/* 小太阳核心：弹性缩放淡入 → 呼吸脉动 */
.weather--partlyCloudy .sun-core {
    animation: sun-core-enter 0.4s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               sun-core-breath 3.5s 0.45s ease-in-out infinite;
    opacity: 0;
}
/* 光线：从太阳中心向外收回 + 淡入，仅入场无待机 */
.weather--partlyCloudy .sun-ray {
    transform-box: view-box;
    transform-origin: 20px 5px;
    animation: sun-ray-enter 0.35s var(--pc-sr-delay, 0s) ease-out forwards;
    opacity: 0;
}
.weather--partlyCloudy .sun-ray:nth-child(2) { --pc-sr-delay: 0s; }
.weather--partlyCloudy .sun-ray:nth-child(3) { --pc-sr-delay: 0.05s; }
.weather--partlyCloudy .sun-ray:nth-child(4) { --pc-sr-delay: 0.1s; }
/* 云朵：淡入 + 从右飘入 */
.weather--partlyCloudy .cloud-group {
    animation: cloud-enter 0.5s 0.1s ease-out forwards,
               cloud-drift 4s 0.6s ease-in-out infinite;
    opacity: 0;
}

@keyframes cloud-enter {
    0% { opacity: 0; transform: translateX(6px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes cloud-drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(1.5px); }
}

/* ===== 阴天 ===== */

/* 仅云朵入场 + 漂移 */
.weather--cloudy .cloud-group {
    animation: cloud-enter 0.5s ease-out forwards,
               cloud-drift 4s 0.5s ease-in-out infinite;
    opacity: 0;
}

/* ===== 雾 ===== */

/* 三条横线依次淡入 + 水平滑入，待机同步水平微移，幅度对齐云朵 */
.weather--fog .fog-line {
    animation: fog-line-enter 0.4s var(--fog-e-delay, 0s) ease-out forwards,
               fog-line-idle 4s 0.7s ease-in-out infinite;
    opacity: 0;
}
.weather--fog .fog-line:nth-child(1) { --fog-e-delay: 0s; }
.weather--fog .fog-line:nth-child(2) { --fog-e-delay: 0.1s; }
.weather--fog .fog-line:nth-child(3) { --fog-e-delay: 0.2s; }

@keyframes fog-line-enter {
    0% { opacity: 0; transform: translateX(-4px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes fog-line-idle {
    0% { transform: translateX(-1.5px); }
    50% { transform: translateX(1.5px); }
    100% { transform: translateX(-1.5px); }
}

/* ===== 毛毛雨 ===== */

/* 云朵仅淡入，不漂移 */
.weather--drizzle .cloud-group {
    animation: cloud-fade-in 0.3s ease-out forwards;
    opacity: 0;
}
/* 雨滴：由上淡入向下淡出，循环 1.5s，两滴错开 */
.weather--drizzle .raindrop {
    animation: raindrop-fall-drizzle 1.5s linear infinite;
    opacity: 0;
}
.weather--drizzle .raindrop:nth-child(2) { animation-delay: 0s; }
.weather--drizzle .raindrop:nth-child(3) { animation-delay: 0.5s; }

@keyframes cloud-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes raindrop-fall-drizzle {
    0% { opacity: 0; transform: translateY(-4px); }
    25% { opacity: 1; transform: translateY(1px); }
    60% { opacity: 1; transform: translateY(5px); }
    90% { opacity: 0.3; transform: translateY(7px); }
    100% { opacity: 0; transform: translateY(8px); }
}

/* ===== 雨 ===== */

/* 云朵仅淡入，不漂移 */
.weather--rain .cloud-group {
    animation: cloud-fade-in 0.3s ease-out forwards;
    opacity: 0;
}
/* 雨滴：同毛毛雨但更快（1.2s），三滴错开 */
.weather--rain .raindrop {
    animation: raindrop-fall-rain 1.2s linear infinite;
    opacity: 0;
}
.weather--rain .raindrop:nth-child(2) { animation-delay: 0s; }
.weather--rain .raindrop:nth-child(3) { animation-delay: 0.4s; }
.weather--rain .raindrop:nth-child(4) { animation-delay: 0.8s; }

@keyframes raindrop-fall-rain {
    0% { opacity: 0; transform: translateY(-4px); }
    20% { opacity: 1; transform: translateY(1px); }
    50% { opacity: 1; transform: translateY(5px); }
    85% { opacity: 0.3; transform: translateY(7px); }
    100% { opacity: 0; transform: translateY(8px); }
}

/* ===== 雪 ===== */

/* 云朵仅淡入，不漂移 */
.weather--snow .cloud-group {
    animation: cloud-fade-in 0.3s ease-out forwards;
    opacity: 0;
}
/* 雪花：旋转缩放入场 → 持续旋转，两片错开 */
.weather--snow .snowflake {
    animation: snowflake-enter 0.6s var(--sf-e-delay, 0s) ease-out forwards,
               snowflake-spin 8s var(--sf-i-delay, 0.6s) linear infinite;
    opacity: 0;
}
.weather--snow .sf-1 { transform-box: view-box; transform-origin: 8px 20px; --sf-e-delay: 0s; --sf-i-delay: 0.6s; }
.weather--snow .sf-2 { transform-box: view-box; transform-origin: 16px 21px; --sf-e-delay: 0.15s; --sf-i-delay: 0.75s; }

@keyframes snowflake-enter {
    0% { opacity: 0; transform: rotate(-90deg) scale(0.3); }
    100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes snowflake-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== 雷暴 ===== */

/* 云朵淡入 + 脉冲 */
.weather--thunderstorm .cloud-group {
    animation: cloud-fade-in 0.3s ease-out forwards,
               cloud-pulse 4s 0.3s ease-in-out infinite;
    opacity: 0;
}
/* 闪电：入场快闪两次，结束后保持显示，待机持续闪烁 */
.weather--thunderstorm .lightning {
    animation: lightning-enter 0.5s ease-out forwards,
               lightning-idle 6s 0.5s step-start infinite;
    opacity: 0;
}

@keyframes cloud-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}
@keyframes lightning-enter {
    0% { opacity: 0; }
    15% { opacity: 1; }
    30% { opacity: 0; }
    60% { opacity: 0.7; }
    70% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes lightning-idle {
    0%, 60% { opacity: 1; }
    60.5%, 61% { opacity: 0.2; }
    61.5%, 62% { opacity: 1; }
    80%, 80.5% { opacity: 0.15; }
    81%, 100% { opacity: 1; }
}

/* 最新文章 / 随机推荐卡片：填满内容区，纵向弹性排列，左对齐 */
.latest-article-card,
.random-article-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    overflow: hidden;
    padding-bottom: 18px;
}

/* 随机推荐标题行：标题与刷新按钮横排 */
.random-card-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-bottom: 4px;
}

/* 最新文章标题 */
.latest-article-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 随机推荐标题：flex 撑满剩余宽度，为刷新按钮留位 */
.random-article-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 日期：小字，半透明 */
.latest-article-date,
.random-article-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
    flex-shrink: 0;
}

/* 摘要：占剩余高度，超出两行截断 */
.latest-article-excerpt,
.random-article-excerpt {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    flex: 1;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 6px;
}

/* 刷新按钮：无边框，纯白图标，固定尺寸不参与 flex 伸缩 */
/* 旋转由 JS 帧循环驱动，CSS 不再控制 transform */
.random-refresh-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s;
    line-height: 0;
}

/* 悬停时完全不透明（旋转角度由 JS 帧循环累积，鼠标进入 +180，离开 -180） */
.random-refresh-btn:hover {
    opacity: 1;
}

/* 时间卡片：纵向居中排列各元素 */
.time-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

/* 时:分 主显示，加粗大字，flex 排列数字遮罩与冒号 */
.time-main {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

/* 秒数，半透明小字，flex 排列数字遮罩 */
.time-seconds {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
}

/* 数字组：水平排列各位数字遮罩 */
.time-digits {
    display: flex;
}

/* 冒号分隔符 */
.time-colon {
    margin: 0 2px;
}

/* 数字遮罩：裁剪只显示一个数字高度，其余由 translateY 控制滚动 */
.time-digit-mask {
    overflow: hidden;
    height: 1em;
}

/* 数字列内单个数字：高度 = 1em，行高 = 1，居中对齐 */
.time-digit-strip span {
    display: block;
    height: 1em;
    line-height: 1;
    text-align: center;
}

/* 星期，更小更淡 */
.time-weekday {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
    line-height: 1;
}

/* 日历卡片：纵向填满内容区 */
.calendar-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 年月标题，居中加粗 */
.calendar-header {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2px;
    flex-shrink: 0;
}

/* 星期标题行：7 列均分 */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    flex-shrink: 0;
}

/* 单个星期标签，半透明小字 */
.calendar-weekday {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    padding: 2px 0;
}

/* 日期网格：7 列，撑满剩余高度 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    flex: 1;
    align-content: start;
}

/* 日期格，居中对齐，圆角方块 */
.calendar-day {
    font-size: 12px;
    text-align: center;
    padding: 4px 2px;
    border-radius: 6px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

/* 今日高亮：半透明白底 + 完全不透明白字 */
.calendar-day.today {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-weight: 700;
}

/* 月首空占位格：隐藏但保留位置 */
.calendar-day.empty {
    visibility: hidden;
}

/* 音乐播放器：左封面右信息，水平排列，撑满内容区 */
.music-player {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 封面容器：固定不收缩 */
.music-cover-wrap {
    flex-shrink: 0;
}

/* 圆形封面：默认渐变背景 + 居中音符图标，有封面图时作为背景 */
.music-cover {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

/* 播放中：封面持续旋转 */
.music-cover.playing {
    animation: music-spin 8s linear infinite;
}

@keyframes music-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 右侧信息列：撑满剩余宽度，纵向排列 */
.music-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 歌曲标题：超出单行截断 */
.music-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 艺术家：半透明小字，截断 */
.music-artist {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 进度条区域：轨道 + 时间行纵向排列 */
.music-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 进度条轨道 */
.music-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
}

/* 已播放填充 */
.music-bar-fill {
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    transition: width 0.3s linear;
}

/* 时间行：当前时间左对齐，总时长右对齐 */
.music-time {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

/* 控制按钮行：居中排列 */
.music-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* 控制按钮基础样式：无背景，半透明，悬停放大 */
.music-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.15s;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.music-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* 播放/暂停按钮：圆形毛玻璃底 */
.music-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    opacity: 1;
}

.music-play-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.08);
}