/* ============================================================
   style.css — 文艺感灰黑配色导航页样式
   设计理念：高级沉稳、层次丰富、如可交互纪录片般沉浸
   ============================================================ */

/* ==================== CSS 自定义属性 ==================== */
:root {
    /* 基础灰黑配色 */
    --color-bg-deep: #111111;
    --color-bg-surface: #1a1a1a;
    --color-bg-elevated: #222222;
    --color-bg-hover: #2a2a2a;

    /* 文字色阶 */
    --color-text-primary: #e8e4e0;
    --color-text-secondary: #b0aca8;
    --color-text-muted: #6e6a66;

    /* 边框与装饰 */
    --color-border-subtle: rgba(255, 255, 255, 0.06);
    --color-border-medium: rgba(255, 255, 255, 0.10);
    --color-border-accent: rgba(255, 255, 255, 0.18);

    /* 暖光色调（日出时段使用） */
    --color-warm-glow: rgba(210, 160, 110, 0.25);
    --color-warm-glow-strong: rgba(200, 145, 90, 0.40);
    --color-warm-particle: rgba(220, 180, 130, 0.6);

    /* 星空色调（日落时段使用） */
    --color-star-bright: rgba(255, 255, 255, 0.85);
    --color-star-medium: rgba(220, 225, 240, 0.55);
    --color-star-dim: rgba(180, 190, 210, 0.35);

    /* 间距系统 */
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 72px;

    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;

    /* 阴影层级 */
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);

    /* 过渡 */
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 180ms;
    --duration-normal: 350ms;
    --duration-slow: 600ms;
    --duration-glacial: 1000ms;

    /* 字体 */
    --font-display: "PingFang SC", "Noto Serif SC", "STSong", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, "Times New Roman", serif;
    --font-body: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
}

/* ==================== 基础重置 ==================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-deep);
    color: var(--color-text-primary);
    min-height: 100vh;
    line-height: 1.6;
    /* 主容器提供3D透视基准 */
    perspective: 1200px;
    perspective-origin: center center;
    overflow-x: hidden;
    position: relative;
    /* 默认过渡（主题切换时平滑变化） */
    transition: background-color 1.2s var(--ease-smooth);
}

/* ==================== 智能氛围背景层 ==================== */
.ambient-backdrop {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    transition: opacity 1.4s var(--ease-smooth), background 1.4s var(--ease-smooth);
    will-change: background, opacity;
}

/* 日出时段 — 暖黄柔光（由JS添加class触发） */
body.theme-daylight .ambient-backdrop {
    background:
        /* 主暖光 — 从顶部洒下的柔和暖黄光晕 */
        radial-gradient(ellipse 80% 55% at 50% 18%,
            rgba(200, 150, 100, 0.28) 0%,
            rgba(180, 130, 80, 0.12) 35%,
            transparent 70%),
        /* 次级光晕 — 中上部的暖色渐变 */
        radial-gradient(ellipse 60% 40% at 35% 40%,
            rgba(190, 140, 90, 0.10) 0%,
            transparent 60%),
        radial-gradient(ellipse 50% 35% at 65% 50%,
            rgba(200, 150, 105, 0.08) 0%,
            transparent 55%),
        /* 灰黑基底 */
        linear-gradient(175deg, #1c1a18 0%, #1a1816 30%, #141312 100%);
}

/* 日落时段 — 深邃星空（由JS添加class触发） */
body.theme-night .ambient-backdrop {
    background:
        /* 星空 — 散布的星点（纯CSS radial-gradient 模拟） */
        radial-gradient(1.2px 1.2px at 8% 12%, var(--color-star-bright), transparent),
        radial-gradient(1.0px 1.0px at 22% 7%, var(--color-star-medium), transparent),
        radial-gradient(1.5px 1.5px at 35% 18%, var(--color-star-bright), transparent),
        radial-gradient(0.8px 0.8px at 48% 5%, var(--color-star-dim), transparent),
        radial-gradient(1.3px 1.3px at 55% 22%, var(--color-star-medium), transparent),
        radial-gradient(0.9px 0.9px at 68% 9%, var(--color-star-bright), transparent),
        radial-gradient(1.1px 1.1px at 75% 25%, var(--color-star-dim), transparent),
        radial-gradient(1.6px 1.6px at 85% 14%, var(--color-star-medium), transparent),
        radial-gradient(0.7px 0.7px at 12% 30%, var(--color-star-dim), transparent),
        radial-gradient(1.0px 1.0px at 28% 35%, var(--color-star-medium), transparent),
        radial-gradient(1.4px 1.4px at 42% 28%, var(--color-star-bright), transparent),
        radial-gradient(0.6px 0.6px at 58% 33%, var(--color-star-dim), transparent),
        radial-gradient(1.2px 1.2px at 72% 38%, var(--color-star-medium), transparent),
        radial-gradient(0.8px 0.8px at 90% 20%, var(--color-star-dim), transparent),
        radial-gradient(1.3px 1.3px at 15% 45%, var(--color-star-medium), transparent),
        radial-gradient(0.9px 0.9px at 33% 50%, var(--color-star-dim), transparent),
        radial-gradient(1.5px 1.5px at 50% 42%, var(--color-star-bright), transparent),
        radial-gradient(0.7px 0.7px at 63% 48%, var(--color-star-dim), transparent),
        radial-gradient(1.1px 1.1px at 78% 52%, var(--color-star-medium), transparent),
        radial-gradient(0.5px 0.5px at 88% 40%, var(--color-star-dim), transparent),
        /* 深空底色 — 深蓝灰渐变 */
        linear-gradient(180deg, #0a0c14 0%, #0d0f18 25%, #0b0d15 50%, #090b12 100%);
}

/* 系统暗色模式 + 日落时段 → 星空更深邃 */
@media (prefers-color-scheme: dark) {
    body.theme-night .ambient-backdrop {
        background:
            radial-gradient(1.2px 1.2px at 8% 12%, rgba(255, 255, 255, 0.9), transparent),
            radial-gradient(1.0px 1.0px at 22% 7%, rgba(220, 225, 240, 0.65), transparent),
            radial-gradient(1.5px 1.5px at 35% 18%, rgba(255, 255, 255, 0.88), transparent),
            radial-gradient(0.8px 0.8px at 48% 5%, rgba(200, 210, 225, 0.45), transparent),
            radial-gradient(1.3px 1.3px at 55% 22%, rgba(230, 235, 245, 0.6), transparent),
            radial-gradient(0.9px 0.9px at 68% 9%, rgba(255, 255, 255, 0.85), transparent),
            radial-gradient(1.1px 1.1px at 75% 25%, rgba(190, 200, 220, 0.4), transparent),
            radial-gradient(1.6px 1.6px at 85% 14%, rgba(225, 230, 242, 0.58), transparent),
            radial-gradient(0.7px 0.7px at 12% 30%, rgba(185, 195, 215, 0.38), transparent),
            radial-gradient(1.0px 1.0px at 28% 35%, rgba(210, 218, 235, 0.5), transparent),
            radial-gradient(1.4px 1.4px at 42% 28%, rgba(255, 255, 255, 0.82), transparent),
            radial-gradient(0.6px 0.6px at 58% 33%, rgba(175, 185, 205, 0.35), transparent),
            radial-gradient(1.2px 1.2px at 72% 38%, rgba(215, 222, 238, 0.52), transparent),
            radial-gradient(0.8px 0.8px at 90% 20%, rgba(180, 190, 210, 0.4), transparent),
            radial-gradient(1.3px 1.3px at 15% 45%, rgba(205, 212, 230, 0.48), transparent),
            radial-gradient(0.9px 0.9px at 33% 50%, rgba(170, 180, 200, 0.32), transparent),
            radial-gradient(1.5px 1.5px at 50% 42%, rgba(245, 248, 255, 0.78), transparent),
            radial-gradient(0.7px 0.7px at 63% 48%, rgba(160, 172, 195, 0.3), transparent),
            radial-gradient(1.1px 1.1px at 78% 52%, rgba(195, 202, 222, 0.45), transparent),
            radial-gradient(0.5px 0.5px at 88% 40%, rgba(155, 168, 190, 0.28), transparent),
            linear-gradient(180deg, #05070d 0%, #080a12 25%, #060810 50%, #04060c 100%);
    }
}

/* ==================== 粒子层（闪烁星点 / 暖光微尘） ==================== */
.particle-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 1.2s var(--ease-smooth);
    will-change: opacity, transform;
}

/* 日落时段 — 白色闪烁星点 */
body.theme-night .particle {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 70%);
    animation: twinkle var(--twinkle-duration, 3s) ease-in-out infinite;
    animation-delay: var(--twinkle-delay, 0s);
}

/* 日出时段 — 暖色微尘光点 */
body.theme-daylight .particle {
    background: radial-gradient(circle, var(--color-warm-particle) 0%, transparent 70%);
    animation: warmDrift var(--drift-duration, 6s) ease-in-out infinite;
    animation-delay: var(--drift-delay, 0s);
}

/* 粒子位置与动画参数 */
.particle--1 { top: 10%; left: 8%; width: 2.5px; height: 2.5px; --twinkle-duration: 3.2s; --twinkle-delay: 0s; --drift-duration: 6s; --drift-delay: 0s; }
.particle--2 { top: 18%; left: 25%; width: 1.8px; height: 1.8px; --twinkle-duration: 2.6s; --twinkle-delay: 0.8s; --drift-duration: 7.5s; --drift-delay: 1.2s; }
.particle--3 { top: 6%; left: 52%; width: 3px; height: 3px; --twinkle-duration: 3.8s; --twinkle-delay: 1.6s; --drift-duration: 5.8s; --drift-delay: 0.6s; }
.particle--4 { top: 22%; left: 70%; width: 1.5px; height: 1.5px; --twinkle-duration: 2.2s; --twinkle-delay: 2.1s; --drift-duration: 8s; --drift-delay: 2s; }
.particle--5 { top: 14%; left: 85%; width: 2px; height: 2px; --twinkle-duration: 3.5s; --twinkle-delay: 0.4s; --drift-duration: 6.5s; --drift-delay: 1.8s; }
.particle--6 { top: 28%; left: 15%; width: 1.6px; height: 1.6px; --twinkle-duration: 2.8s; --twinkle-delay: 2.5s; --drift-duration: 7s; --drift-delay: 0.3s; }
.particle--7 { top: 8%; left: 40%; width: 2.2px; height: 2.2px; --twinkle-duration: 4s; --twinkle-delay: 1.1s; --drift-duration: 5.5s; --drift-delay: 2.5s; }
.particle--8 { top: 20%; left: 60%; width: 1.4px; height: 1.4px; --twinkle-duration: 2.4s; --twinkle-delay: 3s; --drift-duration: 7.2s; --drift-delay: 1.5s; }

/* 星空闪烁动画 */
@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    25% { opacity: 0.9; transform: scale(1.3); }
    50% { opacity: 0.3; transform: scale(0.7); }
    75% { opacity: 0.75; transform: scale(1.1); }
}

/* 暖光微尘飘浮动画 */
@keyframes warmDrift {
    0%, 100% { opacity: 0.15; transform: translateY(0) translateX(0); }
    25% { opacity: 0.5; transform: translateY(-18px) translateX(8px); }
    50% { opacity: 0.2; transform: translateY(-8px) translateX(-6px); }
    75% { opacity: 0.45; transform: translateY(-22px) translateX(4px); }
}

/* ==================== 主内容容器 ==================== */
.main-container {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

/* ==================== 标题区域 ==================== */
.hero-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    /* 初始隐藏，由JS触发浮现动画 */
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}

.hero-section.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 主标题 */
.site-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--color-text-primary);
    min-height: 1.4em;
    /* 光标闪烁（打字机效果进行中时显示） */
    position: relative;
}

/* 打字机光标 */
.site-title.typing::after {
    content: '|';
    position: absolute;
    right: -0.4em;
    animation: cursorBlink 0.7s step-end infinite;
    color: var(--color-text-secondary);
    font-weight: 300;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 副标题 */
.site-subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    min-height: 1.3em;
    transition: opacity 0.6s var(--ease-smooth);
}

/* 标题装饰线 */
.title-ornament {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    opacity: 0.5;
}

.ornament-line {
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border-accent), transparent);
}

.ornament-dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-border-accent);
    opacity: 0.7;
}

/* ==================== 社交媒体图标栏 ==================== */
.social-bar {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* 初始隐藏 */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease-out-expo) 0.3s, transform 0.8s var(--ease-out-expo) 0.3s;
}

.social-bar.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 社交按钮 */
.social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    transition:
        background-color var(--duration-fast) var(--ease-smooth),
        border-color var(--duration-fast) var(--ease-smooth),
        color var(--duration-fast) var(--ease-smooth),
        transform var(--duration-fast) var(--ease-smooth),
        box-shadow var(--duration-fast) var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

/* 按钮悬停时的微光扫过效果 */
.social-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.03) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.45s var(--ease-smooth);
}

.social-btn:hover::before {
    transform: translateX(100%);
}

.social-btn:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-border-accent);
    color: var(--color-text-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.social-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.social-icon {
    font-size: 1.25rem;
    transition: transform var(--duration-fast) var(--ease-smooth);
}

.social-btn:hover .social-icon {
    transform: scale(1.12);
}

.social-label {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ==================== 软件分享区域标题 ==================== */
.section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
    max-width: 900px;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s var(--ease-out-expo) 0.4s, transform 0.7s var(--ease-out-expo) 0.4s;
}

.section-label.revealed {
    opacity: 1;
    transform: translateY(0);
}

.section-label-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border-accent), transparent);
    opacity: 0.5;
    max-width: 120px;
}

.section-label-text {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ==================== 项目卡片网格 ==================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    width: 100%;
    max-width: 900px;
    /* 初始隐藏 */
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--ease-out-expo) 0.5s, transform 0.8s var(--ease-out-expo) 0.5s;
}

.cards-grid.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== 项目卡片 ==================== */
.project-card {
    cursor: pointer;
    position: relative;
    /* 3D变换过渡 — 在非滚动时平滑，滚动时由JS实时更新 */
    transition:
        transform 0.15s ease-out,
        box-shadow 0.35s var(--ease-smooth),
        border-color 0.35s var(--ease-smooth);
    transform-style: preserve-3d;
    will-change: transform;
    /* 默认无旋转 */
    transform: rotateX(0deg) rotateY(0deg) translateZ(0);
}

/* 卡片内部容器 */
.card-inner {
    position: relative;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-md) var(--space-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    /* 内部元素也有3D深度 */
    transform-style: preserve-3d;
    transition:
        background-color var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

/* 卡片顶部装饰条 */
.card-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 5%,
            var(--color-border-accent) 20%,
            var(--color-border-accent) 80%,
            transparent 95%);
    opacity: 0.5;
    transition: opacity var(--duration-normal) var(--ease-smooth);
}

/* 卡片角落装饰标记 */
.card-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    opacity: 0.25;
    transition: opacity var(--duration-normal) var(--ease-smooth);
}

.card-corner--tl {
    top: 8px;
    left: 8px;
    border-top: 1px solid var(--color-border-accent);
    border-left: 1px solid var(--color-border-accent);
}

.card-corner--br {
    bottom: 8px;
    right: 8px;
    border-bottom: 1px solid var(--color-border-accent);
    border-right: 1px solid var(--color-border-accent);
}

/* 卡片内容区 */
.card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    /* 内容浮在卡片表面上 */
    transform: translateZ(8px);
}

/* 项目名称 */
.card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
    min-height: 1.4em;
    transition: color var(--duration-fast) var(--ease-smooth);
}

/* 卡片内分隔线 */
.card-divider {
    width: 32px;
    height: 1px;
    background: var(--color-border-accent);
    opacity: 0.4;
    transition: width var(--duration-normal) var(--ease-smooth), opacity var(--duration-normal) var(--ease-smooth);
}

/* 项目介绍 */
.card-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    min-height: 3em;
    letter-spacing: 0.03em;
    transition: color var(--duration-fast) var(--ease-smooth);
    flex: 1;
}

/* ==================== 卡片操作按钮组 ==================== */
.card-actions {
    display: flex;
    gap: var(--space-xs);
    margin-top: auto;
    padding-top: var(--space-sm);
}

.card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--duration-fast) var(--ease-smooth),
        border-color var(--duration-fast) var(--ease-smooth),
        color var(--duration-fast) var(--ease-smooth),
        transform var(--duration-fast) var(--ease-smooth),
        box-shadow var(--duration-fast) var(--ease-smooth);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
    background: transparent;
    position: relative;
    overflow: hidden;
    flex: 1;
}

/* 按钮扫光效果 */
.card-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.04) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.45s var(--ease-smooth);
}

.card-btn:hover::before {
    transform: translateX(100%);
}

.card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.card-btn:active {
    transform: translateY(0) scale(0.97);
}

.card-btn i {
    font-size: 1rem;
    transition: transform var(--duration-fast) var(--ease-smooth);
}

.card-btn:hover i {
    transform: scale(1.15);
}

/* 网盘按钮 — 暖色强调 */
.card-btn--pan {
    border-color: rgba(200, 170, 130, 0.25);
    color: var(--color-text-secondary);
}

.card-btn--pan:hover {
    background-color: rgba(200, 170, 130, 0.1);
    border-color: rgba(200, 170, 130, 0.45);
    color: #e8d5b0;
}

.card-btn--pan i {
    color: #d4b48c;
}

/* GitHub 按钮 — 冷色强调 */
.card-btn--github {
    border-color: rgba(140, 160, 200, 0.2);
    color: var(--color-text-secondary);
}

.card-btn--github:hover {
    background-color: rgba(140, 160, 200, 0.1);
    border-color: rgba(140, 160, 200, 0.4);
    color: #b8c8e8;
}

.card-btn--github i {
    color: #8a9fc0;
}

/* 卡片悬停效果（桌面端） */
@media (hover: hover) {
    .project-card:hover {
        transform: translateY(-4px) !important;
    }

    .project-card:hover .card-inner {
        background-color: var(--color-bg-elevated);
        border-color: var(--color-border-medium);
        box-shadow: var(--shadow-card-hover);
    }

    .project-card:hover .card-accent {
        opacity: 0.8;
    }

    .project-card:hover .card-corner {
        opacity: 0.5;
    }

    .project-card:hover .card-title {
        color: #f0ece8;
    }
}

/* 卡片点击反馈 */
.project-card:active {
    transform: translateY(-1px) scale(0.985) !important;
    transition: transform 0.08s ease-out !important;
}

/* ==================== 弹窗样式 ==================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
    opacity: 0;
    transition:
        opacity 0.35s var(--ease-smooth),
        background-color 0.35s var(--ease-smooth);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

.modal-overlay.active {
    background-color: rgba(0, 0, 0, 0.65);
    pointer-events: auto;
    opacity: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* 弹窗面板 */
.modal-panel {
    position: relative;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: var(--shadow-modal);
    max-width: 420px;
    width: 90%;
    text-align: center;
    transform: scale(0.9) translateY(16px);
    transition: transform 0.4s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.modal-overlay.active .modal-panel {
    transform: scale(1) translateY(0);
}

/* 关闭按钮 */
.modal-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border-subtle);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color var(--duration-fast) var(--ease-smooth),
        border-color var(--duration-fast) var(--ease-smooth);
}

.modal-close:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-border-accent);
}

/* 关闭图标 — 纯CSS X形 */
.close-icon {
    position: relative;
    width: 14px;
    height: 14px;
}

.close-icon::before,
.close-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: var(--color-text-secondary);
    border-radius: 1px;
    transition: background-color var(--duration-fast);
}

.close-icon::before {
    transform: translateY(-50%) rotate(45deg);
}

.close-icon::after {
    transform: translateY(-50%) rotate(-45deg);
}

.modal-close:hover .close-icon::before,
.modal-close:hover .close-icon::after {
    background-color: var(--color-text-primary);
}

/* 弹窗内平台图标 */
.modal-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-platform-icon {
    font-size: 1.6rem;
    color: var(--color-text-primary);
}

/* 弹窗平台名称 */
.modal-platform-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
}

/* 弹窗分隔线 */
.modal-divider {
    width: 50px;
    height: 1px;
    background: var(--color-border-accent);
    opacity: 0.5;
}

/* 弹窗联系方式 */
.modal-contact-info {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.03em;
    line-height: 1.6;
    word-break: break-all;
}

/* ==================== 响应式设计 ==================== */

/* 平板及以下 — 卡片改为两列或单列 */
@media (max-width: 768px) {
    .main-container {
        padding: var(--space-lg) var(--space-md) var(--space-md);
        gap: var(--space-md);
    }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        max-width: 440px;
    }

    .card-inner {
        min-height: 160px;
        padding: var(--space-sm) var(--space-md) var(--space-md);
    }

    .card-actions {
        flex-direction: row;
        gap: 6px;
    }

    .social-bar {
        gap: var(--space-sm);
    }

    .social-btn {
        padding: var(--space-xs) var(--space-sm);
        gap: 3px;
    }

    .social-icon {
        font-size: 1.1rem;
    }

    .social-label {
        font-size: 0.65rem;
    }

    .site-title {
        font-size: clamp(1.3rem, 5vw, 1.8rem);
    }

    /* 移动端减弱3D透视强度 */
    body {
        perspective: 800px;
    }
}

/* 小屏手机 */
@media (max-width: 480px) {
    .main-container {
        padding: var(--space-md) var(--space-sm) var(--space-sm);
        gap: var(--space-sm);
    }

    .cards-grid {
        gap: var(--space-sm);
    }

    .card-inner {
        min-height: 140px;
        padding: var(--space-xs) var(--space-sm) var(--space-sm);
        border-radius: var(--radius-md);
    }

    .card-title {
        font-size: 1.1rem;
    }

    .card-desc {
        font-size: 0.8rem;
    }

    .card-actions {
        gap: 4px;
    }

    .card-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .card-btn i {
        font-size: 0.85rem;
    }

    .social-bar {
        gap: var(--space-xs);
    }

    .social-btn {
        padding: var(--space-xs) var(--space-sm);
    }

    .modal-panel {
        padding: var(--space-lg) var(--space-md);
    }
}

/* 大屏优化 */
@media (min-width: 1200px) {
    .main-container {
        max-width: 1050px;
    }

    .cards-grid {
        max-width: 960px;
        gap: var(--space-xl);
    }

    .card-inner {
        min-height: 220px;
        padding: var(--space-lg) var(--space-lg) var(--space-xl);
    }
}

/* ==================== 辅助工具类 ==================== */
.is-hidden {
    display: none !important;
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    body {
        perspective: none;
    }

    .project-card {
        transform: none !important;
    }
}