/* ==========================================================
   04-theme.css: 背景、效果、全局视觉样式
   ========================================================== */

/* 星云/星空背景效果 */
/* The following body::before and body::after rules should be REMOVED */
/*
body::before {
    content: "";
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top, var(--nebula-blue), transparent 70%),
                radial-gradient(ellipse at bottom, var(--nebula-purple), transparent 70%),
                linear-gradient(to right, var(--space-black) 0%, var(--dark-bg) 50%, var(--space-black) 100%);
    z-index: -10; 
    pointer-events: none;
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.9) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(2px 2px at 50% 50%, rgba(255, 255, 255, 0.7) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(1px 1px at 30% 20%, rgba(255, 255, 255, 0.7) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(1px 1px at 70% 90%, rgba(255, 255, 255, 0.9) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(1px 1px at 90% 15%, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(1px 1px at 15% 80%, rgba(255, 255, 255, 0.7) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(1px 1px at 60% 85%, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    background-repeat: repeat;
    background-size: 800px 800px; 
    opacity: 0.15; 
    z-index: -9; 
    pointer-events: none;
    animation: twinkle 60s linear infinite alternate;
}
*/
/* END OF REMOVED body::before and body::after */

@keyframes twinkle { /* 星星位移动画 */
   from { background-position: 0 0; }
   to { background-position: -100px 100px; }
}

/* 基础 Section 主题 */
.section-dark,
.section-light {
    /* background-color: transparent; */ /* 已移除透明背景，因为 section 现在是背景容器 */
    color: var(--text-light);
    padding-top: 80px; /* 为作为背景容器的 section 添加内边距 */
    padding-bottom: 80px; /* 为作为背景容器的 section 添加内边距 */
}

/* 新增: 背景容器类 */
.bg-starry-sky,
.bg-dawn-sky {
    position: relative;
    overflow: hidden;
    color: var(--text-light);
}

/* 星空背景 (从 body 伪元素重构) */
.bg-starry-sky::before {
    content: "";
    position: absolute; /* 固定背景 (效果上，现在是固定于 section) */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top, var(--nebula-blue), transparent 70%), /* 顶部星云蓝 */
                radial-gradient(ellipse at bottom, var(--nebula-purple), transparent 70%), /* 底部星云紫 */
                linear-gradient(to right, var(--space-black) 0%, var(--dark-bg) 50%, var(--space-black) 100%); /* 基础深色渐变 */
    z-index: -2; /* 置于 ::after 之下, 内容之后 */
    pointer-events: none; /* 不干扰鼠标事件 */
}

.bg-starry-sky::after {
    content: "";
    position: absolute; /* 固定背景 (效果上，现在是固定于 section) */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.9) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(2px 2px at 50% 50%, rgba(255, 255, 255, 0.7) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(1px 1px at 30% 20%, rgba(255, 255, 255, 0.7) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(1px 1px at 70% 90%, rgba(255, 255, 255, 0.9) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(1px 1px at 90% 15%, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(1px 1px at 15% 80%, rgba(255, 255, 255, 0.7) 0%, rgba(0, 0, 0, 0) 100%),
        radial-gradient(1px 1px at 60% 85%, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    background-repeat: repeat;
    background-size: 800px 800px; /* 星星重复的尺寸 */
    opacity: 0.15; /* 星星透明度 */
    z-index: -1; /* 在 ::before 之上, 内容之下 */
    pointer-events: none; /* 不干扰鼠标事件 */
    animation: twinkle 60s linear infinite alternate; /* 保留星星闪烁动画 */
}

/* 初晓天际背景 */
.bg-dawn-sky::before { /* 初晓天际主渐变 */
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(170deg, 
        hsl(255, 60%, 25%), /* 深靛蓝/紫色 - 顶部 */
        hsl(310, 60%, 45%), /* 鲜艳品红/玫瑰粉 - 中部 */
        hsl(25, 85%, 60%),  /* 暖橙色 - 中下部 */
        hsl(45, 90%, 75%)   /* 淡金色/亮黄色 - 底部/地平线 */
    );
    z-index: -2; 
    pointer-events: none;
}

.bg-dawn-sky::after { /* 可选: 微妙的黎明效果 */
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: 
        linear-gradient(to bottom, 
            hsla(40, 100%, 90%, 0.05) 0%, 
            hsla(40, 100%, 90%, 0.15) 20%, 
            hsla(30, 100%, 80%, 0.1) 40%, 
            transparent 70%),
        radial-gradient(ellipse at 50% 80%, hsla(50, 100%, 85%, 0.2), transparent 70%); /* 地平线附近的太阳光晕 */
    opacity: 0.9;
    z-index: -1; 
    pointer-events: none;
}

/* 确保 section 内的内容在伪元素之上 */
.section-dark > .container,
.section-light > .container,
header#home > nav,
header#home > .hero {
    position: relative;
    z-index: 1;
}

/* 确保 header 自身可以作为背景容器 */
header#home {
    position: relative;
    overflow: hidden;
}

/* 标题样式 (全局) */
.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    color: var(--secondary-color); /* 金色标题 */
    text-shadow: var(--title-text-shadow); /* 标题阴影 */
}

.section-title:after { /* 标题下划线装饰 */
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, rgba(230, 213, 138, 0.3), var(--secondary-color), rgba(230, 213, 138, 0.3)); /* 金色渐变 */
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(230, 213, 138, 0.5); /* 增强光晕 */
}

/* 玻璃容器效果 (可按需应用) */
.glass-container-effect {
    background: rgba(13, 16, 25, 0.6); /* 深色半透明背景 */
    border-radius: var(--card-radius); /* 圆角 */
    backdrop-filter: blur(8px); /* 背景模糊 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), /* 外阴影 */
                inset 0 1px 1px rgba(255, 255, 255, 0.05); /* 内阴影 */
    border: 1px solid var(--glass-border); /* 金色边框 */
    padding: 30px; /* 内边距 */
    position: relative;
    overflow: hidden;
    margin-bottom: 40px; /* 与下方元素的间距 */
}

.glass-container-effect::before { /* 顶部高光 */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

/* 滚动条样式 */
::-webkit-scrollbar { /* Webkit 浏览器 (Chrome, Safari) */
  width: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(13, 16, 25, 0.5); /* 滚动条轨道背景 */
}
::-webkit-scrollbar-thumb {
  background-color: var(--glass-border); /* 滚动条滑块颜色 */
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--glass-border-hover); /* 悬停时颜色 */
}
* { /* Firefox 浏览器 */
  scrollbar-width: thin; /* 细滚动条 */
  scrollbar-color: var(--glass-border) rgba(13, 16, 25, 0.5); /* 滑块和轨道颜色 */
}