/**
 * 全局样式重置与基础设置
 * @description 重置浏览器默认样式并设置基础样式属性
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/**
 * 页面主体样式
 * @description 设置页面的基本字体、颜色和布局属性
 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #ffffff;
    min-height: 100vh;
    overflow-x: hidden;
    padding: 1rem;
    scroll-behavior: smooth;
}

/**
 * 背景容器
 * @description 固定定位的背景容器，用于容纳视频或图像背景
 */
#bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
    transform: translateZ(0); /* 启用硬件加速 */
    will-change: transform; /* 告诉浏览器这个元素将有动画 */
}

/**
 * 背景层样式
 * @description 定义背景层的通用样式属性
 */
#bg-layer-0, #bg-layer-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.8);
    transform: translateZ(0); /* 启用硬件加速 */
    will-change: transform; /* 告诉浏览器这个元素将有动画 */
}

/**
 * 视频背景特定样式
 * @description 为视频背景元素设置特定的适应属性
 */
#bg-layer-0 {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateZ(0); /* 启用硬件加速 */
}

/**
 * 加载屏幕
 * @description 页面加载时显示的全屏加载界面
 */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/**
 * 加载动画
 * @description 旋转的加载动画元素
 */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.1);
    border-top: 5px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/**
 * 旋转动画关键帧
 * @description 定义旋转动画的关键帧
 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/**
 * 主内容区域
 * @description 页面的主要内容容器，初始隐藏
 */
.main-content {
    display: none;
    max-width: 1200px;
}

/**
 * Logo容器
 * @description 用于居中显示Logo的容器
 */
.logo-container {
    text-align: center;
}

/**
 * Logo图像
 * @description Logo的样式和悬停效果
 */
.logo-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    border-radius: 50%;
}

/**
 * Logo悬停效果
 * @description 鼠标悬停时的缩放效果
 */
.logo-img:hover {
    transform: scale(1.05);
}

/**
 * 内容模块通用过渡效果
 * @description 为主要内容模块添加统一的过渡效果
 */
.quote-module, .time-weather-module, .time-module, .weather-module {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/**
 * 内容模块悬停效果
 * @description 鼠标悬停时的上浮和阴影效果
 */
.quote-module:hover, .time-weather-module:hover, .time-module:hover, .weather-module:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/**
 * 移动设备响应式调整
 * @description 为小屏幕设备调整内容模块的边距和内边距
 */
@media (max-width: 768px) {
    .quote-module, .time-weather-module, .time-module, .weather-module {
        margin-bottom: 10px;
        padding: 15px;
    }
}

/**
 * 时间天气模块容器
 * @description 时间和天气模块的行容器，使用flex布局
 */
.time-weather-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/**
 * 桌面设备的时间天气布局
 * @description 在大屏幕上将时间和天气模块横向排列
 */
@media (min-width: 768px) {
    .time-weather-row {
        flex-direction: row;
        gap: 1.5rem;
    }
}

/**
 * 时间和天气模块通用样式
 * @description 定义两个模块的共同基础样式
 */
.time-module,
.weather-module {
    display: flex;
    flex: 1;
    min-height: 180px;
    margin-bottom: 0;
}

/**
 * 时间模块布局
 * @description 时间模块的居中布局
 */
.time-module {
    justify-content: center;
    align-items: center;
}

/**
 * 时间显示容器
 * @description 时间显示的内部容器，垂直居中布局
 */
.time-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
}

/**
 * 天气模块布局
 * @description 天气模块的布局设置
 */
.weather-module {
    justify-content: space-between;
    align-items: center;
}

/**
 * 天气模块子容器
 * @description 天气模块内部子容器的样式
 */
.weather-module > div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/**
 * 天气刷新按钮
 * @description 用于刷新天气数据的圆形按钮
 */
.refresh-weather-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 10;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/**
 * 移动设备的天气刷新按钮
 * @description 在小屏幕上调整刷新按钮的大小
 */
@media (max-width: 767px) {
    .refresh-weather-btn {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }
}

/**
 * 天气刷新按钮悬停效果
 * @description 鼠标悬停时的背景变化和旋转动画
 */
.refresh-weather-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: rotate(180deg);
    transition: all 0.5s ease;
}

/**
 * 文案文本样式
 * @description 设置文案文本的阴影效果
 */
.quote-text {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/**
 * 时间显示样式
 * @description 设置时间显示的字体大小、粗细和阴影效果
 */
.time-display {
    font-size: 1.5rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/**
 * 时间图形容器
 * @description 时间显示的图形化容器
 */
.time-graphics {
    width: 100%;
}

/**
 * 时间数字容器
 * @description 包含所有时间数字和分隔符的flex容器
 */
.time-digits {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/**
 * 数字显示容器
 * @description 单个时间数字的显示容器样式
 */
.digit-container {
    width: 2.5rem;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/**
 * 时间分隔符
 * @description 时间中的冒号分隔符样式
 */
.time-separator {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    margin: 0 0.25rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    height: 3.5rem;
}

/**
 * 日期显示样式
 * @description 设置日期显示的字体大小、颜色和阴影效果
 */
.date-display {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/**
 * 移动设备的时间显示调整
 * @description 在小屏幕上减小时间数字和分隔符的大小
 */
@media (max-width: 767px) {
    .digit-container {
        width: 2.25rem;
        height: 3rem;
        font-size: 1.5rem;
        padding: 0.5rem;
    }
    
    .time-separator {
        font-size: 1.5rem;
        height: 3rem;
    }
}

/**
 * 桌面设备的时间显示调整
 * @description 在大屏幕上增大时间数字和分隔符的大小，并增加间距
 */
@media (min-width: 768px) {
    .time-digits {
        gap: 0.75rem;
    }
    
    .digit-container {
        width: 3rem;
        height: 4rem;
        font-size: 2rem;
        padding: 0.75rem;
    }
    
    .time-separator {
        font-size: 2rem;
        height: 4rem;
        margin: 0 0.5rem;
    }
}

/**
 * 天气显示容器
 * @description 天气信息的主要显示容器
 */
.weather-display {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/**
 * 天气主要信息
 * @description 显示天气主要信息（温度、图标等）的容器
 */
.weather-main-info {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

/**
 * 天气详情容器
 * @description 天气详情面板的外层容器
 */
.weather-details-container {
    width: 100%;
}

/**
 * 天气详情内容
 * @description 天气详情文本的样式设置
 */
.weather-details {
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4px;
    line-height: 1.4;
}

/**
 * 天气详情网格
 * @description 使用flex布局的天气详情网格，支持水平滚动
 */
.weather-details-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    text-align: center;
    overflow-x: auto;
    white-space: nowrap;
    padding: 12px 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/**
 * 天气详情项
 * @description 单个天气详情（如湿度、风力）的显示容器
 */
.weather-detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 75px;
    border: 1px solid rgba(255,255,255,0.08);
}

/**
 * 天气详情项悬停效果
 * @description 鼠标悬停时的上浮、背景变化和阴影效果
 */
.weather-detail-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-color: rgba(255,255,255,0.15);
}

/**
 * 天气图标样式
 * @description 天气详情中的图标样式设置
 */
.weather-icon {
    font-size: 18px;
    margin-bottom: 6px;
    color: #f0f0f0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/**
 * 天气详情标签
 * @description 天气详情项的标签样式（如"湿度"、"风力"）
 */
.weather-label {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/**
 * 天气详情数值
 * @description 天气详情项的数值样式（如"65%"、"3级"）
 */
.weather-value {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/**
 * 全宽天气详情项
 * @description 用于显示更新时间等需要占满整行的天气详情项
 */
.weather-detail-item.full-width {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.03) 100%);
    padding: 8px 12px;
    min-width: 100%;
    border: 1px dashed rgba(255,255,255,0.15);
    transition: all 0.3s ease;
}

/**
 * 移动设备的全宽天气详情项调整
 * @description 在小屏幕上调整全宽天气详情项的样式
 */
@media (max-width: 767px) {
    .weather-detail-item.full-width {
        padding: 6px 8px;
        gap: 6px;
        font-size: 0.9rem;
    }
    
    .weather-detail-item.full-width .weather-icon {
        font-size: 14px;
    }
    
    .weather-detail-item.full-width .weather-label {
        font-size: 10px;
    }
}

/**
 * 全宽天气详情项悬停效果
 * @description 全宽天气详情项的特殊悬停效果
 */
.weather-detail-item.full-width:hover {
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.08);
}

/**
 * 淡入动画类
 * @description 应用淡入动画效果的类选择器
 */
.animate-fadeIn, .fade-in {
    animation: fadeIn 0.6s ease forwards;
}

@media (max-width: 768px) {
    .weather-details-grid {
        gap: 10px;
        padding: 10px 6px;
        border-radius: 10px;
    }
    
    .weather-detail-item {
        padding: 10px 6px;
        min-width: 65px;
        border-radius: 6px;
    }
    
    .weather-icon {
        font-size: 16px;
        margin-bottom: 4px;
    }
    
    .weather-label {
        font-size: 10px;
        margin-bottom: 3px;
    }
    
    .weather-value {
        font-size: 12px;
    }
    
    .weather-detail-item.full-width {
        padding: 6px 8px;
    }
}

@media (max-width: 480px) {
    .weather-details-grid {
        gap: 8px;
        padding: 8px 4px;
        justify-content: flex-start;
        border-radius: 8px;
    }
    
    .weather-detail-item {
        padding: 8px 4px;
        min-width: 60px;
        border-radius: 6px;
    }
    
    .weather-icon {
        font-size: 14px;
        margin-bottom: 3px;
    }
    
    .weather-label {
        font-size: 9px;
        margin-bottom: 2px;
    }
    
    .weather-value {
        font-size: 11px;
    }
    
    .weather-detail-item.full-width {
        padding: 5px 6px;
    }
}

/**
 * 音乐盒样式
 * @description 音乐播放器容器的边框样式
 */
.music-box {
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/**
 * 音乐库滚动条宽度
 * @description 自定义音乐库容器的滚动条宽度
 */
.music-library::-webkit-scrollbar {
    width: 4px;
}

/**
 * 音乐库滚动条滑块
 * @description 自定义音乐库容器滚动条滑块的样式
 */
.music-library::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/**
 * 播放模式按钮过渡效果
 * @description 播放模式切换按钮的过渡效果设置
 */
.play-mode-btn {
    transition: all 0.3s ease;
}

/**
 * 激活的播放模式按钮
 * @description 当前选中的播放模式按钮样式
 */
.play-mode-btn.active-mode {
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/**
 * 标题滚动动画
 * @description 定义音乐标题滚动动画的关键帧
 */
@keyframes scrollTitle {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/**
 * 滚动标题应用
 * @description 为标题容器中的滚动元素应用动画
 */
.title-container .scroll {
    animation: scrollTitle 10s linear infinite;
}

/**
 * 功能模块样式
 * @description 功能网格中每个功能模块的样式设置
 */
.function-module {
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    user-select: none;
}

/**
 * 联系模块样式
 * @description 联系信息模块的边框样式
 */
.contact-module {
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/**
 * 联系链接样式
 * @description 联系信息链接的样式设置
 */
.contact-link {
    color: inherit;
    text-decoration: none;
}

/**
 * 通知组件样式
 * @description 系统通知组件的z-index和边框样式
 */
.notification {
    z-index: 999;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/**
 * 内容模块基础样式
 * @description 所有内容模块的通用过渡效果和阴影
 */
.content-module {
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/**
 * 内容模块悬停效果
 * @description 鼠标悬停时增强阴影效果
 */
.content-module:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/**
 * 按钮基础样式重置
 * @description 重置所有按钮的默认样式
 */
button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

/**
 * 范围滑块自定义样式
 * @description 自定义WebKit浏览器中范围滑块（音量、进度条）的滑块样式
 */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .functions-grid .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .functions-grid .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .info-module {
        padding: 4px;
    }
    
    .quote-text {
        font-size: 1rem;
    }
    
    .time-display, .weather-display {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0.5rem;
    }
    
    .logo-img {
        width: 80px;
        height: 80px;
    }
    
    .music-box {
        padding: 4px;
    }
}

/**
 * 淡入动画关键帧
 * @description 定义元素淡入动画的详细关键帧
 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * 淡入动画应用
 * @description 为元素应用淡入动画的类
 */
.fade-in {
    animation: fadeIn 0.6s ease forwards;
}