/* 引入英文字体 Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap');

/* 定义CSS变量与设计令牌 */
:root {
    /* 色彩方案 */
    --color-moon-white: #FFFFFF;
    --color-premium-gray: #F8F8F8;
    --color-clay-pink: #E8C4C4;
    --color-sand-beige: #E8E0D9;
    --color-charcoal: #2C2C2C;
    --color-mid-gray: #666666;
    --color-copper: #B87B54;

    /* 字体栈 */
    --font-stack: "Helvetica Neue", "Montserrat", "PingFang SC", "Source Han Sans CN", sans-serif;
    
    /* 动画曲线 */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 全局基础样式 */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-stack);
    color: var(--color-charcoal);
    background-color: var(--color-moon-white);
    line-height: 1.6;
    font-weight: 300;
    overflow-x: hidden;
}

/* 字体规范覆盖 */
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    letter-spacing: 2px;
}

.font-body {
    line-height: 1.8; /* 英文正文行高建议 */
}

/* 隐藏滚动条但允许滚动 (用于分类导航等横向滚动区域) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 交互动效类 */

/* 图片悬停放大 */
.hover-zoom-img {
    transition: transform 0.7s var(--ease-smooth), opacity 0.5s ease;
    will-change: transform;
}
.group:hover .hover-zoom-img {
    transform: scale(1.05);
}

/* 渐入动画 */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

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

/* 自定义下划线动画 */
.nav-link {
    position: relative;
    display: inline-block;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -4px;
    left: 50%;
    background-color: var(--color-charcoal);
    transition: width 0.3s ease, left 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
    left: 0;
}

/* 骨架屏加载动画 */
.skeleton-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 移动端菜单过渡 */
.mobile-menu-transition {
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}