/* ========================================================================
   css/style.css
   自定义样式表 (Custom Stylesheet) - Mobile Optimized
   ======================================================================== */

/* 0. 全局设置 & 安全区域变量 */
:root {
    /* 定义 CSS 变量以便在 calc() 中使用 */
    --safe-top: env(safe-area-inset-top, 20px);
    --safe-bottom: env(safe-area-inset-bottom, 20px);
}

html {
    -webkit-text-size-adjust: 100%; /* 防止横屏时字体自动放大 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 1. 隐藏滚动条 (Hide Scrollbar) */
.scrollbar-hide::-webkit-scrollbar {
    display: none; 
}
.scrollbar-hide {
    -ms-overflow-style: none; 
    scrollbar-width: none;    
}

/* 2. 玻璃拟态 (Glassmorphism) */
.glass {
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(24px);           
    -webkit-backdrop-filter: blur(24px);   
    border: 1px solid rgba(255, 255, 255, 0.08); 
}

/* 3. 噪点纹理 (Noise Texture) */
.bg-noise {
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
}

/* ============================================================
   4. 微交互：响应式卡片逻辑 (Responsive Interaction)
   ============================================================ */

.project-card {
    transition-property: transform, opacity, filter, border-color;
    transition-duration: 0.4s; /* 移动端动画加快，感觉更跟手 */
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 1;
    will-change: transform;
    -webkit-tap-highlight-color: transparent; /* 关键：去掉安卓/iOS点击时的蓝色高亮块 */
    touch-action: manipulation; /* 优化点击响应速度 */
}

/* --- 仅在电脑端 (有鼠标) 启用高级悬停特效 --- */
@media (hover: hover) and (pointer: fine) {
    .project-card {
        transition-duration: 0.5s; /* 电脑端保持优雅的慢速过渡 */
    }

    /* 容器悬停时 -> 其他卡片变暗 */
    .hover-group:hover .project-card {
        opacity: 0.4;
        filter: blur(3px) grayscale(40%);
        transform: scale(0.96);
    }

    /* 当前选中 -> 放大浮起 */
    .hover-group .project-card:hover {
        opacity: 1 !important;
        filter: blur(0) grayscale(0%) !important;
        transform: scale(1.03) !important;
        z-index: 50 !important;
        border-color: rgba(255,255,255,0.5);
    }
}

/* --- 移动端 (触屏) 交互逻辑 --- */
/* 手机上不需要其他卡片变暗，只需要当前点击的卡片有“按压感” */
.project-card:active {
    transform: scale(0.96); 
    opacity: 0.9;
}

/* ========================================================================
   5. Markdown 文章排版 (Typography)
   针对移动端阅读进行了大幅优化：减小标题尺寸，增加正文行距
   ======================================================================== */

.prose {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.75; 
    font-size: 1rem;  
}

/* 平板和电脑端放大字号 */
@media (min-width: 768px) {
    .prose {
        line-height: 1.8;
        font-size: 1.125rem;
    }
}

/* 标题通用设置 */
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: #ffffff;
    font-weight: 700;
    line-height: 1.3;
    scroll-margin-top: 100px; /* 锚点定位偏移 */
}

/* H1 一级标题 */
.prose h1 {
    font-size: 1.75em; 
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 0.3em;
}

@media (min-width: 768px) {
    .prose h1 { font-size: 2.5em; margin-top: 2em; }
}

/* H2 二级标题 */
.prose h2 {
    font-size: 1.4em;
    color: #a78bfa; /* 紫色高亮 */
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}
@media (min-width: 768px) {
    .prose h2 { font-size: 1.8em; margin-top: 2.5em; }
}

/* H3 三级标题 */
.prose h3 {
    font-size: 1.2em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
@media (min-width: 768px) {
    .prose h3 { font-size: 1.4em; }
}

/* 段落 */
.prose p {
    margin-bottom: 1.5em;
    text-align: justify; /* 移动端两端对齐，消除右侧参差不齐 */
}

/* 列表 */
.prose ul, .prose ol {
    padding-left: 1.2em;
    margin-bottom: 1.5em;
}

.prose li {
    margin-bottom: 0.5em;
    color: rgba(255,255,255,0.75);
    padding-left: 0.2em;
}

.prose strong {
    color: #fff;
    font-weight: 700;
}

/* 引用块 - 移动端样式优化 */
.prose blockquote {
    border-left: 3px solid #7c3aed;
    margin: 1.5em 0;
    background: rgba(255,255,255,0.03);
    padding: 1rem;
    border-radius: 0 12px 12px 0;
    color: rgba(255,255,255,0.6);
    font-style: italic;
}

/* 图片 - 增加圆角和边框 */
.prose img {
    border-radius: 12px;
    margin: 2em auto;
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

/* 视频容器 */
.prose iframe {
    width: 100%;
    aspect-ratio: 16/9; 
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    margin: 2em 0;
}

/* 链接 */
.prose a {
    color: #c4b5fd;
    text-decoration: none;
    border-bottom: 1px dashed rgba(167, 139, 250, 0.5);
    transition: all 0.2s;
    word-break: break-all;
}
.prose a:hover {
    color: #fff;
    border-bottom-style: solid;
}

/* 代码块 */
.prose code {
    background: rgba(255,255,255,0.1);
    padding: 0.2em 0.4em;
    border-radius: 6px;
    font-size: 0.85em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #e9d5ff;
}

.prose pre {
    background: #111;
    padding: 1em;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow-x: auto;
    margin-bottom: 1.5em;
}
.prose pre code {
    background: transparent;
    padding: 0;
    color: #ccc;
    font-size: 0.9em;
}

/* ============================================================
   6. 高级定制滚动条 (Premium Custom Scrollbar)
   ============================================================ */
/* 仅在电脑端显示自定义滚动条，手机端使用系统原生（体验更好） */
@media (min-width: 768px) {
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent; 
        margin: 4px 0;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 99px;
        backdrop-filter: blur(4px);
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
        cursor: pointer;
    }
    .custom-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
}