/* 
 * 全局样式配置
 * 遵循极简美学设计原则
 * 适配 PC、平板、手机三端
 */

/* 引入字体：思源黑体与衬线体用于英文装饰 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

/* 定义 CSS 变量 */
:root {
    --color-primary: #1A1A1A;     /* 深黑 - 主文字 */
    --color-secondary: #888888;   /* 浅灰 - 辅助文字 */
    --color-accent: #E6D5B8;      /* 浅金 - 强调色 */
    --font-heading: 'Helvetica Now', 'PingFang SC', 'Noto Sans SC', sans-serif;
    --font-body: 'PingFang SC', 'Noto Sans SC', sans-serif;
    --font-serif: 'Futura PT', 'Playfair Display', serif; /* 英文装饰/艺术字体 */
}

/* 基础重置与全局设置 */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased; /* iOS 平滑字体 */
    -moz-osx-font-smoothing: grayscale;  /* MacOS 平滑字体 */
    color: var(--color-primary);
    background-color: #FFFFFF;
    overflow-x: hidden;
    line-height: 1.6;
}

/* 极简排版辅助类 */
.font-serif {
    font-family: var(--font-serif);
}

.tracking-widest-plus {
    letter-spacing: 0.2em;
}

/* === 核心交互动效 === */

/* 1. 链接下划线中心展开动效 */
.hover-underline-animation {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 50%;
    background-color: currentColor;
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}

.hover-underline-animation:hover::after {
    width: 100%;
    left: 0;
}

/* 2. 图片悬停微缩放动效 (极简风核心) */
.img-zoom-wrapper {
    overflow: hidden;
    display: block;
    position: relative;
}

.img-zoom-wrapper img {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.img-zoom-wrapper:hover img {
    transform: scale(1.03); /* 轻微缩放，保持克制 */
}

/* 3. 页面元素渐入动效 */
.fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 布局辅助工具 === */

/* 隐藏滚动条但保留滚动功能 (用于横向滚动区域) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;    /* Firefox */
}

/* 视差滚动背景容器 */
.parallax-section {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 文本选择颜色定制 */
::selection {
    background-color: var(--color-accent);
    color: #fff;
}

/* 移动端优化 */
@media (max-width: 768px) {
    /* 移动端禁用 fixed 背景以提升性能并防止抖动 */
    .parallax-section {
        background-attachment: scroll;
    }
    
    /* 移动端字体调整 */
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
}

/* 页脚样式锁定 */
.footer-minimal {
    font-family: var(--font-serif);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #888;
}