/* 定义CSS变量：统一管理重复使用的颜色、间距、圆角等，便于全局修改和维护 */
:root {
    /* 颜色变量：基于白色的半透明色，数值表示不透明度（0.05=5%） */
    --white-5: rgba(255, 255, 255, 0.05);    /* 5%白色透明度（最浅） */
    --white-10: rgba(255, 255, 255, 0.1);   /* 10%白色透明度（常用背景） */
    --white-15: rgba(255, 255, 255, 0.15);  /* 15%白色透明度（选中状态） */
    --white-20: rgba(255, 255, 255, 0.2);   /* 20%白色透明度（边框） */
    --white-30: rgba(255, 255, 255, 0.3);   /* 30%白色透明度（滚动条/边框） */
    --white-50: rgba(255, 255, 255, 0.5);   /* 50%白色透明度（悬停滚动条） */
    --red-accent: #ff4d4f;                  /* 强调色：公益链接红色 */
    
    /* 圆角变量：按尺寸分类，统一风格 */
    --radius-sm: 8px;    /* 小圆角（图标、小卡片） */
    --radius-md: 10px;   /* 中圆角（卡片、视频） */
    --radius-lg: 20px;   /* 大圆角（主窗口） */
    
    /* 过渡动画变量：统一所有元素的过渡效果，保持动画一致性 */
    --transition: all 0.3s ease;
    
    /* 间距变量：按尺寸分类，控制元素间距离 */
    --gap-sm: 5px;       /* 小间距（图标与文字） */
    --gap-md: 15px;      /* 中间距（导航项、卡片内元素） */
    --gap-lg: 20px;      /* 大间距（卡片间、区域间） */
    --gap-xl: 30px;      /* 超大间距（主要区域分隔） */
}

/* 全局样式重置：清除所有元素默认的margin和padding，避免浏览器默认样式差异 */
* {
    margin: 0;           /* 清除默认外边距 */
    padding: 0;          /* 清除默认内边距 */
    box-sizing: border-box;  /* 盒模型设置为border-box：宽度=内容+内边距+边框（避免尺寸计算偏差） */
}

/* 页面基础样式：控制整个页面的布局和默认样式 */
body {
    font-family: 'Arial', sans-serif;  /* 全局字体：Arial（无衬线字体，显示清晰） */
    overflow: hidden;                  /* 隐藏页面整体滚动条（避免外层滚动干扰内部内容） */
    height: 100vh;                     /* 页面高度=视口高度（占满屏幕） */
    display: flex;                     /* 使用flex布局 */
    justify-content: center;           /* 水平居中对齐子元素（使主窗口居中） */
    align-items: center;               /* 垂直居中对齐子元素（使主窗口居中） */
    background-color: #000;            /* 页面背景色：黑色（与毛玻璃效果搭配） */
}


/* ==================== 背景样式 ==================== */
.background {
    position: fixed;       /* 固定定位：脱离文档流，覆盖整个屏幕 */
    top: 0;                /* 顶部与视口顶部对齐 */
    left: 0;               /* 左侧与视口左侧对齐 */
    width: 100%;           /* 宽度=100%视口宽度 */
    height: 100%;          /* 高度=100%视口高度 */
    background-size: cover; /* 背景图自适应：覆盖容器且保持比例（不拉伸） */
    background-position: center; /* 背景图居中显示（避免关键部分被裁剪） */
    z-index: -1;           /* 层级=-1：置于所有内容下方（不遮挡内容） */
    filter: blur(2px) brightness(0.7); /* 背景图效果：模糊2px（弱化背景）+ 亮度70%（增强文字可读性） */
}


/* ==================== 毛玻璃主窗口 ==================== */
.frosted-glass {
    width: 80%;            /* 宽度=80%父容器（父容器为body，即80%视口宽度） */
    max-width: 1200px;     /* 最大宽度=1200px（避免大屏幕上过宽） */
    height: 80vh;          /* 高度=80%视口高度 */
    background: var(--white-10); /* 背景：10%白色透明度（毛玻璃底色） */
    -webkit-backdrop-filter: blur(15px); /* Safari兼容：毛玻璃模糊效果（15px模糊度） */
    backdrop-filter: blur(15px); /* 毛玻璃核心效果：模糊背景内容（15px模糊度） */
    border-radius: var(--radius-lg); /* 圆角：20px（大圆角，增强现代感） */
    border: 1px solid var(--white-20); /* 边框：1px实线+20%白色透明度（增强边框层次感） */
    box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.3); /* 阴影：x=0,y=12px,模糊30px,透明度30%（增强立体感） */
    overflow: hidden;      /* 隐藏溢出内容（避免内部元素超出窗口） */
    display: flex;         /* 使用flex布局（垂直方向排列子元素） */
    flex-direction: column; /* 子元素垂直排列（从上到下：头部→导航→内容） */
    transition: var(--transition); /* 过渡效果：所有属性变化时0.3s平滑过渡（悬停动画） */
}


/* ==================== 响应式断点优化 ==================== */
/* 电脑端样式（屏幕宽度≥800px） */
@media (min-width: 800px) {
    .frosted-glass {
        max-height: 90vh; /* 最大高度=90%视口高度（大屏幕显示更多内容） */
    }
}

/* 平板样式（屏幕宽度576px~799px） */
@media (min-width: 576px) and (max-width: 799px) {
    .websites-container,  /* 网站卡片容器 */
    .project-list {       /* 项目卡片容器 */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 网格列：最小宽度200px，自动填充（适配平板宽度） */
    }
}

/* 移动端样式（屏幕宽度≤575px） */
@media (max-width: 575px) {
    .frosted-glass {
        width: 95%;       /* 宽度=95%视口宽度（贴近屏幕边缘，利用空间） */
        height: 80vh;     /* 高度=90%视口高度（显示更多内容） */
    }
    
    .folder-tab {         /* 导航按钮 */
        min-width: 60px;  /* 最小宽度=60px（避免按钮过宽挤压） */
        padding: 10px 12px; /* 内边距：上下10px,左右12px（减小间距，适配小屏幕） */
    }
    
    .folder-icon {          /* 导航图标 */
    width: 24px;        /* 控制图标大小 */
    height: 24px;       /* 图标大小=20px（减小图标，适配小屏幕） */
    fill: white;        /* 填充颜色（如果SVG没有硬编码颜色） */
    transition: fill 0.3s; /* 悬停效果过渡 */
    }
    
    .tab-content {
        padding: 15px;
    }
    
    .home-video {
        width: 90%;
    }
}


/* ==================== 顶部区域（Logo+标题） ==================== */
.header {
    display: flex;        /* 使用flex布局（水平排列子元素） */
    align-items: center;  /* 子元素垂直居中对齐（Logo与标题对齐） */
    gap: var(--gap-md);   /* 子元素间距=15px（Logo与标题的距离） */
    padding: 20px;        /* 内边距=20px（上下左右留白） */
    background: var(--white-10); /* 背景：10%白色透明度（与主窗口呼应） */
    border-bottom: 1px solid var(--white-10); /* 下边框：1px实线+10%白色透明度（分隔头部与导航） */
    flex-shrink: 0;       /* 不允许压缩（保持自身高度，不被内容区域挤压） */
    min-height: 60px;     /* 最小高度=60px（确保内容不溢出，同时允许内容撑开高度） */
}

.logo {
    width: 40px;          /* Logo宽度=40px */
    height: 40px;         /* Logo高度=40px（正方形） */
    border-radius: var(--radius-sm); /* 圆角=8px（小圆角，与Logo尺寸匹配） */
}

.header h2 {
    color: white;         /* 文字颜色：白色（与深色背景对比，增强可读性） */
    font-size: 1.375rem;  /* 字体大小=22px（1rem=16px，1.375×16=22） */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 文字阴影：x=0,y=1px,模糊2px,透明度30%（增强文字立体感） */
}


/* ==================== 文件夹导航（标签栏） ==================== */
.folder-nav {
    display: flex;        /* 使用flex布局（水平排列导航按钮） */
    border-bottom: 1px solid var(--white-10); /* 下边框：1px实线+10%白色透明度（分隔导航与内容） */
    overflow-x: auto;     /* 水平溢出时显示滚动条（导航按钮过多时可横向滚动） */
    scrollbar-width: none; /* Firefox：隐藏滚动条（美观） */
    flex-shrink: 0;       /* 不允许压缩（保持高度，不被内容区域挤压） */
    min-height: 60px;     /* 最小高度=60px（确保按钮内容不溢出） */
}

.folder-nav::-webkit-scrollbar {
    display: none;
}

.folder-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 10px;
    min-width: 80px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    transition: var(--transition);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.folder-tab:hover {
    background: var(--white-5);
}

.folder-tab.active {
    background: var(--white-15);
    border-bottom: 2px solid #fff;
}

.folder-icon {
  width: 24px;
  height: 24px;
  fill: white;
  transition: fill 0.3s;
  margin-bottom: var(--gap-sm);
}


/* ==================== 内容区域（标签页内容） ==================== */
.content-container {
    flex-grow: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--white-30) transparent;
}

.content-container::-webkit-scrollbar {
    width: 8px;
}

.content-container::-webkit-scrollbar-track {
    background: transparent;
}

.content-container::-webkit-scrollbar-thumb {
    background-color: var(--white-30);
    border-radius: 4px;
}

.content-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--white-50);
}

.tab-content {
    padding: 30px;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    display: none;
}

.tab-content.active {
    display: block;
}

/* ==================== 主窗口悬停效果 ==================== */
.frosted-glass:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px 0 rgba(0, 0, 0, 0.4);
}

/* ==================== 页脚样式 ==================== */
.footer {
    padding: 10px;
    background: var(--white-10);
    border-top: 1px solid var(--white-10);
    flex-shrink: 0;
    min-height: 40px;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 30px 30px 30px 30px;
    margin-top: 30px;
    overflow: hidden;
}

/* 桌面端：正常布局，不滚动 */
.footer-content {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    white-space: nowrap;
}

/* 移动端：启用轮播 */
@media (max-width: 768px) {
    .footer-content {
        justify-content: flex-start;
        align-items: center;
        display: flex;
        white-space: nowrap;
        animation: carousel 8s linear infinite;
    }
    
    /* 悬停时暂停轮播 */
    .footer-content:hover {
        animation-play-state: paused;
    }
    
    /* 滚动动画定义 */
    @keyframes carousel {
        0% {
            transform: translateX(50%);
        }
        100% {
            transform: translateX(-100%);
        }
    }
    
    /* 复制内容以实现无缝滚动 */
    .footer-content::after {
        content: attr(data-content);
        display: inline-block;
        margin-left: 20px;
    }
}

/* 页脚内链接样式 */
.footer a {
    margin: 0 5px;
    text-decoration: none;
    transition: color 0.3s;
    display: inline-block;
}

.footer a:hover {
    color: #ffcc00;
    text-decoration: underline;
}