/* =========================================
   1. 变量定义
   ========================================= */
:root {
    /* 亮色模式背景图 */
    --home-bg-image: url('../images/home_bg_light.png'); 
    --hero-height: 100vh;
}

/* 暗黑模式适配 */
[data-md-color-scheme="slate"] {
    --home-bg-image: url('../images/home_bg_dark.png'); 
}

/* =========================================
   2. 导航栏透明化处理 (强力版)
   ========================================= */
.transparent-header {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.transparent-header .md-tabs {
    background-color: transparent !important;
    background: transparent !important;
}

.transparent-header .md-header__title, 
.transparent-header .md-tabs__link,
.transparent-header .md-header__button {
    text-shadow: 0 1px 3px rgba(0,0,0,0.6); 
    color: #fff !important; 
}

/* =========================================
   3. 修复“返回顶部”按钮层级 (Bug Fix)
   ========================================= */
.md-top {
    /* 关键修复：原主题 z-index 较低，被我们的 hero 和 container 盖住了。
       这里设置为 100，确保它永远在最上层，可点击且可见。 */
    z-index: 100 !important;
    
    /* 可选：为了让它在图片上更明显，可以加一点阴影 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* =========================================
   4. Hero 区域
   ========================================= */
.mdx-hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--hero-height);
    z-index: 0; 
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform; 
}

/* 背景图片层 */
.mdx-hero__layer--bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--home-bg-image);
    background-size: cover;
    background-position: center;
    z-index: 1;
    will-change: transform, opacity;
}

/* =========================================
   5. 统一蒙版效果 (Dark & Light)
   ========================================= */

/* --- 暗黑模式 (Slate) --- */
[data-md-color-scheme="slate"] .mdx-hero__layer--bg {
    /* 底部羽化：80%处开始变透明，100%完全透明 */
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* --- 浅色模式 (Default) - 现已启用蒙版 --- */
[data-md-color-scheme="default"] .mdx-hero__layer--bg {
    /* 同样启用底部羽化，效果统一 */
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

/* 彻底移除旧的覆盖层 */
.mdx-hero__overlay {
    display: none !important;
}

/* 首页大字内容 */
.mdx-hero__content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8); 
    will-change: transform, opacity;
    margin-top: -5vh; 
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.hero-subtitle {
    font-size: 1.5rem;
    opacity: 0.95;
    font-weight: 500;
}

/* 跳动箭头 */
.mdx-hero__scroll-down {
    position: absolute;
    bottom: 50px; 
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    z-index: 10;
    cursor: pointer;
    animation: bounce 2s infinite;
    opacity: 0.9;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);}
  40% {transform: translateX(-50%) translateY(-10px);}
  60% {transform: translateX(-50%) translateY(-5px);}
}

/* =========================================
   6. Content 区域 (正文)
   ========================================= */
.mdx-container {
    position: relative;
    z-index: 10; 
    width: 100%;
    max-width: 1400px; /* 防止在大屏幕上过宽 */
    min-height: 100vh;
    margin: 99.8vh auto 0 auto; 
    display: block;
}

/* --- 浅色模式：改为透明背景 --- */
[data-md-color-scheme="default"] .mdx-container {
    /* 之前是白色，现在改为透明，配合上面的蒙版，
       让图片自然淡出到底部的背景色（通常是浅灰色）中 */
    background-color: transparent; 
    box-shadow: none; 
}

/* --- 暗黑模式：透明背景 --- */
[data-md-color-scheme="slate"] .mdx-container {
    background-color: transparent; 
}

.content-wrapper {
    padding: 4rem 1rem;
    padding-bottom: 8rem;
    background: transparent;
}

/* =========================================
   7. 动画相关
   ========================================= */
.scroll-animate-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.md-sidebar { display: none !important; }